![thumbnail](/thumbnails/deno.webp)
![thumbnail](/thumbnails/deno.webp)
【Deno/Lume.js】マークダウンのサイトを作成する
Deno
インストールできていない場合は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
これは初期ページです
やったね!
無事文字化けがなおりました
パスの改造
/posts/
というパスが入るのが嫌だけど、ルートにpostが散らばるのは嫌
というめんどくさい状況なので、urlをちょっと変更します
const whitelist = ["/", "/index"];
const dir = "/posts/";
export function url(page) {
const path = page.data.page.src.path;
if (!whitelist.includes(path) && path.startsWith("/posts/")) {
return `../../../${path.replace(dir, "")}/`;
}
}
テストページの作成
動いているか試すためにposts/test.md
を作成します
---
title: Test
layout: layouts/main.njk
---
# Test
これはテストページです
すごい!
ほぼトップページのコピーです
分かりやすいようにタイトルとか変えてるだけです
サーブして/test
にアクセスすると無事テストページが開けました
assetsフォルダの追加
絶対デフォルトで欲しいと思うのですが、オプションで付いている... assets/images/test.webp
このファイルをページで読み込むために_config.ts
に設定します
フォルダをサーバーにコピーするだけ
...
site.copy("assets");
...
これでサーブすれば画像が読み込めます