2022年12月15日 nyata

[2022-12-15] Lumeでさくっとお手軽ポートフォリオサイトを作成

はじめに

この記事は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

=> 下記ファイルが作成されます

_config.tsを変更

srcディレクトリ以下にコードを置くことにしたので、下記を修正しました。

const site = lume({
    src: "./src",
});

src/portfolio.mdを作成

今回、さくっと作りたかったので一番お手軽そうなMarkdownを採用

# Nagisa YATA

内容

ここまで作成して

$ deno task lume --serve

を実行しブラウザからhttp://localhost:3000/portfolioでアクセスすると表示されていることが確認できます。

一応Layoutファイルを使ってみる

「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ブランチを参照するように変更します。

▽ そうするとかなりシンプルな感じですが、こういう感じのページが作成できます。

おまけ

感想

プレーンなページなら本当にサクッと作成することができました。 css, jsが入ってくるとちょっとめんどいですが、1時間ほどあればそれっぽい感じのページにすることはできそうです。(CSSフレームワークを使えばもっと簡単にできるかも)

Markdownだけでなく、Javascript(Typescript)でページの内容を作成してレンダリングすることもできるみたいなので余裕があれば試してみたかったです。 ブログの一覧作成などが簡単にできそうでした。

実装が半分くらい終わったところでLumeで作るブログのサンプルを見つけてしまったのでこっちを参考にすればよかったなと思いました。

このページやポートフォリオの詳細はGithubのリポジトリに上がっているのでそちらを確認してください。

まとめ

< Posts

< Index