saitoxu.io

AboutTwitterGitHub

ブログをJekyllからGatsbyに移行しました

January 24, 2020

このブログはJekyllとGitHub Pagesを利用して公開していたのですが、 最近Gatsbyに移行したのでそのときの手順をまとめておきます。

Jekyllのソースを退避

まずjekyllのようなディレクトリを作成し、Jekyllのソースを退避させます。

Gatsbyのプロジェクト作成

Gatsbyのプロジェクトを作成します。 Gatsbyは空のディレクトリでないと実行できないため、gatsbyのようなディレクトリを作成し、その下で以下を実行します。

$ npx gatsby new . https://github.com/gatsbyjs/gatsby-starter-blog

その後gatsbyに生成されたソースを元のディレクトリに移行します。

gh-pagesをインストール

GitHub Pagesを使ってホストする場合は、Gatsbyのプラグインであるgh-pagesをインストールします。

$ npm install gh-pages --save-dev

package.jsonにデプロイコマンドを追記します。

  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+   "deploy": "gatsby build && gh-pages -d public -b master",
    "dev": "npm run develop"
  }
}

Jekyllの記事を移行

jekyll/_posts以下にあるマークダウンを、content/blogなどのgatsby-source-filesystemが読み込むディレクトリに移行します。 自分はそれなりにファイル数が多かったので、スクリプトを書いて移行しました。

移行前

移行前は次のような構成になってると思いますが

jekyll/_posts
├── 2017-01-01-hoge.md
├── 2018-01-01-fuga.md
└── 2019-01-01-piyo.md

移行後

移行後は次のようになります。

content/blog
├── 2017
│   └── 01
│       └── hoge
│           └── index.md
├── 2018
│   └── 01
│       └── fuga
│           └── index.md
└── 2019
    └── 01
        └── piyo
            └── index.md

記事に紐づく画像も、content/assetsなどに移行します。 最後にJekyllのソースを退避させたjekyllディレクトリを削除します。

npm run deployを実行するとmasterブランチにビルドされたファイルがコミットされ、ページが公開されます。 これにて移行完了です。

© 2022, Yosuke Saito