HTMLコーディングを効率化する方法はいろいろあります。VSCodeの拡張機能使ったり、Emmet使ったり、スニペット登録したり、ChatGPTに書いてもらったり。
上に書いたものはどれも部分的な効率化で、ページ全体の作成を効率化するには静的サイトジェネレーターを使うのがおすすめです。
この記事ではHTMLコーディングを効率化できる静的サイトジェネレーターのJekyllの使い方を解説します。
静的サイトジェネレーターのJekyllとは？
JekyllはHTMLでサイトを作成できる静的サイトジェネレーターの1つです。
他にもGatsbyやAstroといったジェネレータがありますが、JekyllはReactを使ったりJSXで書いたりする必要がなく非常にシンプルで簡単に使えるのが特徴です。
具体的には次のようなHTMLコーディングの効率化手段があります。
- HTMLコーディングを効率化するテンプレートエンジン
- Markdownを使ったコンテンツ作成
- SCSSを使用可能
それぞれ詳しく解説していきます。
HTMLコーディングを効率化するテンプレートエンジン
JekyllはLiquidと呼ばれる柔軟で強力なテンプレートエンジンを使用しています。
LiquidはShopifyのようなECプラットフォームでも使われているすごく便利なもので、具体的には次のようにタグを使ってHTMLファイルを呼び出してページを作成することができます。
<!-- _includes/header.html -->
<header>
<h1><a href="#">ロゴ</a></h1>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</header>
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.title }}</title>
</head>
<body>
{% include header.html %}
{{ content }}
{% include footer.html %}
</body>
</html>Wordpressを使ったことがある人ならheader.phpとかfooter.phpとかに分割したと思いますが、同じようなことをJekyllでもできるようになります。
Liquidを使うことで、HTMLコードの共通部分を再利用することが可能です。複数ページを作る場合はとくに有効で、共通パーツに変更があった場合でも１ファイルの変更のみで全ページの修正ができます。
SCSSを使用可能
JekyllではSass(SCSS)を使用することができます。
SCSSは色やフォントサイズなどの指定に変数を使うことができるので、テーマの管理がしやすくなります。
$primary-color: #3498db;
$font-size: 16px;
body {
font-size: $font-size;
}
a {
color: $primary-color;
}CSSフレームワークのBootstrap5を使う場合は、テーマのカスタマイズや変数の拡張も簡単に行うことができます。
Markdownを使ったコンテンツ作成
Jekyllを使ってWordpressのようにブログを作ることもできます。
Wordpressと同じように一覧ページや詳細ページのテンプレートを作っておけば、あとはMarkdownを使ってコンテンツを作成するだけで自動的にページが作成されます。
この記事では詳しく解説しませんが、以下のように---で囲った部分をWordpressのカスタムフィールドのように使うことができます。
ページのタイトルやカテゴリ、タグなど様々な情報を入れることができ、取得するときは{{page.title}}のようにタグを使って簡単に表示できます。
---
layout: default
title: ブログタイトル
---
# ブログタイトル
Jekyllを使ってWordpressのようにブログを作ることもできます。Jekyllのインストール方法
ここからはJekyllをインストールしてHTMLコーディングを始められるところまでを解説していきます。
Jekyllのインストール手順は次のようになっています。
- RubyとJekyllのインストール
- Jekyllでプロジェクトを作成
- ローカル環境を立ち上げ
- 作成したファイルをサーバーにアップロードする
それぞれの手順を具体的に解説します。
RubyとJekyllのインストール
まずはプログラミング言語のRubyをインストールします。
インストール方法はMacとWindowsで異なっています。
Windowsの場合はインストーラーからインストールすることができます。
-> 詳しくはこちら
Macの場合はコマンドラインツールをインストールした後、Homebrewを使ってRubyをインストールできます。
-> 詳しくはこちら
インストールができたらターミナル(コマンドプロンプト)で次のコマンドを実行することで、インストールができたか確認できます。
ruby -v実行した後バージョンが表示されれば完了です。
Jekyllでプロジェクトを作成
Jekyllがインストールできたら新しくプロジェクト(サイト)を作成します。
ターミナル(コマンドプロンプト)で次のコマンドを実行します。
jekyll new mywebsite実行すると、mywebsiteという名前の新しいフォルダが作成され、Jekyllの基本的なファイルとフォルダ構造が自動的に生成されます。
ローカル環境の立ち上げ
新しいサイトを立ち上げたらまずはローカル環境を立ち上げてみます。
ターミナルで作成したプロジェクトのフォルダに移動して以下のコマンドでサーバーを起動します。
cd mywebsite
bundle exec jekyll serveコマンドを入力すると以下のようなURLが表示されるので、そのURLをブラウザに入力してページを表示してみます。
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.ページが表示できれば完了です。
起動したサーバーを終了する場合はキーボードでctrl+cを打ち込むと終了できます。
作成したファイルをサーバーにアップロードする
サーバーを起動すると同時にHTMLファイルも作成されます。
_siteフォルダに入っているファイルがJekyllによって生成されたファイルです。
レンタルサーバーなどにこのフォルダの中身をアップロードすればブラウザから作成したサイトを表示することができます。
まとめ
このページではJekyllを使ったHTMLコーディングの効率化とインストール方法について解説しました。
Jekyllを使うことでヘッダーやフッターなど共通パーツをWordpressのように再利用することができ、インクルードタグを使って簡単にレイアウトを構築することができるようになります。