こんにちは。
Gatsby にブログを乗り換えてみたよ、という記事です。前回の記事はこちら ↓
このように去年の 9 月から Hugo で作成したブログを運用していましたが、何となくテーマに飽きてきたので変更したいな〜と思っていました。
Hugo のテーマを変えるだけでも良かったのですが、せっかくなので Gatsby を採用して新しく作り直してみました。
記事の移行自体は Hugo から md を移動させるだけなのでとても楽でした(前回 Hugo のブログを作成するときははてなブログやら Qiita やらから記事を移行して 3 日くらいかかりました)
また、OGP 生成は Hugo の時も使っていた以下のライブラリをそのまま使い回すことにしています。便利
デザインなど
今回はデザインは頑張って自分で CSS を書いてやってみました。
元となっているのは以下の Gatsby が公式で出しているブログ用のテーマです。
いや、考え直したら頑張って CSS 書いたって言ってるけど、トップページのニューモフィズムっぽい部分くらいだわ
about meのページを作ったりもしました
入れたプラグインなど
おそらく定番なんだろうなというものくらいしか入れていません。 参考にした記事と一緒に並べてみます
gatsby-plugin-google-analytics
Google Analytics 用プラグイン
参考
gatsby-plugin-feed
RSS 対応用プラグイン
CAMPHOR-にはメンバーのテックブログをまとめるページが存在し、そのために RSS に対応する必要があったので頑張って対応しました。
参考
二つ目の記事を見るまで enclosure の作成方法がわからず結構詰まりました
gatsby-plugin-google-adsense
Google Adsense 用
Google は早く僕の Blog の審査を通せ 💢
参考
react-share
Twitter/Facebook への share ボタン用
ついでに ↓ の参考記事を見ながらはてなブックマークへのシェアボタンも置いた
参考
Hugo と Gatsby を使用する人目線で比較
使用感のみをざっくり比較してみます。 フロントエンド分からないマンなので細かいことは知りません。
Hugo が良い点
- Build がかなり早い
- Go のテンプレートなので理解しやすい(Go がわからなくてもほぼ Html なので理解しやすそう)
Hugo がきつい点
- Gatsby と比べてもっさりしてる(Gatsby が早すぎる)
Gatsby が良い点
- ファーストビュー以外のページ遷移などが爆速
Gatsby のきつい点
- Graphql が何もわからない
- Build が遅い(Hugo と比べて)
終わりに
ということでフロントエンド何もわからないマンでも割とサクッと Gatsby に載せ替えることができて満足してます という記事でした。 またテーマに飽きたらしれっと前回の Hugo のブログに戻したり、新しく作り直したりしているかもしれません。
良い週末を
