Jekyll + GitHub Pagesを使って、静的サイトを公開する

Jekyll + GitHub Pages で静的サイトを公開するGit

この記事では、JekyllとGitHub Pagesを使って、静的なサイトを公開する方法について書いています。

Jekyll・GitHub Pagesとは
  • Jekyll:RubyGemsで配布されている、Ruby 製の静的サイト生成ツール
  • GitHub Pages:GitHubのリポジトリからウェブサイトを公開できる静的なサイトホスティングサービス

Jekyll + GitHub Pagesで静的サイトを公開する

GitHubリポジトリの作成

ユーザー用のページに関しては、アカウント毎に1つ作成できるので、今回はそちらを作成。

ユーザー用のページを作成する場合、「[GitHub ユーザー名].github.io」というリポジトリを作成します。

テーマを選択

リポジトリ作成後、Settings → Pages から Theme を選択。私は、「jekyll-theme-hacker」というテーマを選択しました。

テーマ選択後、作成したページURLを開くと、上記テーマが適用された、index.mdファイルが表示されました。

ローカル環境でもテーマをプレビュー表示して確認する

ただ、ローカル環境でもJekyllテーマをプレビュー表示して確認したいので、そちらのセットアップを行います!

まず、Gemfileを作成し、下記を追記。

source 'https://rubygems.org'

gem "github-pages", group: :jekyll_plugins

その後、bundle installを実行 → ローカルサーバを起動すれば、テーマが適用された状態をローカル環境で確認できます。

$ bundle install
$ bundle exec jekyll serve

Jekyllがビルドされたファイルが、_siteフォルダ内に生成されているので、.gitignoreに追加しておいてあげると良いかと思います。

詳細については、こちらに記載してあります。

そして、出来上がったサイトがこちら。

shintarou-akao.github.io

以上、最後まで読んでいただきありがとうございました!

Git・GitHub関連のおすすめUdemy講座
Git・GitHub関連のおすすめ書籍

コメント

タイトルとURLをコピーしました