ブログをGatsbyJS, Contentful, Netlifyに移行しました
January 13th, 2019
以前はWordpressで運用していたブログですが、数年更新していないこともあり完全にリフレッシュしました。 まだ色々といじってないのでシンプルなものですが、ちょいちょい追加していこうと思ってます。
なぜWordpressやめたのか
再度Wordpressでやっても良かったんですが、時代に合わない感じになってきてるなと思い辞めました。 いくつか理由を並べたいと思います。
Wordpressを使う理由がみつからない
Wordpressのプラグインやテーマの充実度はとても魅力的なのですが、簡単なブログでそれらをそんなに必要としてなさそうだなと思いました。 しかも、PHPをそんなに触りたくないしWordpressできてもそこまで仕事に役立ちそうになさそうな感じがしちゃってます。
ただし、WordpressはMVP(Minimum Viable Product)として利用するにはとても良い可能性があります。検証したい項目にたいして、要件さえ満たせればプラグインで高速に作れ、検証がすばやく回ると思います。
Dockerで管理したいけどできない
サーバーサイドの最近といえばDockerで管理するのが当たり前になってるのかなと思います。WordpressがDockerとの相性が全然良くないんですよね。
Wordpress自体はwp-cliというCLIで入れられます。バージョン指定したり、プラグインやテーマも入れられます。
これはいいのですが、問題は管理画面からWordpressのアップグレードができてしまい、これが再度Docker imageを作ったときに差分が出てしまいます。しかも、バージョンによりDBもマイグレートされてしまうので全く同じ環境が作りにくくなってしまいます。
プラグインやテーマについても同じようなことが発生します。
(※自分が調べた範囲でのことなのでやりようがあるかもしれません。いい方法があったら教えてください)
新しいことをやりたい
仕事でAndroidやiOSの新しいアーキテクチャ試したり、Rx系使ってみたりとチャレンジしたので、ブログでも新しいことやってみたいなと思いました。 Wordpressみたいに枯れて、エンジニアとしてもチャレンジできなそうで、やってても楽しくなさそうだなと。
色々と調べて今回の構成にしました。
構成について
今回のブログに使った構成は下記になります。
-
- Reactを利用した静的サイトジェネレーター
-
- GraphQLをベースとしたヘッドレスCMS
-
- CDN
-
- ソースコード管理
GitHubのソースコード、Contentfulのコンテンツを更新、追加、削除するとNetlifyでコンテンツビルドが走りサイトが更新されます。
なぜこの構成か
下記記事たちをみてみて総合してこの構成にしました。作ろうと思って調べ始めた段階では、Netlifyしか知りませんでした^^;
Vueで作るということも考えたのですが、GatsbyJS経済圏で実装して速くリリースしちゃいたいなと思いました。 思惑通り、GatsbyJSのスターターキットとしてContentfulを使うものが用意されていてそれを利用して、ちょいちょい追加してあげたらベースはすぐにできました。大体2日かからないくらい。
どう作ったか
ベース
基本的にはGatsbyJS and Contentful in five minutesの記事と同じように進みました。
開発端末はMacBook Pro (15-inch, 2016)になります。
事前にContentful, Netlifyのアカウントを作成しておいてください。
$ npm install -g gatsby
$ gatsby new blog.yohei.tokyo https://github.com/contentful-userland/gatsby-contentful-starter
$ cd blog.yohei.tokyo
$ yarn
$ yarn run setup
# ContentfulのSpaceIdやDelivery API Token等が必要になります。
# setupするとContentfulにブログテンプレートで初期化され、初期データが入ります
$ yarn run dev
$ open http://localhost:8000追加プラグイン
PWA
高速に表示されたいし、いい感じにしたいのでPWA対応を行いました。主にはキャッシュになります。
-
- icon追加できたり
-
- ServiceWorkerを使ったオフライン対応
ソースコードハイライト表示
今回使用したスターターキットではソースコードハイライトがついてなかったので、gatsby-remark-prismjsを使用しました。 prismjsは今のスタンダードみたいです。
結果
light houseでそこそこいい点数で満足。
頑張って更新していきます。
Share
©MERCURY MAEDA