Jekyll + GitHubページで静的サイトorブログを作る簡単な手順

英語のWritingの勉強のために『No Programming, No Life』という英語ブログを作ってみました。
デザインの選択・調整でかなり満足してしまったので、ブログ書かないままxx年が経過とかにならないように気を付けます(笑)

今回は『Jekyll』と『GitHub Pages』
を使って静的なブログを作ったので、その際の手順やノウハウのメモです！

🏈 Jekyll

「Jekyll」は一言でいうと、静的サイト・ブログジェネレータ。

特徴

• DBが不要なので簡単に設置できる
• Markdownを使えて、Blogの基本的な機能が充実している
• Jekyllベースのきれいなデザインが無料で配布されている
• Host先にGitHub Pagesが無料で使える。Fastlyのおかげでレスポンスが早い
• カスタマイズできる余地が大きく、かゆいところに手が届く

ローカルでの動かし方

$ gem install jekyll
$ jekyll new my-awesome-site
$ cd my-awesome-site
$ jekyll serve
# => Now browse to http://localhost:4000

本当に感動するレベルの簡単さ。

テーマ

個人的にJekyll推しの一番の理由はこの無料で配布されているテーマの充実度合い。

• Jekyll Themes & Templates
• Jekyll Themes
• Jekyll Themes and Templates - Jekyll Tips
• Jekyll Themes
• Dr. Jekyll’s Themes
• Beautiful and Minimal Blog Using Jekyll, Github Pages

今回は上記のサイトから気に入ったリポジトリをcloneして、Jekyllを最新にアップデートしました。
いくつか警告が出て、若干ハマったのでもしかしたらもう少しうまいやり方があるような気もします。

ドキュメント

Welcome - Jekyll • Simple, blog-aware, static sites

公式ドキュメントが丁寧でかなり充実しているので、本当にオススメです！

🍣 GitHub Pages

Jekyllの良さとしてHost先に『GitHub Pages』を選択しやすいこと。
設定にはリポジトリの種類によって4作らいパターンがあるみたいですので、今回は次の要件を満たすページ
とします。

- Host名: blog.morizyun.com
- リポジトリ: https://github.com/morizyun/blog.morizyun.com
- ブランチ名: gh-pages

公式ドキュメント

Using a custom domain with GitHub Pages

やはりこちらも英語の公式ドキュメントが最新の状態で充実しているのでこの手順が最適と思います。

GitHub Pagesを表示するための指定

次のことをやると『http://blog.morizyun.com/』が表示される様になりました！

(1) リポジトリの作成 => https://github.com/morizyun/blog.morizyun.com
(2) ブランチの作成 => 今回は custom subdomain なので ph-pages のブランブランチが表示対象
(3) CNAMEファイルの設置 => CNAMEファイルを追加して、`blog.morizyun.com` と書いた
(4) DNS側の設定 => DNS側に `blog CNAME morizyun.github.io` を設定

• (ブランチについて) User, Organization, and Project Pages
• (CNAMEの確認手順) Setting up a custom subdomain

🚜 あとがき

今さらだけど英語ブログの方に書けばよかった。..orz…

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍