GitHub Pagesで無料ブログを作成する - Part3 Jekyllの設定をカスタマイズする

「GitHub Pagesで無料ブログを作成する - Part3 Jekyllの設定をカスタマイズする」です。

他の記事はこちら

ローカルでJekyllを実行する

前回の記事では、Jekyllのテーマを利用する方法と記事を追加する方法を紹介しました。

今回はさらにJekyllをカスタマイズしていきますが、確認を簡単にするためにまずJekyllをローカル環境で実行する方法を紹介します。

Jekyllのサイトに書いてありますが、gemでjekyllをbundlerをインストールして起動することができます。

$ gem install jekyll bundler
$ cd your-repository
$ bundle exec jekyll serve

これまで作成したブログのリポジトリをクローンして、jekyllを実行できるようにします。

$ git clone your-repository
$ cd your-repository
$ bundle exec jekyll new . --force

--force オプションをつけるとこれまで作成したファイルがいったんJekyllのテンプレートで上書きされます。

デフォルトではminimaというテーマが有効になっています。

その状態でJekyllを実行してみます。

$ bundle exec jekyll serve

実行するとローカルでブログを立ち上げることができます。

about.mdや404.htmlが生成されていたり、index.mdが上書きされています。

jekyll newで初期化するとデフォルトのテーマであるminimaが適用されるので、今後はminimaのテーマを想定して作っていきます。

GitHub Pagesのプラグインとテーマを使う

もし、元々使っていたGitHub Pagesのテーマを使いたい場合には、github-pagesのプラグインを入れる必要があります。

Gemfileを見ると、github-pagesというgemがコメントアウトされていると思うので、記載されているコメントにしたがってコメントアウトを外します。それに伴い、jekyllの方はコメントアウトします。

# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!
# gem "jekyll", "~> 3.8.7"

# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
gem "github-pages", group: :jekyll_plugins

そしてgemをアップデートします。

$ bundle update

_config.ymlに記載されているthemeを例えばjekyll-theme-caymanに戻して、index.mdを元に戻せば、元々のテーマを使うことができます。

minimaを使う場合はそのままでオッケーです。

上記のようにGitHub Pagesでは必要なGemをインストールして、_config.ymlを変更すると設定をカスタマイズすることができます。例えばテーマを変更したりサイトのタイトルを編集することができます。

レイアウトとページ

jekyll newで初期化すると about.mdや404.htmlが追加されたと思います。jekyllではこのようにブログの記事以外に個別のページを作ることができます。

例えばabout.mdというファイルを作ると、https://username.github.io/about/というページを作ることができます。

404.htmlは特別なファイルで、アクセスしたページが存在しないときに使われるファイルです。

このようにページをどんどん作成することができます。

index.mdやabout.mdを見ると、layout: homeやlayout: pageという設定がヘッダーのところに記載されていると思います。これは各テーマが作っているレイアウトのテンプレートを設定しています。テーマによって、いくつかのページのレイアウトが用意されていて、ページごとにどのレイアウトを使うかを設定できます。

minimaには