ブログの再構築を Jekyll + Netlify + Github で行った話
先週、新しくBlogの再構築を Jekyll + Forestry.io + Netlify + Github 環境で行いました。
実現できたこと
- Jekyllをベースにしたブログテンプレートをベースに、オンラインでCMSのようなインターフェイスでブログを更新し、更新後はGit + Githubと連動してパブリッシュまで実行すること。
新しいブログ構成サマリ
- ブログシステム： Jekyll
- ブログ投稿用CMS： Forestry
- デプロイ：Netlify (以前は Forestry)
- ホスティング： Netlify (以前は AWS S3)
- ソースコードのリポジトリ： Github
Jekyllとは？
静的サイトジェネレーター（Static Site Generator）のひとつ、Rubyでできている
Jekyllは静的サイトジェネレーターです。お気に入りのマークアップ言語で書かれたテキストを受け取り、レイアウトを使用して静的なWebサイトを作成します。サイトのルックアンドフィール、URL、ページに表示されるデータなどを微調整できます。
前提条件
Jekyllには次のものが必要です。
Rubyバージョン2.4.0以降
RubyGems
GCCとMake Ref. Quickstart | Jekyll • Simple, blog-aware, static sites
Forestry.ioとは？
Forestryとは？
理解すべき主なことは、他のコンテンツ管理システムとは異なり、Forestryは完全にGitによって支えられているということです。
簡単に言うと、ForestryはGitを介したエディターフレンドリーなインターフェースです。これは、開発者と編集者が同じワークフローとツールセットを使用できることを意味します。
これはまた、すべてのコンテンツとコードが常にあなたのものであり、あなたの手の届かないところにあるクラウドのデータベースに保存されていないことを意味します。
利点
静的サイトを構築してGitを利用したCMSを使用することを選択すると、従来のモノリシックCMSに比べて多くの利点があります。
Ref. Introduction | Forestry.io
再構築しようと思った原因
もともと Jekyll + Forestry.io + AWS S3を利用していました。いい感じでしたが、作成後にしばらく更新できておらず、2年ぶりに気合を入れて多言語対応のプラグイン kurtsson/jekyll-multiple-languages-plugin 導入したあたりから、S3に反映されないことに気づきました。
- Forestry側でいつの間にかデプロイ機能がなくなっていたこと
- 多言語対応など大幅なカスタマイズをマージした結果、各ページのコンテンツや記事が
Forestry.ioの画面上に反映されなくなったこと
実現したいこと
- 気軽にブログ更新したい。モバイルからでも更新したい
- CSSのカスタマイズも頑張りたい
- Markdown + WYSIWYGでも書きたい
サイトを切り替えるまで
- 新しくブログ用の
Githubリポジトリを作成 Forestryに新しく作成したGithubリポジトリを連携する- ローカルで
Jekyllを動かしながら以前のブログの設定を移植する。CSS・レイアウトを移植する Forestry設定の更新- カテゴリページの設定
- ブログ投稿内容の調整をする
- Settings > Sidebar など設定をチェックし更新する
Netlifyアカウントを作成・設定formspree.ioお問い合わせフォームの動的化- テスト
Netlifyドメイン切り替え（DNS切り替え）
参考サイト：
- Jekyll
- Forestry.io
- Netlify
