Aiki x Developer

gatsby

Gatsby, Contentful, Netlifyでブログ&ポートフォリオをリニューアル

May 20th, 2019

website

ブログ&ポートフォリオのリニューアル

リニューアルを考えた理由

AWSのEC2でWordpressブログをしていましたが、開発のしにくさに飽きが来たのと、Wordpressがバージョン5になってから、ずいぶん前に開発したテーマを使うのをやめて一新したかったのが大きな理由です。

あとAWSでWordpressを運営するには、割引パッケージを充てても日本のレンタルサーバーとそんなに変わらないし、期限が切れているのに気が付いても時間のない人にとってはそのまま割高な金額で月額引かれるので、サーバーも引っ越しを長らく検討していました。

そんな中、Gatsby楽しいと開発を仕事でしたことがあって思っていたので、GatsbyとCMSコンビで、効率の良い方法でサイトリニューアルができたらと思って、色々試行錯誤することに。

Gatsbyにも良し悪しはありますが、昔ほどブログ記事も書かなくなっているのと、サイトのスピードを爆速にしたかっこと、Next.jsはまだマスターしていないのもあって、その前に何かGatsbyでオフィシャルな成果物を残しておきたかったのもあります。

開発した感想 & メリット

開発してみた感想としては、Gatsby、Netlify、Contentfulの組み合わせでポートフォリオ兼ブログサイトを開発するのはとてもスムーズでした。 休暇を使って開発したのですが、2週間で開発しました。

スタイルを整えたりイラストを描いたりといった、コードを書く以外の作業を含めても2週間でできたので、開発は相当スムーズな感覚でした✨

GraphQlに慣れるのにも、とても良い練習になっていると思います。 一番厄介だったgatsby-imageを使った、画像のアウトプットは、画像コンポーネントにしてしまって、好きなページに呼び出せるようにしたらグンと楽になりました。

(Gatsbyは好きですが、画像を表示させるまでのデータクエリを取得するのが私はどうもまだ苦手なようなので...)

ContentfulのUI/UXもWordpressよりも断然見やすいし、Wordpressよりも、こちらの方がユーザーにもDeveloperにもフレンドリーな気がします。

カスタマイズもしやすく、コンポーネントの概念を理解しているエンジニアであればこちらの方が自由度が高く、Reactベース開発が好きな人にはもってこいだと思います。 ただContentfulをコードが全くわからない人がいきなりカスタマイズするのはハードルが高く感じました。 ある程度エンジニアがカスタマイズをしておいて、その上でクライアントが自分で記事だけ書けば良い状態まで持っていく必要性は感じます。 その点ではWordpressの方がノンプログラマーのクライアントには優しいのかと。

サーバーはNetlifyを使用しましたが、全く後悔はしていません。 一番気に入っているのは、AWSのようにWordpress用にインスタンスを立てる必要がないので、AWSで言うWordpressサイトインスタンス代がかからず、ドメイン代だけなことと、問い合わせフォームがめちゃくちゃ実装が簡単でスムーズだったことです。

Wordpressはプラグインか自分で実装するかですが、プラグインのContactForm7はバグが多く、自分で実装する場合も、Wordpressのバージョンに合わせてメンテナンスは必要です。 もはやフォーム設置したくないと言う結論に至る人もいます。

でもNetlifyのフォームは用意してあるbuilt-in form handlingを呼び出せば、通知までしてくれる超機能的なフォームが、自分スタイルの調整をする時間を含めても、15分ほどで実装できました。 一定量を超えると有料ですが、月100件も問い合わせのない私の前のブログでは、十分無料枠で収まるので、採用しました。

デメリット

唯一の難点は、サイト1つまでしかContentfulは無料では持てないことぐらいかと。 有料なだけあって、やはり開発のしやすさも抜群なので、2つ目以降のサイト運営が同じアカウントで必要になったら考えまーす。

ContentfulをCMSで選んだからゆえの悩みですが、GatsbyはCMSを使わずにマークダウンでブログをマニュアルに書く構造であれば各記事の投稿一覧に記事のアイキャッチ画像を呼べるデータクエリが用意されていますが、ContentfulをCMSにした場合は、あるんですが記事本文全ても引っ張ってくるしかなく、本文一部抜粋のクエリがないので、断念... Wordpressとかだとできるのかな?

追記:ContentfulのContent Modelの問題で、私がてっきりRich TextのコンテンツもJSONで部分だけ抜粋できると思っていて、アイキャッチ画像もexcerptに該当する本文序文抜粋も全部Rich Textにぶち込んでいたのが原因だとわかりました...!

Content Modelを細かくアイキャッチ画像はアイキャッチ画像、excerptのような本文序文抜粋はそれ単独のfieldとしてContent Modelに用意をすればよかったことがわかって、解決しました。

自由自在にコンテンツをfieldとして用意できるし、画像に関してもgatsby-imageでアウトプットするよりも断然楽だし、resizeもしやすいし、自動的に画面幅にフィットしてくれるよう設定できるので、正直これはメリットですね✨

また詳細を別記事で書こうと思います。

あとGatsbyは開発環境に結構センシティブなので、例えばNodeのバージョンがアップデートされたらエラーを吐くこともしばしば。 nなどのパッケージでバージョンを毎回切り替えるのはちょっと面倒です。

GraphQlで、データの構造を変えた時に毎回 `$ npm run clean` でキャッシュをクリアしないと構造変化が反映されないのもデフォルトでどうにかならないかなあと、欲張りかもですが思います。

まとめ

今回は実は挿絵も全て自分で描いてみました。 イラレ、フォトショは持ってないのと使ったことがほぼないので、Adobe XDで描きました。

好きな合気道とプログラミングの組み合わせのフリーの素材はなく、合気道に至っては安っぽい素材しかなかったので、この際昔から好きだった絵をまた描けばいいやと、休暇で時間があったので描きました。

デザインに関しても勉強をしなければなあと言う思いがまた増したのと、挿絵描くの楽しいなという新しい発見もできたので、今回は全体的にかなり楽しい開発になりました。

今回の開発でハマった部分や便利だった内容を、小分けにしてチュートリアル記事なんかもここに書いていこうと思ってます。

では、

ちゅーす