第1章 セクション2　Jekyllクイックスタート

Jekyllのインストール

JekyllはRubyで書かれたアプリケーションですので、RubyをインストールしてからJekyllをインストールします。

miseとRubyのインストール

執筆時点で、GitHub PagesでサポートされているRubyのバージョンは、3.3.4です（Rubyの最新版は4.0.1）。 Linuxディストリビューションが提供するRubyのバージョンは3.3.4とは限りませんので、複数バージョンのRubyを管理できるmiseまたはrbenvを使いましょう。

このチュートリアルではmiseを使ってのインストールを説明します。

miseはディストリビューションのパッケージに入っていない可能性がありますので、以下の方法でインストールしてください。 端末（ターミナル）から以下を実行します。

$ curl https://mise.run | sh

これで、miseがユーザー領域に（具体的には~/.local/binの下に）インストールされます。 miseを有効にするために、一度ターミナルを再起動する必要があります。

次にRubyをインストールします。 端末から以下を実行します。

$ mise install ruby@3.3.4

miseの詳細は、miseのウェブサイトを参照してください。

my-blogディレクトリの作成とRubyバージョンの指定

このチュートリアルでは、my-blogというディレクトリを作成し、そのディレクトリにローカル・サイトを構築します。 まず、ディレクトリを作成し、そこにカレントディレクトリを移動します。

$ mkdir my-blog
$ cd my-blog

このディレクトリで使用するRubyのバージョンを3.3.4のRubyに設定します。

$ mise use ruby@3.3.4

このコマンドを実行すると、mise.tomlというテキスト・ファイルができます。 catコマンドを使い、ファイルの中身を表示しましょう。

$ ls
mise.toml
$ cat mise.toml
[tools]
ruby = "3.3.4"
$ ruby -v
ruby 3.3.4 (2024-07-09 revision be1089c8ec) [x86_64-linux]

最後の行でRubyのバージョンが3.3.4であることを確認できました。

.ruby-version

mise.tomlはmiseでRubyをインストールしたときに有効ですが、他の方法でインストールした場合には機能しません。 mise以外にもrbenvというインストーラが有名ですが、その場合は.ruby-versionというファイルを使います。 my-blogを公開して他のユーザと共有する場合には.ruby-versionもディレクトリに含めておくと親切です。 以下のようにして.ruby-versionを作成しておきましょう。

$ echo 3.3.4 >.ruby-version
$ ls -a
.ruby-version mise.toml
$

Gemfileの作成とGemのインストール

このディレクトリで使うRubyのライブラリ（Gem）を記述するGemfileという名前のテキストファイルを作ります。 VS Codeなどのエディタで以下の内容を作成し、Gemfileの名前で保存してください。

source "https://rubygems.org"

ruby "3.3.4"

gem "github-pages", "~> 232", group: :jekyll_plugins

Gemfileの書き方については、Bundlerの公式ドキュメントを参照してください。

~> 232の部分は執筆時点（2026年2月13日）でのGitHub Pagesで使えるgithub-pagesのバージョンです。 このバージョンはGitHub Pagesの公式ページで確認してください。

Gemをインストールします。

$ bundle install

bundleはBundlerを起動するコマンドです。

Bundle complete!というメッセージが出れば、Gemのインストールは成功しています。 インストールされたGemの中にjekyll 3.10.0も含まれています。 それを確かめるために、jekyll -vでバージョンを確認しましょう。 BundlerでインストールしたGemを起動するには、かならずbundle execをつけて起動しなければなりません。

$ bundle exec jekyll -v
jekyll 3.10.0
$ ls
Gemfile  Gemfile.lock  mise.toml
$

ディレクトリの中に、新たにGemfile.lockというファイルができています。 このファイルには、インストールしたGemの一覧が記録されています。

Jekyllソースのテンプレートの作成

Jekyllのソースファイルのテンプレートを作りましょう。 Jekyllのnewコマンドを用います。 一旦tempという一時ディレクトリにテンプレートを作成し、その中の必要ファイルをコピーします。

$ bundle exec jekyll new temp --skip-bundle
$ ls temp
404.html  Gemfile  _config.yml  _posts  about.md  index.md

コピー対象は、Gemfile以外の5つです。 cpコマンドの最後にカレントディレクトリを表すドット（.）があることに注意してください。 また、_postsディレクトリ内のすべてのファイルもコピーするために-rオプションが必要です。 最後に要らなくなったtempディレクトリを削除します。

$ cp -r temp/404.html temp/_config.yml temp/_posts temp/about.md temp/index.md .
$ rm -rf temp
$ ls
404.html  Gemfile  Gemfile.lock  _config.yml  _posts  about.md  index.md  mise.toml
$

このディレクトリmy-blogは、Jekyllのソースコードのひな型ファイルを含んでおり、「ソースディレクトリ」と呼ばれます。 また、すべてのソースの最上位にあるディレクトリ、という意味で「ルートディレクトリ」といいます。 Linuxの「ルート」と混同する恐れがあるときは、「Jekyllのルートディレクトリ」などと表現するのが良いでしょう。

ローカル・サイトのビルドとローカル・サーバの起動

次に、ローカル上で、サイトをビルドし、ローカル・サーバを起動します。

$ bundle exec jekyll serve

このウェブページをブラウザで見ることができます。 ブラウザを起動し、localhost:4000を開きます。 すると、次のような画面が現れるはずです。

My-blog-index

このページには「About」「Welcome to Jekyll」などのリンクがあるので、クリックして画面の遷移を試してみてください。

サーバーを停止するには、端末からCTRL+Cを入力します。

ここまでで、駆け足ですが、Jekyllのひな型を作成してブラウザで表示させるまでを見てきました。 次のセクションでは、my-blogディレクトリの中を見ながら、Jekyllが何をしているのかを調べていきます。