スポンサーリンク
Date: 2021/04/17 | Author: 鈴木俊吾(すずしん) | Categories:  blog  blog/jekyll 

『Jekyll』でブログサイトを作る方法。環境構築から公開まで丁寧に解説!

『Jekyll』でブログサイトを作る方法。環境構築から公開まで丁寧に解説!

こんにちは、鈴木俊吾(すずしん)です。

通常、レンタルサーバーを利用してブログを構築する際には、WordPressというCMSを利用するのですが…。
このブログでは、WordPressは使用していません。
その代わりに、Static Site Generator(SSG)の『Jekyll』というものを使っています。

WordPressでも、確かにブログは運営できるのですが…。
セキュリティ対策や保守管理のコストを考えると、ちょっと面倒かなと個人的には思うのですよ。

Static Site Generator(SSG)であれば、セキュリティのリスクが少なく、管理も比較的しやすい。
一度使い方を覚えてしまえば、後はブログ記事を書くことだけに集中することができますね。
私も『Jekyll』を使うようになってからは、ブログの作業コストがだいぶ軽減されました。

Static Site Generator(SSG)を使う方法は、一般的なブログ運営方法ではありません。
そのため、WordPressと比べると、得られる情報量というのは限られています。
このままでは、なかなか利用者を増やすことができませんよね?

そこで!
この記事では、『Jekyll』の使い方について解説をしてみたいと思います。
開発環境を構築するところから始まって、ブログとして公開するところまでをカバーしていきます。
少しでも、『Jekyll』を使ったブログサイト構築に興味がある方の参考になればと。

プログラミングに関する知識があまり無い方にとっては、正直ちょっと難しいかもしれませんね…。
でも、この記事を読みながら少しずつ手順を踏んでいけば、確実に上手くできるはずです。
ぜひ安心して、この先を読み進めていってくださいね。

Jekyllとは何?

『Jekyll』というのは、『Static Site Generator』(静的サイトジェネレーター)の一種です。
静的なファイル(HTML)を予め生成させておき、配信時はそれらをそのまま表示します。
そのため、非常に高速でページを表示させることが可能です。

内部処理的には、Rubyというプログラミング言語が使用されているようですね。
ただ、利用する側としては、そこまでは深く意識する必要はありません。
『Jekyll』の仕様さえ覚えれば十分です。

肝心の『Jekyll』の仕様についてですが…。
基本的には、非常に理解しやすいと思います。

サンプルサイトや一般公開されているテーマのソースコードを眺めれば…。
ある程度は、処理の流れが掴めるのではないでしょうか。
多少分からなくても、ドキュメントを読みつつカスタマイズしていけば問題無しです。
ちなみに、テーマを自分でカスタマイズしないのであれば、必要最低限の知識のみで運用可能となります。

Jekyllのインストール方法

それでは、早速。
Jekyllが使えるようにしてみましょう。

『Jekyll』は、Rubyというプログラミング言語が内部的に使われています。
そのため、動作させるためにはRubyが動く環境を作る必要があります。
ここでは、Macのパソコンを利用していることを前提に話を進めていきます。

MacでRubyの開発環境を構築するなら…。
基本的には、Homebrewとrbenvを利用するのがお手軽かと思います。
どちらも、一定の手順を踏むだけで良いので、非常に導入が楽ですよ。

Homebrewのインストール

Homebrewのインストールは、指定のコマンドを実行するだけです。
ターミナルを起動して、以下のコマンドをコピペして実行してみてください。
しばらく待つと、Homebrewのインストールが終わります。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

rbenvのインストール

rbenvのインストールは、Homebrewのインストール後に行います。
Homebrewのinstallコマンドを使用していきます。
具体的には、以下のコマンドを実行するわけですね。
コマンド実行後、しばらく待つとrbenvのインストールが完了します。

brew install rbenv

最新版Rubyのインストール

rbenvのインストールが終わりましたか?
そうしたら、続いてrbenvを使って最新版のRubyを入れていきます。

まず、どのバージョンをインストールできるかを確認してみます。
以下のコマンドを実行してみましょう。
現時点でインストール可能なバージョンのリストが表示されます。

rbenv install --list

記事執筆時点では、『3.0.1』が最新のようなので…。
こちらのバージョンのRubyをインストールしてみます。
rbenvのinstallコマンドを実行します。
引数には、Rubyのバージョン『3.0.1』を指定します。

rbenv install 3.0.1

しばらく待つと、最新版Rubyのインストールが終わります。
コーヒーでも飲みながら、まったり待ちましょう。

最新版Rubyのインストールが終わったら…。
そのバージョンのRubyを使用するように設定していきます。

まず、自分のユーザーのホームディレクトリに『.bash_profile』というファイルを作成します。
既にファイルが存在する場合は、そのファイルを編集します。
そして、以下のコマンドを追記してから保存してください。

eval "$(rbenv init -)"

その後、この『.bash_profile』を読み込み直します。
sourceコマンドを使用していきます。

source ~/.bash_profile

ここまで来たら、あとは最新版Rubyを使うようにrbenvを設定します。
globalオプションを使って、さきほどインストールしたRubyのバージョンを指定します。

rbenv global 3.0.1

そして、以下のコマンドを実行してみて…。
最新版のRubyのバージョンが表示されれば、Rubyの準備は完了となります。

rbenv version

Jekyllのインストール

ここまで終われば、『Jekyll』のインストールは非常に簡単!
以下のコマンドを実行するだけとなります。
ちょっと時間がかかりますので、まったり待ちましょう。

gem install bundler jekyll

Jekyllを使ったブログサイトの構築方法

それでは、Jekyllを使って、最初のブログサイトを構築していきます。
新しいブログサイトを作るには、以下のコマンドを実行します。
ちなみに『my-blog』の名前は自由で構いません。
分かりやすい名前を付けましょう。

jekyll new my-blog

ちょっと待つと、『my-blog』というディレクトリができます。
そこへ移動して、以下のコマンドを実行します。

cd my-blog
bundle exec jekyll serve

私の環境では、このコマンドを実行した際にエラーが発生しました。
どうやら『webrick』が読み込めないというもの。
この対処法としては、bundlerにwebrickを追加すれば良いです。

bundle add webrick

webrickを追加後、あらためて以下のコマンドを実行。
今度は、上手く動作するはずです。

bundle exec jekyll serve

このコマンドが実行されている状態で、ウェブブラウザで以下のアドレスにアクセスします。

http://localhost:4000/

すると、簡易的なデザインのブログサイトが表示されると思います。

既存のJekyllテーマを利用する

ある程度のプログラミング経験がある方であれば…。
あとは好きなようにコーディングして、ブログサイトのデザインを構築していけば良いです。

ただ、あまりプログラミングに馴染みが無い方にとっては、その作業はかなり大変。
そこで、既に公開されているJekyll用のテーマを使わせてもらいましょう。

色々な場所で、Jekyll用のテーマが公開されています。
あなたのお気に入りのテーマを探してみましょう。
テーマのインストール方法については、各テーマのドキュメントページに書いてあります。

Jekyll Themes
Jekyll Themes
Jekyll Themes – a curated directory
Featured Themes | Jekyll Themes

Jekyllを使用した、新規ブログ記事の書き方

Jekyllで、新規ブログ記事を書くには…。
『_posts』ディレクトリ内に、『yyyy-mm-dd-title.md』というフォーマットのマークダウンファイルを作成します。
例えば、この記事の例であれば、『2021-04-17-how-to-use-jekyll.md』というファイル名になっています。

Front Matterの設定

マークダウンファイルの最初には、Front Matterを記述します。
このセクションでは、ブログ記事のタイトル・日付・カテゴリ・サムネイル画像・著者名・パーマリンクなどを指定します。

ちなみに、テーマによって、指定する項目が微妙に変わったりします。
自分が使いたいテーマのドキュメントをよく読んでみましょうね。

参考までに、この記事のFront Matterの情報を載せてみます。
こんな感じで指定するのだなという雰囲気を確認してみてください。

---
layout: post
title:  "『Jekyll』でブログサイトを作る方法。環境構築から公開まで丁寧に解説!"
description: "Static Site Generatorの『Jekyll』を使って、ブログサイトを構築する方法について解説。開発環境構築からブログ公開までの流れを、1から丁寧に説明していきます。"
date: 2021-04-17 21:00
type: card-img-top
categories: 
  - blog
  - blog/jekyll
tags: ブログ StaticSiteGenerator Jekyll 環境構築 入門
image: /assets/img/posts/20210417-01.jpg
caption:
last-updated: 2021-04-17 21:00
author: 鈴木俊吾(すずしん)
card: card-1
excerpt_separator: <!-- more -->
permalink: /2021/04/17/how-to-use-jekyll/
---

ブログ記事本文の書き方

ブログ記事本文の書き方ですが…。
これについては、通常のマークダウン記法を使います。
ちなみに、HTMLでの記述も可能ですよ。

ここでは、比較的よく使うと思われる、マークダウン記法を紹介します。
この他にも、色々なものがありますので、詳しくは『マークダウン記法』で検索してみてください。

『見出し』
# h1
## h2 
### h3 
#### h4

『改行』
文章。  (行末尾に半角スペース2つ)

『箇条書き』
*項目1
*項目2
*項目3

『番号付きの箇条書き』
1.項目1
2.項目2
3.項目3

『水平線』
---
***
___

『チェックボックス』
[x]
[]

『強調』
**文字列**

『斜体』
*文字列*

『引用』
> 引用文

ブログサイトの公開方法

Jekyllで作成したブログサイトを公開するには…。
『_site』内にあるファイル群を全てサーバーにアップロードするだけです。
FTPソフトやrsyncコマンドなどの手段を使って、レンタルサーバーにファイル群を配置しましょう。
その後、実際に自分のブログサイトのURLにアクセスしてみて、ブログサイトが正しく表示されるかどうかを確認します。

ブログサイトの表示例

あなたもJekyllでブログサイトを構築してみよう!

この記事では、Static Site Generatorの『Jekyll』を使って、ブログサイトを構築する方法について解説してみました。
文字数としては結構なボリュームになりましたが…。
実際やってみると、意外と手間はかかりません。

『Jekyll』を使えば…。
それほどプログラミングの知識が無くても、比較的簡単にブログサイトを作成することができますね。

ちなみに、『Jekyll』は無料で利用できます。
テーマも無料で提供されているものが多いです。
なので、手軽に試しやすいですね。

個人的には、すごく使いやすいStatic Site Generatorだと思いますので…。
ぜひあなたも、この機会に『Jekyll』を使ってブログサイトを作ってみませんか?
きっと満足できると思いますよっ!

【参考】
macOS(またはLinux)用パッケージマネージャー — Homebrew
rbenvでrubyのバージョンを管理する - Qiita
Jekyll • シンプルで、ブログのような、静的サイト | プレーンテキストを静的サイトやブログに変えましょう
【マークダウン記法とは?】マークダウンの書き方を網羅的に解説 | Backlogブログ

スポンサーリンク

ブログ記事のカテゴリ一覧

blog (4)

blog/general (2)

blog/jekyll (2)

hobby (1)

hobby/illustration (1)

instruments (4)

instruments/general (2)

instruments/vocal (2)

life (1)

life/life-theory (1)

mac (1)

mac/mac-applications (1)

manager (1)

manager/introduction (1)

original (3)

original/bgm (3)

sports (1)

sports/walking (1)

work (1)

work/mind (1)

This page was last updated at 2021-05-09 05:49.