Deno製のSSGであるLume向けにGitLab Pagesの設定ファイルを記述する

2025/03/22

当サイトではアフィリエイト広告を利用しています

最近TypeScriptのランタイムの一種であるDenoを使って遊んでみています。

NodeJSに比べるとオールインワン感が大分手軽な感じがあり、まだ発展途上ですが色々とDeno向けのライブラリも存在しています。

その中に静的サイトジェネレーター(Static Site Generator)であるLumeがあり、これをGitLab Pagesで理世数るための設定をまとめました。

Deno製の静的サイトジェネレーターであるLumeについて

DenoはTypeScriptランタイムの一つであり、NodeJS系と比べると手軽にオールインワンでTypeScriptをそのまま動かせたりと、Python的なワンライナー使って遊ぶのが手軽になっています。

色々ライブラリを試しながら遊んでいたのですが、そのうち一つに静的サイトジェネレーターであるLumeがあり、こちらも試してみました。

静的サイトジェネレーターとしての機能は必要十分で、Denoで扱えることもあり初期設定などをかなり少なく記述出来る印象です。

ただ、現状マイナーなDenoのライブラリなので、テーマは豊富ではなく、基本的に自力で一から構築する感じですかね。

TailwindとdaisyUIを使っていくつか簡易HPの作成に利用する分には大分気楽に作れたので、小さめのHP作成なら十分に活用できそうです。

ただ、そのホスティングに関する情報は少なく、今回利用したGitLab Pagesでも公式テンプレートにLumeはなかったので、自前で設定の記述を行うことになりました。

GitLab Pages向けの設定

まず、.gitlab-ci.ymlを次のように設定します。Denoが使えるDocker Imageを指定し、公開ディレクトリがpublicになるようにしています。

# The Docker image that will be used to build your app
image: denoland/deno:ubuntu-2.2.2

pages:
  script:
    # Specify the steps involved to build your app here
    - deno task build
  artifacts:
    paths:
      # The folder that contains the built files to be published. This
      # must be called "public".
      - public

  only:
    # Trigger a new build and deploy only when there is a push to the
    # below branch(es)
    - main

また、Lume自体の設定ファイルである_config.tsは次のように設定します。

他の設定も混じっていますが、ポイントになるのはconst site = lume({dest: "./public"});でビルド先のディレクトリをgitlab ciで指定したディレクトリと一致させることになります。

import lume from "lume/mod.ts";
import jsx from "lume/plugins/jsx_preact.ts";
import tailwindcss from "lume/plugins/tailwindcss.ts";
import postcss from "lume/plugins/postcss.ts";
import daisyui from "npm:daisyui@latest";

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

site.use(jsx());
site.use(
  tailwindcss({
    options: {
      plugins: [daisyui],
      daisyui: {
        themes: ["emerald"],
      },
    },
  }),
);
site.use(postcss());

// Copy Assets to dest directory
site.copy("img");
site.copy("favicon.ico");

export default site;

これらの設定でGitLab PagesでLume製のHTMLファイルを公開できるようになります。