Jekyllのセットアップ

GitHub pagesに記事を投稿するためにJekyllをセットアップした。その記録。

FreeBSD上で実施しているが、記事中、FreeBSD依存なところはほとんどない。

Jekyllとは

公式サイトにあるように、Jekyllはプレーンテキストをウェブサイトやブログに変換してくれるツール。Rubyで書かれている。

突然だが。リッチだけど巨大で、しかも動かすにはXAMPPが必要なブログはもう疲れた。

Jekyllはマークダウン形式で記事を作っておけば、コマンド一発でhtmlに変換し、サイトのディレクトリ構造まで作ってくれる。あとは出来上がったものをwebサーバに丸々アップロードすればよい。

githubにアップロードすれば＜ユーザ名＞.github.ioとしてブログを運営できる。相手はgithubだから「アップロード」というよりもgit pushでできる。プログラムをレポジトリにpushするのと同じ感覚でブログができるのである。

今回はgithub pagesで使う前提のJekyllのセットアップまでを扱うが、そのまえにJekyllの仕組みを確認する。

Jekyllによるブログ作成の流れ

Jekyllは前項で書いた通り、マークダウン形式のテキストファイルをhtmlに変換し、ディレクトリ構成を作る。具体的には;

Jekyllの作業ディレクトリを作る
そこにマークダウン形式のテキストファイルを入れていく。
変換コマンドを実行
変換後ファイルの入ったディレクトリが作られる
ディレクトリをそのままアップロードしてもよいが;
確認コマンドを実行すると、ローカルホストでウェブサーバが立ち上がり見た目を確認できる。

というものである。ではさっそく。

jekyll, bundlerのインストール

jekyllはRubyで動く。また、記事中にもあるとおりjekyllの構成を変えるのでbundlerも必要。

インストールはpkgでどうぞ。 Rubyやらなにやら、いっぱい友達を連れてくるので、コンテナ等、隔離した環境で作るのオススメ。私はJail上に作った。

記事を置く作業フォルダを作る。

jekyll new <path> でJekyllのフォルダを作る。

$ jekyll new article/
Running bundle install in /usr/home/bot/article...
  Bundler: Don't run Bundler as root. Bundler can ask for sudo if it is needed, and
  Bundler: installing your bundle as root will break this application for all non-root
  Bundler: users on this machine.
  Bundler: The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
  Bundler: Fetching gem metadata from https://rubygems.org/...........
  Bundler: Fetching gem metadata from https://rubygems.org/.
  Bundler: Resolving dependencies...
  Bundler: Using public_suffix 3.0.3
  Bundler: Using addressable 2.6.0
  Bundler: Using bundler 1.17.1
  Bundler: Using colorator 1.1.0
  Bundler: Using concurrent-ruby 1.1.5
  Bundler: Using eventmachine 1.2.7
  Bundler: Using http_parser.rb 0.6.0
  Bundler: Using em-websocket 0.5.1
  Bundler: Fetching ffi 1.11.1
  Bundler: Installing ffi 1.11.1 with native extensions
  Bundler: Using forwardable-extended 2.6.0
  Bundler: Using i18n 1.6.0
  Bundler: Using rb-fsevent 0.10.3
  Bundler: Using rb-inotify 0.10.0
  Bundler: Using sass-listen 4.0.0
  Bundler: Using sass 3.7.4
  Bundler: Using jekyll-sass-converter 1.5.2
  Bundler: Using ruby_dep 1.5.0
  Bundler: Using listen 3.1.5
  Bundler: Using jekyll-watch 2.2.1
  Bundler: Using kramdown 1.17.0
  Bundler: Using liquid 4.0.3
  Bundler: Using mercenary 0.3.6
  Bundler: Using pathutil 0.16.2
  Bundler: Using rouge 3.3.0
  Bundler: Using safe_yaml 1.0.5
  Bundler: Using jekyll 3.8.5
  Bundler: Using jekyll-feed 0.12.1
  Bundler: Using jekyll-seo-tag 2.6.1
  Bundler: Using minima 2.5.0
  Bundler: Bundle complete! 4 Gemfile dependencies, 29 gems now installed.
  Bundler: Use `bundle info [gemname]` to see where a bundled gem is installed.
New jekyll site installed in /usr/home/bot/article.

できあがったディレクトリ構成は以下の通り。

.
├── _config.yml
├── _posts
├── 404.html
├── about.md
├── Gemfile
├── Gemfile.lock
└── index.md

_config.ymlは設定ファイル。記事を入れていくのは_posts。

_postsの中を眺めれば2019-05-22-welcome-to-jekyll.markdownというような名前でサンプルファイルが一つ入っているはずである。記事を作る場合には、このサンプルのようなファイル名の形式でファイルを置く。ファイルの内容についてはまた後で。

初期設定

_config.ymlを更新

最後の4行以外を適当に。基本情報を決める。

title: "nobwak's Lair"
email: your-email@example.com
description: >- # this means to ignore newlines until "baseurl:"
  nobwakの七転八倒log
baseurl: "" # the subpath of your site, e.g. /blog
url: "https://nobwak.github.io" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: nobwak
github_username: nobwak

markdown: kramdown
theme: minima
plugins:
  - jekyll-feed

Gemfileを更新し、bundle update

「GitHub pageを使いたいなら」との指示通りに更新。

gem jekyllの行をコメントアウト、github-pagesの行をアンコメント。

# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!
# gem "jekyll", "~> 3.8.5" (この行をコメントアウト)
<略>
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
gem "github-pages", group: :jekyll_plugins # この行を生かす

更新したらこちらも指示通りにbundle update

$ bundle update
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies................................
Using concurrent-ruby 1.1.5
Using i18n 0.9.5 (was 1.6.0)
(略)
Using github-pages 198
Bundle updated!

準備完了。

ビルド（変換）のテスト

ではビルド。 bundle exec jekyll buildとする。これでhtmlに変換する。
注意: 日本語を扱うなら文字コードはja_JP-UTF8にしておくこと。

$ bundle exec jekyll build
Configuration file: /usr/home/bot/files/temp/tryout/_config.yml
            Source: /usr/home/bot/files/temp/tryout
       Destination: /usr/home/bot/files/temp/tryout/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 1.344 seconds.
 Auto-regeneration: disabled. Use --watch to enable.

メッセージの通り新しく_siteというディレクトリができる。これが変換後の公開用ディレクトリ。


.
├── _config.yml
├── _posts
├── _site
├── 404.html
├── about.md
├── Gemfile
├── Gemfile.lock
└── index.md

_siteの中身はこうなっている。


.
├── 404.html
├── about
│   └── index.html
├── assets
│   ├── main.css
│   └── minima-social-icons.svg
├── feed.xml
├── index.html
└── jekyll
   └── update
       └── 2019
           └── 05
               └── 22
                   └── welcome-to-jekyll.html

_postsの中にあったサンプルファイルがhtmlに変換され、年・月・日のディレクトリに置かれているのが分かる。

さらにindex.htmlの中身を見ると、以下のようにサンプルファイルへのリンクも書かれている。

    <ul class="post-list"><li>May 22, 2019
        <h3>
          <a class="post-link" href="/jekyll/update/2019/05/22/welcome-to-jekyll.html">
            Welcome to Jekyll!
          </a>
        </h3></li></ul>

つまりJekyllは、_postsの中にあるファイルをhtmlに変換し、インデックスページとリンク構造も作ったうえで_site下に配置してくれる、ということ。 GitHub Pagesにアップロードするときには、ここの_siteから下をgit pushすれば良い。

ただ、git pushするといきなり公開されるので、その前に実際の見た目を確認したいということなら、そのための仕組みも用意されている。 Jekyllのトップディレクトリでjekyll serveとすればよい。

$ bundle exec jekyll serve
Configuration file: /usr/home/bot/files/temp/tryout/_config.yml
            Source: /usr/home/bot/files/temp/tryout
       Destination: /usr/home/bot/files/temp/tryout/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 1.435 seconds.
  Please add the following to your Gemfile to avoid polling for changes:
    require 'rbconfig'
    if RbConfig::CONFIG['target_os'] =~ /(?i-mx:bsd|dragonfly)/
      gem 'rb-kqueue', '>= 0.2'
    end
 Auto-regeneration: enabled for '/usr/home/bot/files/temp/tryout'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

この状態でローカルホストの4000に繋げば、見た目を確認できる。画像あり　36 画像あり　37

これでJekyllのセットアップはおしまい。

Jekyllとは#

Jekyllによるブログ作成の流れ#

jekyll, bundlerのインストール#

記事を置く作業フォルダを作る。#

初期設定#

_config.ymlを更新#

Gemfileを更新し、bundle update#

ビルド（変換）のテスト#