Yamablog
  • twitter-logo
  • github-logo

2020.07.23

ブログをWordPressからGatsbyへ移行しました！

ずっと放置していたWordPressのブログをGatsbyでリプレイスしたので、その忘却録として記事を書きました。

多分、走り書き程度の内容なので、来月くらいには直します。

きっかけ

何故このタイミングで、ずっと放置していたWordPressのブログをGatsbyへと置き換えることにしたかというと、今月末にXserverとのサーバー契約が切れることが元々の原因でした。

そもそも最初はWordPress自体の勉強と勉強した内容を発信する目的で作成したブログでしたが、実際にはバックエンド（主にNode）がメインのWebプログラマとして就職をしたため、役割を失っていました。
また、ここ半年は情報発信よりも業務と学習自体が楽しかったので、ブログは完全に停止していました。

そのため、更新していないブログにお金を掛けるのも勿体ないし、一旦整理しておこうと思いました。

ただ、せっかく1年間ほど独自ドメインで運営していたブログだったので、ただ捨ててしまうのも勿体ないなぁと思い直し、勉強の一環も兼ねて静的サイトジェネレーターへの乗り換えを検討し始めたのが、きっかけでした。

技術スタック

今回、ブログを刷新するにあたって使用した主な技術は以下の通りです。

技術選定としては、

  • 静的サイトジェネレーターで構築

    • 現状のPVなら、ほとんどのホスティングサービスの利用で無料なのが良い

  • 普段の業務で使っていない技術スタックで挑戦

    • せっかくの機会なので、何かしらのチャレンジをしたかった

  • 今後、職場に導入される可能性が高い技術をできるだけ採用

    • とはいえ直近で役に立たない技術の習得も無駄＆モチベーションを保てないので、上司に相談。今後使いそうな技術・できるだけ学習価値のあるものに絞った（つもり……）

  • ドキュメントやブログなどの記事の充実度

    • できれば自分一人でエラーなどの解決が出来たら良いと思った（結果、無理だった笑）

みたいなことを考えていました。

その結果、ReactとTypeScriptを使ってみたい！と思い、NextやGatsbyなどの公式チュートリアルを一通り学習しました。
そして最終的にはGatsby & TypeScriptという、ある意味ド定番の構成を選定しました。

また最初は、おしゃれなテーマをカスタマイズしてサクッと使おうかとも思っていたんですが、勉強になりにくそう＆ブラックボックスになりそうと考え、今回はgatsby-starter-hello-worldを一からカスタマイズすることにしました。
結果的には公式ドキュメントと様々な方のGitHubのリポジトリを参考に実装したため、Gatsbyへの理解が色々と深まり良かったです。

ちなみにFirebase Hostingは上司のオススメ。
最初はNetlifyでの実装を考えていたんですが、いろいろと比較した結果、Google最強説あるなぁと思い至り採用！
SSL化や独自ドメインの連携がGUIでポチポチするだけなので使いやすかったです。

ちなみにソースコードはGitHubにて公開しています。
yamachoo/gatsby-blog

やったこと

いろいろとやったことがあるんですが、長くなるので箇条書きで書いておきます。

  • XDで簡単なデザインカンプを作成

    • すっごい適当。でもコレのおかげでテンションとモチベーションは上がった笑

XDデザインカンプ

  • GatsbyのTypeScript化

    • この部分はマジで頑張った。情報精査をかなりしてシンプルに実装できたので記事にしておきたい！

  • ESLint、stylelint、Prettierの導入

    • lint系の導入をした。初めてstylelint、Prettierを導入したので、ちょっとドキドキした

  • Prismなどを利用した記事部分のデザイン

    • 取り急ぎ、Hello Worldでデザインが確認できるはず

  • Xserverにある独自ドメインをCDNで紐付け

    • 結構、簡単に出来た！

  • Analytics＆AdSense等の引き継ぎ

    • ブログを移管したので、引き継ぎを行った感じ

※補足※
あと逆に実装したけど、微妙だったので止めたものも箇条書きで書いておきます。

  • EmotionによるCSS in JS

    • ぶっちゃけ、tsxの中身が煩雑になると思った。かといってstyles.tsとして切り出すくらいなら、SCSSの方がエディターの入力補完が効いて良くね？となってしまった……。誰か上手い運用を知っていたら教えていただきたいです(T_T)

  • gatsby-plugin-graphql-codegenによる型の自動生成

    • 自動生成される型に含まれるMaybe型のnullが邪魔だった。Maybe型の処理のために分岐処理を書く羽目になるので、正直コレなら自分で型を定義したほうがコードがきれいに保てて楽だと思った

ヤル気がでたら、それぞれを記事にします。（多分……）

移管して良かったこと

とりあえず、今回ブログを移管して良かったことです。

圧倒的に勉強になった

正直、ReactもTypeScriptも、あまり理解していない状態から実装をしていったので、躓きが多かったです。
ただ、その分、圧倒的に勉強になったなぁと感じました。

またGatsbyについてのブログは多かったものの、情報が古いものが多かったので、公式ドキュメントやリポジトリを舐めるように見て、実装理由を考えてみる、処理を実際に追っかけてみるといった習慣がついたことは本当に良かったです。
あと実装を自分でしているので、エラーが起きたときとかも大体の原因が分かっているので、何気に安心感があります。

ただ、まだまだ勉強不足なところもあるので、実践を通じて更に勉強をしていきたいと考えています。

維持費が安くなった

今まではXserverを年1万円ほどで契約をしていたので、それを独自ドメインの維持費のみ（年1200円程度）に落とせたのは良かったです。

まぁ、大した金額では無いんですが、これでもっと気軽にブログを維持していけるなぁという心持ちです。

WordPressから開放された

意外とコレが個人的には一番良かったポイントかもです。

最近、WordPressとテーマ、プラグインの干渉とかの問題を業務で色々と経験して苦労＆疲弊していたので、そもそもWordPressのない状態を作れたのは心理的に幸せです。

あと読むコードがほぼ、JavaScript & TypeScriptだけで良いというのも凄く楽になりました笑。

Markdownで記事が書けるようになった

ここ半年間、業務でドキュメントをMarkdownで書く機会が増えてきたのもあり、割と書き慣れてきたMarkdownでブログが書けるのは良いです。

あとMarkdownで書いておくと他の静的サイトジェネレーター（Hugo, Nuxt, ...etc）などへの移管も簡単になるのは良い点だなぁと思います。
当分は移行することは無いと思いますが、記事を一部だけ持っていくとかも気軽にできるのは、保守性が高く良さげな気がします！

これからの予定

取り急ぎ、公開できるくらいのクオリティーにはなりましたが、まだまだ初期にXDで作ったデザインからは遠いので、その差分を機能と一緒に実装していきたいなぁと思っています。

当面の予定としては

  • 目次
  • サイドバー
  • タグ

あたりを中心に実装を進めていきたいです。

終わりに

とりあえず、ある程度Gatsbyへの知見が深まったことは本当に良かったです。

あとはトップページの見栄えのためにも、週1くらいで記事も増やしていけたら良いなぁ……。