JavaScript演習-［SSG］Node.jsと静的サイトジェネレーター

概要解説

静的サイトジェネレーター（11ty）を使って、複数ページを効率よく量産していきます。
また、ターミナルを使った Node.js の活用も学習します。

内容

環境設定
Node.js と npm（パッケージマネージャー）
オブジェクトと class
マークダウン［markdown］記法（.md）

授業資料

環境構築

ターミナル

# node.jsのバージョン確認（バージョンが表示されればOKです。）
node -v

# npmのバージョン確認（バージョンが表示されればOKです。）
npm -v

Node.js が入っていれば Eleventy は簡単に使うことができます。
ターミナルを起動し、デスクトップに移動し新しいフォルダ「ssg01」を作成します

#デスクトップに移動
cd Desktop
#フォルダ「ssg01」を作成
mkdir ssg01
#ssg01へ移動
cd ssg01
#11tyをローカルにインストール
npm install --save-dev @11ty/eleventy

警告が表示されるかもしれません。
npm notice New minor version of npm available! 8.6.0 -> 8.12.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.12.1
npm notice Run npm install -g npm@8.12.1 to update!

気になるようであれば、

npm install -g npm@8.12.1

で npm をアップデートしておいてください。

VS Code

Visual Studio Code でデスクトップの「ssg01」を開き「package.json」を編集します。

{
	"private": true,
	"scripts": {
		"build": "eleventy"
	},
	"devDependencies": {
		"@11ty/eleventy": "^1.0.1"
	}
}

Markdown から HTML を生成する想定で「ssg01」フォルダ内に「index.md」と Markdown ファイルを作成して下記の通り記述します。

Markdown 記法サンプル集 - Qiita

# 見出し

本文

ターミナル

用意できたら、さっそく HTML の生成を実行してみます。npm run buildを実行します。

npm run build

「ssg01」内に「_site」フォルダが作成され、中に index.html が生成されていると思います。
中を確認してみると<h1>と<p>でマークアップされただけの html ファイルとなっています。ブラウザで確認してみます。

テンプレートを継承して生成

Eleventy は、様々なテンプレートエンジンに対応しています。

HTML
Markdown
JavaScript
Nunjucks
Liquid
Handlebars
Mustache
EJS
HAML
Pug

VS Code

「_includes」というフォルダを作り、その中に layout.njk を作成します。

_includes/layout.njk

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>サイト名</title>
	</head>
	<body>
		{{ content | safe }}
	</body>
</html>

index.md

このテンプレートを継承して生成するよう front-matter で設定をします。
md ファイルの先頭に---で囲まれたテキストを追加し、このように書きます（YAML 形式です）。

---
layout: layout.njk
---

# 見出し

本文

ターミナル

npm run build

サーバーの起動

eleventy --serve

package.json の script に加えておきます。

 "scripts": {
    "build": "eleventy",
    "serve": "eleventy --serve"
  },

これで、ターミナルに

npm run serve

と記述すればサーバーが起動します。
BrowserSync によるサーバーですので、元の md ファイルなどを編集して保存するたびに自動でブラウザがリロードされます。

Webデザイン学科
授業資料