背景

• 個人的な発信の場を設け、強化していきたい
• 業務で、月に 1,2 回ほど内容を更新するブログ的なサイトを作ることになった
• でも WordPress とかは（技術的興味としては）使いたくない

などの理由から、WordPress 以外の技術でブログシステムを構築することにした。

私個人のスキルセットはフロントエンド（React）に寄っているので、マークアップやシステム構築は React+Sass 系で行いたい。そこで Gatsby を使ってブログシステムを構築することにしてみた。これはその最初のテスト投稿。

手順

[username].github.io の名称でリポジトリを作成

• https://github.com/suzukalight/suzukalight.github.io

このリポジトリ名にしておくと、master ブランチが自動的に公開される。

スターターキットの準備

gatsby CLI から、スターターキットをインストールすることができる。

$ npm i -g gatsby
$ gatsby new suzukalight-github https://github.com/gatsbyjs/gatsby-starter-blog
$ cd suzukalight-github

インストールした時点で、すでにブログシステムとして完成しており、dev-server で起動してデモ体験ができる；

$ yarn develop

デプロイコマンドの準備

gh-pages コマンドをインストールし、GitHub Pages として公開できるようにする；

$ yarn add -D gh-pages
$ git init
$ git checkout -b develop
$ git add .
$ git commit -am "gatsby new"
$ git push origin develop

master ブランチは公開ファイル用なので、gatsby システム全体は別のブランチにコミットしておく必要がある。私はとりあえず develop にコミットすることとした。

デプロイ実行

以下のデプロイコマンドを package.json に追記する；

{
  "scripts": {
    "push": "gh-pages -d public -b master",
    "deploy": "yarn build && yarn push"
  }
}

デプロイコマンドを実行すれば、スタティックサイト生成と、GitHub Pages への公開がシリアルに行われる。

$ yarn deploy

ビルドから公開まで、約 30 秒で行われるので、速度としては十分速いと感じる。

必要に応じて、GitHub Pages の設定を行う

• 独自ドメインの設定
  • suzukalight.com を割付
  • DNS 側に、A レコードと ALIAS レコードを設定
• HTTPS の強制
  • SSL じゃないと PWA 対応ができなくなる
  • 証明書は GitHub が自動で用意してくれる（Let's Encrypt）

今後

• テンプレート変更
• タグ追加
• PWA 対応
• SNS カード
• Contentful 使ってみる