この記事はTECH PLAY女子部 Advent Calendar 2022の15日目に参加させていただいております。
こんにちは、都内でエンジニアをやっているnyataです。 今回アドベントカレンダーに参加させてもらうので、何かやろうと思ったんですがあんまり思いつかず数年間ほったらかしていたポートフォリオサイトを更新することにしました。 ついでにアドベントカレンダーを投稿する先のブログがなかったのでブログも作れるといいなと思いチャレンジすることにしました。
殆どLumeのチュートリアルをやった感じの記事です
denoとLumeをインストールします。
$ curl -fsSL https://deno.land/x/install/install.sh | sh
$ deno run -Ar https://deno.land/x/lume/init.ts
=> 下記ファイルが作成されます
srcディレクトリ以下にコードを置くことにしたので、下記を修正しました。
const site = lume({
src: "./src",
});
今回、さくっと作りたかったので一番お手軽そうなMarkdownを採用
# Nagisa YATA
内容
ここまで作成して
$ deno task lume --serve
を実行しブラウザからhttp://localhost:3000/portfolio
でアクセスすると表示されていることが確認できます。
「nunjacks」というテンプレートエンジンがデフォルトで使えるみたいなので、src/_includes
ディレクトリを作成し`layouts.njkファイルをおき、以下のように中身を作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<content>
{{ content | safe }}
</content>
</body>
</html>
portfolio.mdを変更すると
---
layout: layout.njk
title: Portfolio
---
# Nagisa YATA
...内容...
変数をbindしていい感じに表示できます。
いい感じになったらGithub Actionsでデプロイをします。
ここ→ https://lume.land/docs/advanced/deployment/#github-pages にあるのをそのまま .github/workflows/cd.yml
ファイルにおきます。
わたしのRepositoryはmasterブランチにしてたので、main
のところをmaster
に変更しました。
gh-pages
ブランチに生成されたファイルなどが置かれるので、Repositoryの設定からGithub pagesはgh-pages
ブランチを参照するように変更します。
▽ そうするとかなりシンプルな感じですが、こういう感じのページが作成できます。
.njk
ファイルで普通にhtmlがかけるのでcssやjavascriptも読み込むことができますプレーンなページなら本当にサクッと作成することができました。 css, jsが入ってくるとちょっとめんどいですが、1時間ほどあればそれっぽい感じのページにすることはできそうです。(CSSフレームワークを使えばもっと簡単にできるかも)
Markdownだけでなく、Javascript(Typescript)でページの内容を作成してレンダリングすることもできるみたいなので余裕があれば試してみたかったです。 ブログの一覧作成などが簡単にできそうでした。
実装が半分くらい終わったところでLumeで作るブログのサンプルを見つけてしまったのでこっちを参考にすればよかったなと思いました。
このページやポートフォリオの詳細はGithubのリポジトリに上がっているのでそちらを確認してください。