📙

GitHub PagesとJekyllでMarkdownを静的サイト公開

2022/05/14に公開

GitHub

Jekyll

Markdown

tech

概要

GitHub PagesとJekyllを使ってMarkdownファイルなどのプレーンテキストを静的サイトとして公開する手順について個人の備忘録としてまとめます。

参考

GitHub Pagesとは

GitHubが提供する静的ホスティングサービスです。HTMLやCSSファイルをGitHubリポジトリから直接取得してオプションでビルドを実行します。

Jekyll

プレーンテキストを静的ウェブサイトやブログに変換してくれるライブラリです。
GitHub Pagesと組み合わせて使うことで無料で簡単にMarkdownファイルなどを公開することができます。

https://jekyllrb.com/

手順

公開対象用のプロジェクトを作成してgit初期化します

$ mkdir REPOSITORY-NAME

$ cd REPOSITORY-NAME

$ git init

jekyllにより公開サイト用のテンプレートを生成します

$ jekyll new --skip-bundle .

このコマンドによりデフォルトのテンプレート用のmarkdownファイルやGemfileなどが生成されます。

自動生成されたGemfileの内容を以下のように修正します

gem "jekyll"の行をコメントアウト
# gem "github-pages"で始まる行の内容を次の内容に書き換えます

gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins

GITHUB-PAGES-VERSIONは現在サポートされている最新バージョンに指定します

参考
https://pages.github.com/versions/

bundle installにより依存ライブラリをダウンロードします
必要に応じて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

変更内容をgit commitしてリモートリポジトリにpushします

$ git add .

$ git commit -m "Initial GitHub pages site with Jekyll"

# REPOSITORY部分は自身で作成したリポジトリ名に置き換えてください
$ git remote add origin https://github.com/USER/REPOSITORY.git

$ git push -u origin BRANCH

公開対象のGitHubのリモートリポジトリでGitHub Pagesの公開設定をします

リポジトリのSettingsを選択
Code and automationセクションのPagesを選択します![]
公開対象のブランチやディレクトリ、themeの設定や、さらにオプションで公開するページのdomainを設定します。設定後、自動でGitHub Actionsのworkflowが実行されてビルドとデプロイが実行されます

参考

以降はPushしたタイミングで、GitHub Actionsのworkflowが実行されてビルドとデプロイが実行されます

概要

GitHub Pagesとは

Jekyll

手順

Discussion