公式テーマを利用してJekyllでGitHub Pagesを作ってみた

公式テーマを利用してJekyllでGitHub Pagesを作ってみた

公式テーマを利用してJekyllでgithub pageを作成しました。
その手順を記載します。
これからGithubPagesを触ろうとしている方の参考になれば幸いです。

作成物

作成したページはこちら。

コード

コードはこちら
https://github.com/ykmkn/ykmkn.github.io

やったこと

1. テーマ選択：サポートされているテーマからcaymanを選択
2. カスタマイズ：色などの変更
3. 動作確認

テーマ選択：サポートされているテーマからcaymanを選択

github pagesではサポートされているテーマが一番うまく行くと書いてあったので、caymanを選択しました。

カスタマイズ：色などの変更

構成

.
├── README.md
├── _config.yml
├── _layouts
│   └── default.html
├── assets
│   └── css
│       └── style.scss
├── image
│   └── favicon.jpg
└── index.md

_config.yml

caymanの案内を参考に必要な設定を追加します

_layouts/default.html

caymanからコピーして、ファイルに置き、faviconの置き場やgithubのURLを変更しました
https://github.com/ykmkn/ykmkn.github.io/blob/main/_layouts/default.html#L14-L22

assets/css/style.scss

cssを少しカスタマイズして、caymanのデフォルトの見栄えから変更しました。
https://github.com/ykmkn/ykmkn.github.io/blob/main/assets/css/style.scss#L5-L35

image/favicon.jpg

faviconのイメージです

index.md

mainに載せる文章を記載しました

動作確認

ローカルで動作確認するためにGemfileを作成しました。github-pagesというgemが必要でした。

source "https://rubygems.org"
gem 'github-pages', group: :jekyll_plugins

作成まで参考になったサイト

1. リポジトリを作る時→ https://prog-8.com/docs/github-pages
2. テーマを追加する時→ https://docs.github.com/ja/pages/setting-up-a-github-pages-site-with-jekyll/adding-a-theme-to-your-github-pages-site-using-jekyll
3. caymanをカスタマイズする時→ https://github.com/pages-themes/cayman?tab=readme-ov-file#customizing
4. ローカルで動作確認する時→ https://docs.github.com/ja/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll