JekyllとGitHub Pagesでブログ公開してみた
はじめに
今回はこのサイトを公開するまでの手順をさらっとまとめた。スクリーンショットを撮り忘れたからわかりずらいかも。(素人丸出し)
下記サイトを参考にさせて頂きました。
GitHub PagesにJekyllでブログを作成する
-
Jekyllとは
JekyllはMarkdownで静的サイト（リクエスト処理が固定されたサイト）が生成できるRubyライブラリ。筆者のようにWeb系の知識が全くないユーザーでも簡単に作れる。テンプレートさえ作ってしまえば記事が量産できる。ワクワク！
ただ、Windows は、Jekyll を公式にはサポートしていません。
GitHub PagesとJekyllについてらしい。筆者の環境はWindowsだが、今のところ問題なく動作してるから気にしないことにする。また記述方式にはMarkdownに加えて動的にコンテンツを読み込むとき等に使うLiquidと呼ばれるテンプレート言語がある。これも見た感じそこまでクセはないので問題なく使えそう。
Jekyll: https://jekyllrb.com/
Liquid: https://shopify.github.io/liquid/ -
GitHub Pagesとは
GitHub Pagesはバージョン管理システムでお馴染み「GitHub」のサービスの一つで、GitHubのリポジトリから直接静的サイトをホスティングできる。GitHub Pagesの静的サイトジェネレータにはJekyllが組み込まれてるらしい。サイトを公開しながらバージョン管理ができるのはありがたい。
GitHub Pages: https://pages.github.com/
環境
- Windows 64bit
手順
-
下記リンクからRubyインストーラーをダウンロード RubyInstaller: https://rubyinstaller.org/downloads/
Railsをやる予定のある人は With Devkit をそれ以外は多分 Devkit無しでも大丈夫。
筆者はRailsやる予定ないのに心配性なので念のため With Devkit をダウンロード。 -
手順に従ってインストールする。
-
Start Command Prompt with Rubyを起動
Windowsメニューに Start Command Prompt with Ruby あると思うので起動する。 - Jekyll, Bundler のインストール
BundlerはプロジェクトごとにGem環境を管理できるライブラリ。これと本命のJekyllを下記コマンドでインストールする。gem install jekyll bundler
- Jekyllプロジェクトの作成
jekyll new [Project Name]
- [Project Name]に移動
cd [Project Name]
- ローカルサーバの起動
bundle exec jekyll serve
bundle execを付けてるのは、付けないとプロジェクト内のgemではなくグローバルのgemが動作してしまってせっかくgemパッケージを管理しているのにBundlerを入れた意味がなくなってしまうと解釈してる。
ここまで上手くいけば下のリンクからサイトの確認ができる。http://127.0.0.1:4000/[Project Name]/
サーバの停止は Ctrl+c
サイトの編集方法についてはドキュメントみてね。 -
リポジトリの作成
さっき作成した[Project Name]フォルダをGitHubにパブリックリポジトリとして公開しちゃってください。
-
リポジトリが作成出来たらSettingsタブを選択
-
下の方にGitHub Pages の項目があるのでドロップダウンをからNone以外のブランチを選択
- https://[github username].github.io/[Project Name]/ にアクセス！
ローカルと同じように表示されたら公開完了！！