Gatsbyでさくっと自作ブログを作った

February 20, 2021

こんにちは。

Gatsbyにブログを乗り換えてみたよ、という記事です。前回の記事はこちら↓

Hugoでさくっと自作ブログを作った

このように去年の9月からHugoで作成したブログを運用していましたが、何となくテーマに飽きてきたので変更したいな〜と思っていました。

Hugoのテーマを変えるだけでも良かったのですが、せっかくなのでGatsbyを採用して新しく作り直してみました。

記事の移行自体はHugoからmdを移動させるだけなのでとても楽でした(前回Hugoのブログを作成するときははてなブログやらQiitaやらから記事を移行して3日くらいかかりました)

また、OGP生成はHugoの時も使っていた以下のライブラリをそのまま使い回すことにしています。便利

Ladicle/tcardgen - GitHub

デザインなど

今回はデザインは頑張って自分でCSSを書いてやってみました。

元となっているのは以下のGatsbyが公式で出しているブログ用のテーマです。

gatsbyjs/gatsby-starter-blog - GitHub

いや、考え直したら頑張ってCSS書いたって言ってるけど、トップページのニューモフィズムっぽい部分くらいだわ

about meのページを作ったりもしました

入れたプラグインなど

おそらく定番なんだろうなというものくらいしか入れていません。 参考にした記事と一緒に並べてみます

gatsby-plugin-google-analytics

Google Analytics用プラグイン

参考

gatsby-plugin-feed

RSS対応用プラグイン

CAMPHOR-にはメンバーのテックブログをまとめるページが存在し、そのためにRSSに対応する必要があったので頑張って対応しました。

MEMBERS’ BLOG - CAMPHOR-

参考

二つ目の記事を見るまで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のブログに戻したり、新しく作り直したりしているかもしれません。

良い週末を

このエントリーをはてなブックマークに追加