さかなソフトブログ

プログラミングやソフトウェア開発に関する情報

Web

Github Pagesのデフォルトテーマをローカル上でJekyllサーバで確認出来るようにする

更新日:

手っ取り早く綺麗なテンプレートで作成出来るGithub Pages

Github Pagesはデフォルトでいくつかのテーマをサポートしており、Markdownで記事を制作するだけで綺麗なページをすぐに作成出来ます。しかもhttpsに標準対応しています。

Github Pagesのページ画面

jekyll-theme-caymanテーマで作成したGithub Pages

事前準備

Github PagesはHTMLジェネレータであるJekyllを利用しています。JekyllはRubyのライブラリなので、事前にライブラリをインストール出来るようにRubyとbundlerを準備しておきます。Rubyはrbenvかrvmを利用して最新バージョンを使うのが良いでしょう。bundlerはRubyインストール後以下コマンドで用意します:

$ gem install bundler

Github Pagesリポジトリ作成からJekyllを使ってローカル確認環境を整備する

それではGithub Pagesを作成していきます。以下の手順で作っていきます:

  1. Githubでリポジトリを作成
  2. 作成したリポジトリをGithub Pagesに設定
  3. リポジトリをローカルにclone
  4. github-pages gemをインストールしてローカル確認環境整備
  5. Markdownでページを作成してJekyllサーバでページをローカルで確認する

Githubでリポジトリを作成

まずGithubでリポジトリを作成します。.gitignoreはJekyllを指定しておくとコミットしておかなくていいファイルは除外されるので指定しておくとよいでしょう。今回はtoshi3221/github-pages-gem-sampleを作成してみました。

作成したリポジトリをGithub Pagesに設定

リポジトリを作成したらSettingsタブよりmasterブランチをmasterブランチをGithub Pagesとして公開します。

Github Pages設定

Github Pages設定

次にテーマを選択します。今回はCaymanを選択しました。そうすると以下の様に_config.ymlがmasterブランチに追加されてテーマが指定されています:

_config.yml

theme: jekyll-theme-cayman

この段階でGithub Pagesはhttps://toshi3221.github.io/github-pages-gem-sample/で公開されindex.md等でMarkdownで記述してmasterブランチにpushすればページは自動的に公開されますが、実際の見た目を確認出来ずに公開してしまう為、記事作成がまだやりにくい状態です。そこでローカル環境でもGithub PagesをローカルでもJekyllサーバで確認出来るように整備していきます。

リポジトリをローカルにclone

作成したGithub Pagesリポジトリをローカル確認環境にcloneして取り込みます:

$ git clone git@github.com:toshi3221/github-pages-gem-sample.git
$ cd gihub-pages-gem-sample

github-pages gemをインストールしてローカル確認環境整備

Github PagesではJekyllを利用しますが、Jekyll本体とサポートするテーマをまとめてインストール出来るgithub-pages gemが用意されています。こちらをbundlerでバージョン管理出来るようにGemfileを作成してローカル確認環境を整備します:

$ bundle init

Gemfileが生成されるのでgithub-pages gemを以下の様に追記して下さい:

gem "github-pages", group: :jekyll_plugins

準備が出来たのでgithub-pagesをインストールします:

$ bundle install

Gemfile.lockが作成されインストールしたgemとバージョンが記載されます。.bundlerフォルダが作成される場合がありますがbundleコマンドオプションを記憶しておく等のユーザーファイルなので.gitignoreで除外しておくと良いでしょう。

Markdownでページを作成してJekyllサーバでページをローカルで確認する

これでローカル環境で作成したページを確認することとが可能になりました。では実際にindex.mdを作成して確認してみます。サンプルでは以下の様にMarkdownを記述してみました:

## Github Pagesのデフォルトテーマをローカル上で簡単に確認出来るようにする

github-pages gemをインストールすることでJekyllとGithub Pagesがサポートするテーマをまとめてインストール出来ます。

これが正しくマークされて表示出来るかを確認してみます:

$ bundle exec jekyll serve

http://localhost:4000/にJekyllサーバが起動して先ほど作成したページがindex.htmlで自動生成されて確認出来る様になっているはずです。

とても気軽に作成できるGithub Pages

何かのソースコードをGihub公開して、マニュアルやサンプル等を公開したいけど、記事のみ作成するだけでサクッと公開したいという場合にGithub Pagesがサポートしているテーマを利用して公開するのは重宝しそうです。

正方形336

正方形336

-Web
-,

Copyright© さかなソフトブログ , 2024 All Rights Reserved.