ブログ環境を整えた

いままで迷走していたブログ環境が現状満足するところまで整えることができたので書きます。

TL;DR

サイトジェネレーター: Hugo
バージョン管理: GitHub
ビルド/公開: Netlify
CMS: forestry.io

無料で構築する事ができますが私は GitHub の Private や独自ドメインなどを使用してるので多少費用がかかってます。 (と言ってもレンタルサーバーを借りるより格安です。)

いままでは

経緯をだらだらと書いてるだけなので飛ばしていただいて構いませんw

(途中ではてなブログなどに浮気したり WordPress に戻ったりしましたがそこは飛ばします)

WordPress を使い始めた

プラグインによる拡張が簡単で事前知識が(ほぼ)なくても使い始めることができるということで WordPress にしました。

しかしプラグインの入れすぎなどで表示速度が遅くなりストレスがたまるようになりました。

自作テーマに変更

そこで私は Web 系の勉強にと思い、テーマを自作してみることにしました！

プラグインの行ってることで、テーマに実装できることは積極的に取り込みました。

しかし趣味で公開してるサイトなのにサーバー費などのコスト面が負担でした。

静的サイトジェネレーターに出会う

そんななか “無料でサイトを公開できないか” といろいろ調べて GitHub Pages に出会いました。

当時、良く触っていた Ruby を使えるということだったので使い始めました。

しかし GitHub Pages では、プラグインを使用できませんでした。そこで CI を組み合わせてビルドした成果物を AWS S3 に配置し、公開するようにしました。

ですが AWS を使用したのでわずかながらもコストが掛かり悩みました。

Netlify へ変更

そんななかビルドと公開まで行ってくれる Netlify を知りました。

Netlify を使用することで、公開するサーバー側のコストが無くなりました。

次に Jekyll の生成速度が遅くなり始めました。どうやら記事数やプラグインによって生成速度が遅くなることを知りました。

Hugo へ変更

趣味のブログなので Jekyll にこだわる必要は無いと今まで作っていたものをすべて捨て Hugo に移りました。

サイトの表示速度をなるべく高速にしなおかつ Hugo で実装できる AMP HTML なども取り込もうと思い様々なテーマを検討しました。

(あくまで個人的な意見ですが)全体的にビミョーなテーマが多かったです。その中で一番気に入った Robust をフォークした ReRobust をベースに作成した Wolke を使用してます。

宣伝: みんなもぜひWolke使ってね!!

CMS について

スマホでサイトを眺めてたときに誤字を見つけてしまいサクッと修正しようと思いましたが、わざわざ GitHub にアクセスして対象のファイルを開き… と行うのがめんd… 大変だったので編集機能を実装できないか調べました。

Netlify CMS

Netlify を紹介してる記事にたまに紹介されて、とりあえず使ってみました。

しかし本来想定してたスマホでの使用が使い辛く変わりのものを探しました。

forestry.io

日本語記事がなく初回の設定が大変ですがストレスなく使用で便利です。

(運用するにあたって注意点などがあるので後日書きます！)

まとめ

多いときは ¥1000/月ほどかかってたブログ環境ですが、PV もなくダラダラと趣味の話を書いているブログには今の環境で十分だと思います。

“毎月コストが発生してるから書かないとと” いう焦燥感もなく、気が向いたときに書けばいいという感覚で、これからも更新していきます！

追記: ブログのリニューアルしたことを書きましたが今回 Netlify から Firebase Hosting にお引越ししました

TL;DR

Netlify がたまに落ちている
CDN を使用してるらいしけど遅い
もっと柔軟に設定したい

Netlify

Netlify は簡単にデプロイでき、小規模なページなどであれば問題がありません。

しかし、配信の最適化するために HTTP ヘッダなどをいじるとき少々手間がかかり大変でした。

そして、接続障害が発生したり、SSL エラーが発生したのでちょっとインフラに不安を感じ始めました。

Firebase

そこで、Firebase Hosting を使い始めました。

Firebase は Fastly を採用してるので世界各地にある CDN から配信されレスポンスが高速になりました。

また、 Firebase を導入するにあたって CI も導入できました。いままで netlify とまた別の CI を採用してたので CI の一本化ができ、わかりやすくなりました。