Gatsby.jsにブログを移行するまでにやったこと

2019.03.29

ホスティング先の選定

Netlify: All-in-one platform for automating modern web projects.

大人しくNetlifyにした。Toykoリージョンはまだなく、一番近くてシンガポールのようだが、GitHubと連携するだけで、ビルドとデプロイが自動化でき、無料でSSL化対応もできるので、非常に便利。

Starterの選定

結果、これにした。他にも、

この辺も迷った。ブログを書いて公開したいだけなら、gatsby-starter-hero-blogが良さそう。 今回はカスタマイズしながら学習していくことが目的だったので、上記の2つは完成度が高い分、カスタマイズがしづらいので、やめた。 一方で、gatsby-starter-blogはシンプルで、カスタマイズがしやすい構造となっていた。 そこで、完成度の高いStarterで使用している技術を参考にしつつ、自分で構築していくスタイルを取った。

やったことまとめ

  • gatsby new する
bash
$ gatsby new blog-name https://github.com/gatsbyjs/gatsby-starter-blog
$ cd blog-name
$ npm install
$ gatsby develop
  • siteMetadataの書き換え
  • bio.jsの情報を書き換え
  • gatsby-plugin-manifest内の情報の書き換え
  • 記事を書く
  • GitHubにPush
  • Netlifyで該当リポジトリと連携
  • Deploy previewsをDon’t deploy pull requestsに変更

    • PRを作るとPreview用の環境を立ち上げてくれる便利機能だが、マージした後も消せない仕様(Siteごと削除して、再度立てることになる)になっているので、基本的に作らない方針で進める
  • カスタムドメインの設定

おわりに

どんどんやっていって、どんどんアウトプットしていきたい

キクナントカ

ソフトウェアエンジニアをしています。趣味でボードゲームを制作したり、個人開発でNakamyというサービスを開発しています。詳しくはこちら