Skip to content

4. Operations

Jump to bottom
Rick Cogley edited this page Nov 11, 2024 · 1 revision

Site operations は次の通り：

ベースとなっているファイル

Siteのフォルダーとファイル構成は意味ある。基本、Lumeはdeno.jsonと_config.tsファイルで起動しています。

まず、deno.jsonは、Denoに関する設定（Lume / Lume CMSのバージョンどれを使うか）とDeno のタスク定義（いわゆるマクロ）が入っています。また、_config.tsは色んなソフトを引っ張ってきて（Lume、Lume CMSやPluginなど）、ビルド前後で実行するスクリップトも定義する（サイトファイルのZIP、何らかのデータをＡＰＩから引っ張ってくる）。

Lumeプラグイン

Lumeプラグインにて、普段面倒な手作業を自動にしてくれる。例えば：

  • feed - RSSフィードを立てる
  • sitemap - sitemap.xml組み込んでくれる
  • lightningcss - より多くのブラウザーで動作出来るようCSSオプティマイズしてくれる
  • metas - <head>に title, description,　og など足してくれる
  • picture / transform images - 一つの画像からsrc-setバリアントを作ってくれる
  • brotli - html や css を圧縮して、結果 index.html も index.html.br がサイトファイルに出来る
  • phosphor - 使い安いアイコンを用意してくれる （/about/に使ってみた）

サイトビルドする時、上記プラグインを使ってLumeが_site書き込みます。

Deno Deployでホスティング

Deno Deploy https://deno.com/deploy にホスティングしています。ログインするのに、Githubユーザーとパスを使います。 ログイン後、プロジェクトの一覧があり、Gitのリポに結びついていることが解ります。 プロジェクトルートにある、serve.tsが、ウェブサーバーとして、Deployが使ってくれる。Deployのプロジェクトを作る時、Entry Pointを、そのファイルに指定すると、動作してくれる。 公開は、mainブランチにプッシュするのみ。GitHubがそこでアクションを実行して、Deno Deployに渡す。Deployが、そこからアップしてくれる。

Ventoテンプレート

Ventoテンプレートの利用によって、if/thenやforを可能にしてくれます。例えば、存在しているページをループして、各ページに<li>を作り、ページの一覧を作成する。当サイトでは、このようなテクニックを使って、トップページの画像グリッドを作ります。次のコードに、{{ for ... や {{ if ... を見かける:

{{ for item of search.pages(`type=showcase`, "order=asc") }}
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
  {{ if !item.hidelink }}<a href="{{ item.url }}" target="_blank">{{ /if }}
    <div class="aspect-ratio aspect-ratio--3x4 shadow-1 br1">
      <span style="background-image:url({{ item.indeximage }});" class="dt cover bg-center aspect-ratio--object grow-large hide-child br1">
        <span class="white dtc v-mid w-100 h-100 child bg-black-40 pa5 br1"><em><span class="bg-white-40">{{ item.category }}
        {{if item.url.includes("/private/")}}
        <span class="dark-red">&nbsp;{{ "lock-laminated" |> phosphor("duotone") }}{{ "password" |> phosphor("duotone") }}</span>
        {{/if}}
        </span><br>{{ item.indextitle }}</em></span>
      </span>
    </div>
  {{ if !item.hidelink }}</a>{{ /if }}
</div>
{{ /for }}

サイトビルド段取り

サイトのビルド段取りはこちら：

  1. 編集して、何時ものようにmainブランチに git commit / git push をする。
  2. リポのGithub Action deploy.yml がmainにプッシュがあると実行され、リポのgit cloneをして、リポをGithubのビルドサーバにコピーして、Deno Deployプロジェクトに渡す。
  3. Deno Deploy がファイルを受け、エントリーポイントが serve.ts になっているので、それをウェブサーバーとして実行する。
  4. ビジターがドメインにアクセスして、Deno Deploy が serve.ts 経由でファイルを表示する。

🔗 Website 📝 CMS 📊 Repo Stats

Clone this wiki locally