hamakou108 blog

Gatsby で構築したブログを Netlify からデプロイしてみた

Cover Image for Gatsby で構築したブログを Netlify からデプロイしてみた

半年ほど前から技術ブログを作成したいと思っていたけど、ついに一念発起してこのブログを作成した。 Gatsby と Netlify を使ってブログを構築、公開をしてみたので、その手順のメモを示す。

ローカル環境は以下の通り。

  • MacOS 10.15
  • Node.js v11.10.0
  • npm 6.9.0

Gatsby

なぜ Gatsby ？

Jekyll や Hugo は解説記事も豊富で使いやすそうに感じたけれど、 React や TypeScript のような比較的モダンな技術をブログに取り入れたい気持ちがあった。 最終的に Gatsby と Next.js で迷ったけど、 動的にページ生成しないなら Gatsby で十分らしい ので Gatsby を採用した。

今回はとにかく早く作ることが目標で、フレームワークとしての Gatsby の特徴などはあまり理解できていない状況なので、これから勉強しようと思う...。

Gatsby のブログ用テンプレートをローカル展開

Gatsby のドキュメント に従って Git リポジトリを作成する。

$ npm install -g gatsby-cli
$ gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog

GitHub にリモートリポジトリを作成し、ローカルの内容を push する。

$ git remote add origin git@github:hamakou108/my-blog.git
$ git push -u origin master

メタ情報を修正

gatsby-config.js に書かれたテンプレートのメタ情報を自分自身の情報に書き換える。

module.exports = {
  siteMetadata: {
    title: `hamakou108 blog`,
    author: `Kosuke Hamada`,
    description: `hamakou108 のブログです。`,
    siteUrl: `https://hamakou108.com/`,
    social: {
      twitter: `hamakou108`,
    },
  },
  plugins: [
  //...
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `hamakou108.com`,
        short_name: `hamakou108`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `content/assets/icon.png`,
      },
    },
  //...
}

その他にも src/components/bio.js や src/components/layout.js 、アイコン画像などを必要に応じて修正する。

Netlify

デプロイ設定

これも Gatsby のドキュメント に説明があるので、そのまま従ってデプロイする。 Build Command: のデフォルトは npm run build になると記述されているが，自分がデプロイの設定を行ったときは初めから gatsby build となっていた（頭良い...！）。

デプロイが完了すると Netlify から与えられた適当なホスト名で公開されたブログにアクセスできるようになる。

カスタムドメイン、 HTTPS 設定

ドメイン取得元の Google Domains ではカスタムドメインを直接 Netlify のホスト名に ALIAS できないようだったので、 Netlify の DNS サーバを利用することにした。 設定後に Netlify のネームサーバのホスト名が表示されるので、 Google Domains 側でそれらをカスタムネームサーバとして指定する。 24時間以内にネームサーバの設定は完了する。

HTTPS 設定

上記の設定後に DNS の認証を行えば、認証成功後24時間以内に HTTPS 設定も完了する。

その他

Google Search Console にドメインを登録

Google のクローラがこのブログを認識するように Google Search Console でドメインを登録しておく。 Google Domains で取得したドメインであれば所有者の確認は登録時に完了する。

今後の課題

デザイン修正、コメント機能、検索機能、タグや月別の一覧表示、 TypeScript 化など挙げたらキリがないのだけれど、まずは記事を書くこと。ここから着実に取り組みたい。