Lumeに関するメモ
Lumeとは
- Denoで動くスタティックサイトジェネレータ
- テンプレートエンジンとしてTSX(JSX)が使える
- ビルドが高速（らしい）
リソース
環境構築
要件
- 環境はコンテナに封じ込めること（ローカルを汚さない）
- VS Codeを起動すればすぐ使える状態になること（DEVコンテナで開発）
ファイル構成
$ tree -a -I .git
.
├── .devcontainer.json
├── .env
├── Dockerfile
└── docker-compose.yaml
Dockerfile
FROM denoland/deno:1.40.2
WORKDIR /app
COPY . /app
RUN deno install --allow-run --name lume --force --reload https://deno.land/x/lume_cli/mod.ts
-
denoのオフィシャルイメージを使用（Debianベース）
-
lumeのコマンドラインツールをインストールしておく
docker-compose.yaml
version: '3.7'
services:
app:
build:
context: .
dockerfile: Dockerfile
env_file:
- .env
volumes:
- type: bind
source: "."
target: "/app"
ports:
- ${PORT}:8080
command: [ "deno", "task", "lume", "-s", "-w" ]
.env
PORT=8080
- 公開ポートが重複する場合、
.envでポートを変更する
.devcontainer.json
{
"name": "Lume",
"dockerComposeFile": [
"./docker-compose.yaml"
],
"service": "app",
"remoteUser": "root",
"workspaceFolder": "/app",
"customizations": {
"vscode": {
"extensions": [
"ms-azuretools.vscode-docker",
"denoland.vscode-deno"
]
}
}
}
-
denoのVS Code拡張を起動時にインストールするようにしておく
Lumeプロジェクトセットアップ
$ docker-compose run app lume
セットアップ完了後のファイル構成
$ tree -a -I .git
.
├── .devcontainer.json
├── .env
├── _config.ts
├── Dockerfile
├── deno.json
├── deno.lock
└── docker-compose.yaml
- ここから
_config.tsやコンテンツを追加・更新していく
サイト構築
プロジェクト構成
$ tree -a -I .git
.
├── .devcontainer.json
├── .env
├── .gitignore
├── Dockerfile
├── README.md
├── _config.ts
├── deno.json
├── deno.lock
├── dest
│ └── index.html
├── docker-compose.yaml
└── src
├── _data.yaml
├── _includes
│ └── template.vto
├── asset
│ ├── css
│ ├── font
│ ├── img
│ └── js
└── index.md
- ルートディレクトリが煩雑になるのを避ける為、コンテンツは
srcディレクトリ以下に格納するよう変更
- コンテンツを
srcディレクトリに移動したことに合わせて、srcディレクトリ内に_data.yamlと_includesを配置
- 生成されたファイルの保存先を
destディレクトリに変更
_config.ts
- 上述したディレクトリ構成に合わせて
siteの設定を変更
import lume from "lume/mod.ts";
const site = lume({
src: "./src",
dest: "./dest",
server: {
port: 8080,
},
});
site.ignore();
site.copyRemainingFiles();
export default site;
_data.yaml
- テンプレートは全てのページで同じものを使いたかったので、
_data.yamlで指定
layout: template.vto
コマンドライン
サイトをビルド
deno task lume
ローカルサーバを起動
deno task lume --serve
ポートを指定してローカルサーバを起動
deno task lume --serve --port=8000
変更をウォッチする
deno task lume --watch
ビルドに関する設定
静的ファイルのコピー
site.copy([".jpg", ".gif", ".png"]);
- 指定された拡張子のファイルはビルド時にそのままコピーされる
コピー元から除外する設定（ignore）
site.ignore("your/ignore/path");
参考資料