個人開発や技術メモを整理するためウェブサイトを構築する事にした。GitHub Pagesを利用して静的サイトジェネレータを使う方針とし、StaticGenなどで調査してJekyllを使う事にした。選定理由は以下の通り。

Rubyのエコシステムに習熟したい
Jekyllは利用者数が多くてだいぶ枯れていて情報が多そう
GitHub PagesがJekyllに公式に対応しているので困る事が少なそう

参考

ウェブサイト構築にあたっては以下を特に参考にした。

環境

macOS
Ruby環境はHomeBrewでrbenvをインストールしてバージョン管理している
Bundlerはインストール済み
GitHubアカウントは取得済みのものを利用
github.ioリポジトリは作成済みのものを利用

手順 - 入門編

入門編では公式サイトのチュートリアル通りの手順で環境構築とウェブサイト生成と動作確認を実施する。本番に向けた練習段階です。

Jekyllインストールとウェブサイトテンプレート生成

JekyllはRubyGemとして提供されているのでBundlerで管理したいため、公式サイトのUsing Jekyll with Bundlerの手順でJekyllインストールを行う。

mkdir my-website
cd my-website
bundle init
bundle add jekyll
bundle exec jekyll new --force --skip-bundle .
bundle install

ここまででJekyllインストールとウェブサイトテンプレートの生成が完了する。Configure BundlerPermalinkの章の./vendor/bundle/の設定はオプションと書いてあるので実行しなかった。

ウェブサイト動作確認

bundle exec jekyll serve

を実行してhttp://127.0.0.1:4000/にウェブブラウザでアクセスするとウェブサイトが表示された。

手順 - 本番

本番ではJekyllテーマを利用してウェブサイトを構築する。JekyllテーマとはJekyllで生成したウェブサイトテンプレートをベースにデザインや機能を拡張したものと理解している。

Jekyllテーマ選定

Jekyll themeをCentrariumに変更する - Memotaroが素敵なのでCentrariumというテーマを採用する。導入の手順も基本的にこのサイトを参考にした。CentrariumのGitHubリポジトリのREADME.mdに詳細な情報が載っているので、こちらも参考にした。

Centrariumのダウンロード

README.mdのInstallationにdownload this projectと書いてあるのでダウンロードして任意のディレクトリに配置する。

BundlerでJekyll環境のインストール

ダウンロードしたディレクトリに移動してBundlerでgem一式をインストールする。

cd centrarium-master
bundle install

実行するとエラーが出た。

-> % bundle install
rbenv: version `2.2.2' is not installed

centrarium-masterディレクトリ直下の.ruby-versionというファイルに2.2.2と記述があるので、実行するRubyバージョンが指定されているようだ。今のRubyバージョンを確認する。

-> % rbenv versions
rbenv: version `2.2.2' is not installed (set by /Users/username/Document/centrarium-master/.ruby-version)
  system
  2.5.1

rbenvでインストール可能なRubyバージョンを確認する。

rbenv install --list

2.2.2があったのでインストールする。

rbenv install 2.2.2

インストールするとコンソール上にWARNING: ruby-2.2.2 is past its end of life and is now unsupported.と表示されたがRubyバージョンでハマると嫌なので気にしない。 bundle installを再度実行するとエラー。

-> % bundle install
rbenv: bundle: command not found

The `bundle' command exists in these Ruby versions:
  2.5.1

gemはRuby環境にインストールされるので、rbenvで2.2.2をインストールした後はgemもインストールし直す必要があった。

gem install bundler

成功したので関連するgemライブラリをインストールする。

bundle install

今度こそ成功した。次にウェブサイトの動作確認をする。

bundle exec jekyll serve

無事にCentrariumのデモページと同じ表示が確認できた。

カスタマイズ

基本的にJekyll themeをCentrariumに変更する - Memotaroを参考にカスタマイズした。

`_config.yml`の設定変更

External gemsのjekyll-archivesをコメントアウトする。GitHub Pagesではきちんと動作しないようである。合わせてArchive settingsとCategory descriptionsのセクションもコメントアウトする。

# External gems
gems:
  # - jekyll-archives # Sorry, not GitHub pages friendly!

# # Archive settings (see https://github.com/jekyll/jekyll-archives/)
# jekyll-archives:
#   enabled:
#     - categories
#     - tags
#   layout: 'archive'
#   permalinks:
#     category: '/category/:name/'
#     tag: '/tag/:name/'

# Category descriptions (for archive pages)
# descriptions:
#   - cat: dummy
#     desc: "Just some placeholder posts, lorem ipsum and the rest."

ウェブサイトの情報に合わせてSite settingsを変更する。subtitleは不要なのでコメントアウトした。index.htmlでしか使ってないので問題ない。また、URLにカテゴリを含まない方が良さそうに思うのでパーマリンクの設定を追記した。

# Site settings
title: RydeenWorks Dev Note
# subtitle: "A simple yet classy theme for your Jekyll website or blog"
email: rydeenworks[at]gmail.com
name: rydeenworks
description: >
  RydeenWorks is my development site.
baseurl: ""
url: "https://rydeenworks.github.io"
cover: "/assets/header_image.jpg"
logo: "/assets/logo.png"
permalink: "/:year/:month/:day/:title"

Build settingsではpaginateで表示する記事数を5 →10に増やした。またhighlightjs_themeをzenburnにする。

# Build settings
paginate: 10
highlightjs_theme: "zenburn"

Social icons and sharing optionsはGitHub以外は全てコメントアウトした。

# Social icons and sharing options
social:
  - name: GitHub
    icon: github
    username: rydeenworks
    url: https://github.com/rydeenworks
    desc: Fork me on GitHub
    share: false

Social sharing protocolsの設定は全てコメントアウトした。

ウェブサイトのロゴ画像

ICOOON MONOから雷のフリーアイコンをダウンロードして/assets/logo.pngに配置する。rgb(142,70,169)がちょうどいい感じ。またhttp://www.favicon-generator.org/ というサイトを使うとicon一式を生成してくれたので/assets/icons/以下に一式配置した。(2MB以上の画像を使ってFaviconを作りたい場合は、こちらのサイトを使うと良い。https://www.websiteplanet.com/webtools/favicon-generator/)

ウェブサイトのカバー画像

ココからダウンロードして/assets/header_image.jpgに配置した。

Projectsページ追加

フロントマターに以下の記述をしたprojects.mdを作成しindex.htmlと同じ階層に配置する。すると、ウェブサイトのトップメニューにProjectという項目が表示される。リンクをクリックするとページが表示される。

---
layout: post
title: Projects
permalink: /projects/
public: true
---

Aboutページの修正

以前https://rydeenworks.github.ioで公開していた内容をこちらに転記した。またプロフィール画像として猫画像を置いた。

Typographyページの非表示

typography.htmlのフロントマターにpublished: falseを追記すると表示されない。

_layouts/post.htmlを変更

著者名表示は不要なのでコメントアウトする。SNS共有も不要なのでコメントアウトする。参考サイト参照。

フォントサイズの微調整

_sass/_layout.scssと_sass/base/_typography.scssを調整した。参考サイト参照。

index.htmlのサマリ表示を変更

「日本語で記事を書くと，index.htmlのサマリ部分に全文表示されてしまう．おそらく<ul class="post-list">部分のtruncatewords: 50が英語以外で動作しないせいだと考えられる．」と参考サイトにあったので、同様の対策を行う。

GitHubへアップロードする

git pushしてからhttps://rydeenworks.github.io/へアクセスすると、無事ウェブサイトが表示された。

GitHubのSecurity Alert対応

GitHubのリポジトリのページでjekyllとffiのバージョンが古いというSecurity Alertが表示された。GemFile.lockをみて指摘してくれているのではないかと思う。Bundlerでgemを管理しているのでアップデートする。

bundle update

アップデート後にbundle exec jekyll serveでローカルで動作確認すると以下の警告が出た。

Configuration file: /Users/username/Documents/centrarium-master/_config.yml
Deprecation: The 'gems' configuration option has been renamed to 'plugins'. Please update your config file accordingly.

_config.ymlのgemsをpluginsにリネームして、再び動作確認すると警告が消えた。

# External gems
plugins:
  # - jekyll-archives # Sorry, not GitHub pages friendly!

感想

RubyやBundlerはだいぶ慣れていたのと、ネットに情報が多かったので特に困らずに環境構築ができたのは狙い通りだった。今後は記事をスラスラと書けるようになりたい。

参考

環境