【Deno/Lume.js】マークダウンのサイトを作成する
2022-10-4
mekoDeno
インストールできていない場合はNode.jsの後継Denoを使ってみたからどうぞ
lume
Lume公式サイト
マークダウンで作る静的サイトジェネレーターです
インストールする
プロジェクトのフォルダを作成します
mkdir lume-project
cd lume-project
フォルダ直下でlumeの初期設定をします
deno run -Ar https://deno.land/x/lume/init.ts
ビルドする
deno.jsonにコマンドが書いてあるので実行します
deno task lume
/_site/にビルドされるので、実行します
deno task start
http://localhost:3000/にアクセスすると
404ページが表示されました
まだページを作成してないのであってます
ページを作成する
プロジェクト直下にindex.mdを作成します
これはindex.htmlつまりトップページとして構成されます
---
title: Hello World
---
# Hello World
これは初期ページです
やったね！
表示すると無事文字化けしました
何も設定してないので当然です
headの設定
_includes/layoutsフォルダにページのレイアウトを設定していきます
公式だとNunjucksというテンプレートエンジンを使用しています
---
title: Default main title
language: jp
---
<!doctype html>
<html lang="{{ language }}">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
</head>
<body>
<main>
{{ content | safe }}
</main>
</body>
</html>
トップページの方にレイアウトを設定します
---
title: Hello World
layout: layouts/main.njk
---
# Hello World
これは初期ページです
やったね！
無事文字化けがなおりました
パスの改造
/というパスが入るのが嫌だけど、ルートにpostが散らばるのは嫌
というめんどくさい状況なので、urlをちょっと変更します
const whitelist = ["/", "/index"];
const dir = "/";
export function url(page) {
const path = page.data.page.src.path;
if (!whitelist.includes(path) && path.startsWith("/")) {
return `../../../${path.replace(dir, "")}/`;
}
}
テストページの作成
動いているか試すためにtest.mdを作成します
---
title: Test
layout: layouts/main.njk
---
# Test
これはテストページです
すごい！
ほぼトップページのコピーです
分かりやすいようにタイトルとか変えてるだけです
サーブして/testにアクセスすると無事テストページが開けました
assetsフォルダの追加
絶対デフォルトで欲しいと思うのですが、オプションで付いている... assets/images/test.webpこのファイルをページで読み込むために_config.tsに設定します
フォルダをサーバーにコピーするだけ
...
site.copy("assets");
...
これでサーブすれば画像が読み込めます
