• こんにちは

  • 話すこと

    • 見栄えの良い Blog を作りたかった
    • どうせだったらモダンなツールを使いたい
    • Gatsby, Nuxt.js(nuxt generate), VuePressを試した
    • Gatsby は GraphQL がつらい
    • Nuxt.js で generate するとルーティングがつらい
    • VuePress は Default Theme のカスタマイズがやりづらい
  • gatsby build, nuxt generate, vuepress build

    • Single Page Application なのか?
    • JAMSatckアーキテクチャ
    • 複数のHTMLファイルを生成する
    • 最初のHTMLを読み込んだ後はルーティング、DOMのレンダリングは Javascript が行う。
    • build した後にS3にファイルを配備すれば、動的なサイトに匹敵するサイトを作ることもできる
  • Gatsby.js

    • v0.xv1.0を触っていました。
    • Markdown(filesystem) だけでなく、mongodb, wordpress, contentful など外部リソースのサポート
    • plugin-source-medium といった plugin を使えばあとは GraphQL のクエリを投げるだけで良い
    • GraphQLをちょっと覚える必要があるので最初は手こずる
    • DynamoDB や Firebase Database は自前で Node(Gatsby's data system)を作る必要がある
    • Object で渡せば済む話が GraphQL でラップして使う必要がある
    • v2.xについてはよく分かりません
  • Nuxt.js

    • Single Page Application を作る為のフレームワーク
    • 最も自由度が高い
    • generate だと動的ルーティングを自分で用意する必要がある
    • スネークケースがだめという不思議な罠もある
    • だんだん SSR にしたくなってくる
    • Lambda, Firebase Function で動かそうとして別の罠に遭遇する
  • VuePress

    • 技術ドキュメントを作成するためのツール
    • 美しい Default Theme
    • 最近 v1.0 になったがまだ alpha 版でドキュメントが不足
    • Default Theme 以外のテーマは無いに等しい
    • そして Default Theme のカスタマイズがちょっとしづらい
    • データ構造自体はシンプル
  • カスタマイズしてみよう

  • カスタマイズしてみよう

    • 既存の Layout を修正するのは難しい
    • Page Component の中に自作の Component を入れるのは簡単
    • 最終的には eject すればいいんだけどまだ alpha 版
    • 今は Default の Component に渡すデータ構造を加工する、に止める
    • 試しに Sidebar に渡すデータ構造をいじってみましょう
    • それさえ覚えればVuePress はマスターしたも同然
  • Sidebar を以下の画像のようにしたい

  • Sidebar のデータ構造

    module.exports = {
      themeConfig: {
        sidebar: [
          { 
            title: '2018',
            children: ['/posts/2018/xxxx', '/posts/2018/yyyy']
          },
          {
            title: '2017',
            children: ['/posts/2017/xxxx', '/posts/2017/yyyy']
          }
        ]
      }
    }
    
  • Life Cycle の ready 関数を使えばデータの加工ができる

    function parseToSidebar(posts) { ... } // ここでちょっと頑張る
    
    module.exports = (options, ctx) => {
      async ready() {
        const { pages, themeConfig } = options
        const posts = items.filter(p => p.frontmatter.type === 'post')
        themeConfig.sidebar = parseToSidebar(posts) 
      }
    }
    
  • まとめ

    • VuePress はとにかく Theme がきれい
    • 基本的にドキュメントを作成するツール
    • でも Blog 向けにカスタマイズして使う事は十分可能
    • pagesthemeConfigをカスタマイズするだけで色々できる
    • 私は今一番これを気に入っています
  • ご静聴ありがとうございました

Item 1 of 14
How to start blogging with Vuepress / Megro.es#20