GitHub PagesとJekyllでホームページを作る

GitHub Pagesで簡単なホームページなら作れたような気がすると思い立ったので、その時に行ったことのメモです。

基本的にはこのページの手順に沿ってやっていけばできると思います。

neko-mac.blogspot.com

いくつか異なる点や追加で必要だったことなど、自分のメモ的なものを書いていきます。

この作業をする前提としてGitとVisual Studio Codeは使える状態にしておきます。これのやり方を書いているページはたくさんあると思うので省略します。

「Jekyll」はRubyで動く静的サイトジェネレーターです。読みたかは「ジキル」です。GitHub Pagesで使えるやつです。

Jekyll を使用して GitHub Pages サイトを作成する - GitHub Docs

Rubyのインストール

今回、自分の環境はMacです。参考のサイトだとarchlinuxを使っていて、バージョン3系統のRubyが入っている前提での方法となっています。macOSの場合必要ないと思いましたが、特に何も考えず書いてある通りにRuby Version Manager (RVM)を使っていきます。

RVMでRuby 2.7をインストールして、既定を2.7に設定します。

JekyllとBundlerのインストール

Bundlerはgemの依存関係を解決してくれるツールみたいです。書いてある通りにインストールします。この後の手順で、「myblog」というディレクトリにJekyllのプロジェクトを作成する手順が書かれていますが、今回は使うテンプレートが決まっているので、これは実行しません。

Basically Basic Jekyll Theme

GitHub Pagesで直接サポートしているJekyllのテーマもあります。

Supported themes | GitHub Pages

今回は「Basically Basic」という「Minima」の派生？を使います。

GitHub - mmistakes/jekyll-theme-basically-basic: Your new Jekyll default theme.

テンプレートはたくさんあって、探せるサイトも複数あり、有料のものもあります。私は「Jekyll Theme 2023 free」で検索しました。以下のページにいくつかギャラリーが紹介されています。

テーマ | Jekyll • シンプルで、ブログのような、静的サイト

ローカルでの実行環境の構築

本来別に用意する必要がないと思いますが、今回Jekyllがどんなものかほとんどわかっていなかったので、とりあえず触ってみる環境としてローカル用のフォルダを用意します。そのフォルダにテーマをcloneします。

macOSでどこにフォルダを作るのかとちょっと悩みましたが、ホームの直下に作りました。

ローカルWebサーバーの実行

$ bundle exec jekyll server

で実行します。これでローカルでは「http://127.0.0.1:4000/」でアクセスできるはずですが

Could not find gem 'jekyll-paginate (~> 1.1)'

というエラーが出るので

gem install jekyll-paginate

を実行して解決します。たしか「jekyll-sitemap」でも同じようなエラーが出たと思うのでそれも同様に解決します。

gem install jekyll-sitemap

これで

$ bundle exec jekyll server

を実行するとローカルでは「http://127.0.0.1:4000/」でアクセスできます。一応実機のスマフォでも確認したいので、ファイアウォールのポートを除外設定します。

MacOSのポート開放 | ThunderMiracle's Blog

これでもアクセスできませんでした。localhostのアドレス以外にバインドされていないことが原因のようなので、以下のように実行して利用可能なアドレスすべてにバインドされるようにします。

bundle exec jekyll server --host=0.0.0.0

これでスマホからもアクセスできるようになります。

macOSでipconfig

macOSで普通にipconfigと打ってもIPアドレスは表示されませんでした。ipconfigを使う方法は面倒なので代わりにネットワーク状況を確認するifconfigを使います。

GitHub Pages

GitHubにリポジトリを作成します。リポジトリの名前は、手順の参考サイトに書かれているように「username.github.io」にします。githubのユーザー名が「hogehoge」ならば、「hogehoge.github.io」という名前のリポジトリを作成します。

このリポジトリをクローンしてきて、そこにローカルで作成していたファイルをコピーします。

必要なファイルはここに書かれている以下のやつになります。  

• _layouts
• _includes
• assets
• _sass
• _data/theme.yml
• _config.yml

注意点として「Gemfile」と「Gemfile.lock」は必ず含めないようにします。これを含めてしまうと、GitHub Pagesのビルドでエラーとなります。

あとは、faviconもあったほうがいいので、以下のサイトなどで作成して置いておきましょう。

X-Icon Editor

今回GitHubはSSHにしたので、以下のページなどを参考に設定して、commitしてpushします。

GitHubにSSH接続する方法！(キーの作成からpushまで解説) | コードライク

GitHub Pagesの禁止される用途

GitHub Pages について - GitHub Docs

GitHub Pages は、オンライン ビジネス、eコマース サイト、主に商取引の円滑化またはサービスとしての商用ソフトウェア (SaaS) の提供のどちらかを目的とする、その他の Web サイトを運営するための無料の Web ホスティング サービスとしての使用を意図したものではなく、またそのような使用を許可するものでもありません。

上記の文章だと日本語として少し不自然なので原文を見てみたいと思います。

GitHub Pages is not intended for or allowed to be used as a free web-hosting service to run your online business, e-commerce site, or any other website that is primarily directed at either facilitating commercial transactions or providing commercial software as a service (SaaS).

原文を見ると、「その他の Web サイト」にかかっているのは「主に商取引の円滑化またはサービスとしての商用ソフトウェア (SaaS) の提供のどちらかを目的とする」だということが分かります。なので、「主に商取引の円滑化を目的とするその他のWebサイト」というのが一番曖昧で該当しそうなサイトが多いと思います。「商取引」という言葉をどう解釈するかでかなり変わりそうです。日本語の「商取引」だと「商業上の売買の行為」とあり、売買ではない商用サイトであれば該当しないように読み取れます。商業の取引全般を指す言葉は「商行為」のようです。一方、「transactions」という単語で考えると「a payment, or the process of making one」のほかに、「a business deal」という定義もあります。これが商業の行為全般を意味すると仮定すると、商用サイト全般が該当しそうです。しかし、そうであればこれと並列して「サービスとしての商用ソフトウェア (SaaS) の提供」を書く必要性がないように思います。また、現在GitHub Pagesで存在しているサイトの実態とかなり乖離があることになると思います。いずれにしても、その部分が心配な場合にはサポートに問い合わせたほうがよさそうです。

Company information and contacts via GitHub pages · community · Discussion #59893 · GitHub

Jekyllの構造について

これはドキュメントを見て必要な箇所を変更、追記していくしかないと思いますが、以下の2つのファイルはとにかく重要だと思います。

• _config.yml
• _data/theme.yml

そもそものテンプレートに手を入れたいという時は、_includesフォルダ下のファイルを編集します。テンプレートエンジンの構文部分を変えた時はWebサーバーを再実行するのを忘れないようにしましょう。反映されません。