はじめに

ブログをGitHub Pagesで始めたときのメモ書きです。 当初、技術メモを、VS Codeを使ってMarkdownで書いて、そのMarkdownをMarkdown PDF: Export (html)でHtmlに変換して、MarkdownとHtmlの両方をGitHubにアップロードしてました。面倒だったので簡略化できないかと調べていたところ、Jekyllを使ってGitHub PagesでWebページを公開するやり方にたどり着きました。

環境

• Windows 10 64bit

構成

• GitHub Pages
• Jekyll

GitHub Pagesとは、公式サイトより引用

GitHub Pagesは、GitHubを通じてホストされ、公開されるパブリックなWebページです。 立ち上げて実行するための最速の方法は、Jekyll テーマ選択画面を使って事前作成されたテーマをロードすることです。 その後、GitHub Pagesのコンテンツやスタイルを変更できます。

Jekyllとは、公式サイトより引用

Jekyllは静的サイトジェネレータです。 好きなマークアップ言語で書かれたテキストを用意すれば、Jekyllはレイアウトを合成して静的サイトを作成します。

前提

GitHubにブログ用のリポジトリblogが作成されていること
（リポジトリは、<UserNmae>/<UserNmae>.github.ioではなく、<UserNmae>/<リポジトリ名>です）

手順

WindowsにJekyllをインストールする

• ローカルPCで動作確認するためにインストールする
• Jekyllは、Markdownから静的サイトを作成し、ローカルサーバーlocalhost:4000の立ち上げまで、やってくれる。
• JekyllはRuby製でRubyの実行環境をインストールする必要がある

1. Rubyのダウンロードサイトより、Rubyのインストーラーをダウンロードする
2. ダウンロードしたrubyinstaller-devkit-3.1.3-1-x64.exeを実行しRubyをインストールする
3. gem install jekyll bundlerでJekyllとBundlerをインストールする
4. jekyll -vでインストールされたか確認する

ブログのテーマを選ぶ

• 自分で1からWebサイトをデザインするのは大変なのでテーマサイトよりテーマを選択する（jekyll new <フォルダ名>で初期環境は構築できるがデザイン性は乏しい）
• テーマサイトには、GitHub上でリポジトリが公開されているものが集められている
• テーマによってリポジトリの構成が異なるため、後からテーマを変更するのは大変となる（簡単に移行できない）
• 選択したテーマをテンプレートとして、ブログ記事のみを追加していくイメージ
• 私はMonosというテーマを選んだ。選定理由は、シンプルなのと、jekyll new <フォルダ名>で作成される初期環境とさほど乖離していなかったためである。

1. Jekyllのテーマサイトよりブログのテーマを選ぶ
2. ローカルPCに選んだテーマのリポジトリをCloneする
3. Cloneしたフォルダでbundle installを実行し必要な環境をインストールする（エラーがでれば対応する）
4. Cloneしたフォルダでbundle exec jekyll serve --baseurl ''を実行しローカルサーバを立ち上げる
5. ブラウザからhttp://localhost:4000にアクセスする

選択したテーマをカスタマイズする

Monosテーマの場合で説明します。

1. https://<UserName>.github.io/<リポジトリ名>で公開できるようにhtml内のURLを修正
   （https://<UserName>.github.io/を前提としているようだった）
2. デザイン（css）の修正
   • 表の枠線を描く
   • コードスパンの背景色を設定
   • フォントの変更
3. jekyll-tocを参考に目次を追加（2023/1/12 追記）

ブログ記事を書く

Monosテーマの場合で説明します。

1. Markdownでブログ記事を書く
2. _posts配下にMarkdownファイルを置く
3. bundle exec jekyll serve --baseurl ''を実行し、ブラウザで記事の見栄えを確認する
4. 問題がなければ、ブログ用のリポジトリにPushする

リポジトリをWebページとして公開する

1. GitHubにサインインする
2. ブログ用のリポジトリで「Settings > Pages」より公開するBranchを選択し保存する
3. ブラウザからhttps://<UserName>.github.io/<リポジトリ名>にアクセスする

参考サイト

• WindowsにJekyllをインストールする
  • Jekyll on Windows
• Jelleyのテーマについて
  • GitHub Pagesの使い方 – Jekyllのブログテーマを変更する方法｜Howpon[ハウポン]
  • Markdownで執筆できるブログをJekyll + Github Pagesで公開する - Fusic Tech Blog
• トラブルシューティング
  • Jekyllを実行した時に bundler: failed to load command: jekyll, `require’: cannot load such file – webrick (LoadError) が出るときの対処法
  • はじめてのJekyll on Github Pages - たけぞう瀕死ブログ
• 目次（2023/1/12 追記）
  • #jekyll GitHub Pagesでも目次(ToC)は作れる - Kotet’s Personal Blog
  • Jekyll製ブログの記事に目次を追加する · Change Of Pace