📙

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

2022/05/14に公開約2,800字

概要

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

参考

https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll

GitHub Pagesとは

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

https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages

Jekyll

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

https://jekyllrb.com/

手順

  1. 公開対象用のプロジェクトを作成してgit初期化します
$ mkdir REPOSITORY-NAME

$ cd REPOSITORY-NAME

$ git init
  1. jekyllにより公開サイト用のテンプレートを生成します
$ jekyll new --skip-bundle .

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

  1. 自動生成されたGemfileの内容を以下のように修正します
  • gem "jekyll"の行をコメントアウト
  • # gem "github-pages"で始まる行の内容を次の内容に書き換えます
gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins

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

参考

https://pages.github.com/versions/
  1. bundle installにより依存ライブラリをダウンロードします

  2. 必要に応じて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
  1. 変更内容を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
  1. 公開対象のGitHubのリモートリポジトリでGitHub Pagesの公開設定をします
  • リポジトリのSettingsを選択

  • Code and automationセクションのPagesを選択します![]

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

参考

https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

https://docs.github.com/ja/pages/configuring-a-custom-domain-for-your-github-pages-site
  1. 以降はPushしたタイミングで、GitHub Actionsのworkflowが実行されてビルドとデプロイが実行されます

Discussion

ログインするとコメントできます