Jekyll を使用して GitHub Pages サイトを設定するを参考に、
GitHub Pages+Jekyll で静的サイトを作ってみたので忘備録としてまとめました。
作業環境
WSL2(Ubuntu 20.04)
jekyll のインストール
作業環境に jekyll をインストールします。
# rubyと利用するパッケージをインストール
$ sudo apt-get install ruby-full build-essential zlib1g-dev
# 非rootユーザでgemをインストールさせるために、ユーザーアカウントのgemインストール先を設定
$ echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
$ echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
$ echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
$ source ~/.bashrc
# jekyllとBundlerをインストール
$ gem install jekyll bundler
テンプレートの生成～動作確認
事前に GitHub のリポジトリは作成してあるものとします(※1)。
※1 リポジトリ名と公開時の URL
| リポジトリ名 | GitHub Pages の可視性 | 公開時の URL |
|---|---|---|
<user>.github.io または <organization>.github.io
|
public |
https://<user>.github.io または https://<organization>.github.io
|
| other | public |
https://<user>.github.io/<your-repository> または https://<organization>.github.io/<your-repository>
|
| other | private |
https://<organization>.github.io/<your-repository>へアクセスすると、https://<ランダム文字列>.github.io へリダイレクト |
テンプレートを生成する
デフォルトの markdown ファイルや Gemfile などが生成されます。
# リポジトリをclone
$ git clone https://github.com/<user>/<your-repository>.git && cd $(basename $_ .git)
# docsディレクトリを作成(docs配下に資材を格納したかったから)
$ mkdir docs && cd $_
# テンプレートを生成
$ jekyll new --skip-bundle .
# .gitignoreはリポジトリのルートに移動しておく
$ mv .gitignore ../
Gemfile の編集
生成された Gemfile の内容を以下のように修正します。
-
gem "jekyll"の行をコメントアウト -
# gem "github-pages"で始まる行の内容を変更gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins- GITHUB-PAGES-VERSION はDependency versionsを参照して置き換え
依存する gem のインストール
bundle installにより依存する gem をインストールします。
$ gem install liquid -v 4.0.3 # ※2
$ bundle install
※2 bundle installをした際に、存在するはずの gem なのに以下のようなエラーが表示されたため個別にインストールした
Bundler::GemNotFound: Could not find liquid-4.0.3.gem for installation
jekyll の設定変更
必要に応じて jekyll の設定ファイルの内容を修正します。
domain: my-site.github.io # if you want to force HTTPS, specify the domain without the http at the start, e.g. example.com
url: https://my-site.github.io # the base hostname and protocol for your site, e.g. http://example.com
baseurl: /REPOSITORY-NAME/ # place folder name if the site is served in a subfolder
動作確認
以下のコマンドで起動させて、http://localhost:4000/から動作を確認します。
# 起動
$ bundle exec jekyll serve
GitHub Pages への反映
リモートリポジトリに反映し、GitHub のリポジトリ設定を変更すると、https://<user>.github.io/<your-repository>で静的サイトが表示できるようになります。
- 変更内容をリモートリポジトリに反映する
$ git add . $ git commit -m 'Initial GitHub pages site with Jekyll' $ git push origin main - GitHub のリポジトリの設定を変更する
- Settings->Pages から GitHub Pages の設定を開く
- デプロイ方法や、対象とするブランチ、ディレクトリなどを選択して保存する
- GitHub Actions で自動的にビルドとデプロイが行われる