Website notes
Overview
ここでは、このウェブサイトに関する設計上の特徴などについてまとめる。
Sitemap
| Path | Description |
|---|---|
| /about/ | About |
| /articles/ | Article list |
| /articles/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/ | Article |
| /contact/ | Contact |
| /services/ | Service |
| /favicon.ico | Website icon |
| /robots.txt | Robot exclusion standard |
| /sitemap.xml | XML sitemap for search engines to discover content |
Content Management System
このウェブサイトはWordPressを代表するようなCMSを使用していない。代わりに、Parenで自作したマネジメントシステムで運用している。
Contents
このウェブサイトのコンテンツは、メンテナンスのされ方から二種類に大別される。
- ブログの記事
- それ以外
ブログの記事
ブログの記事はMarkdownで記述している。これは、ブログの記事のようなフォーマットがほとんど固定のものは直接htmlを書き下すよりも、プログラムでhtmlに変換した方が効率がよいためである。
例えば、この記事は次のように記述されている。
# Website notes
## Overview
ここでは、このウェブサイトに関する設計上の特徴や慣習などについてまとめる。
...
記事全体は以下に示すような一つのファイルで管理している。ファイルは記事と一対一に対応したS式からなる。各S式は記事の特性（最終更新日、パス、タイトル、タグ）からなる。
; articles.
;; last-update path title tags
("2021-10-05" "co3148xmib2agxy23ic00gtwfvh2ftlk" "出来のいいプログラムは詩に似ている" (Writing))
("2021-10-07" "nu2kve6wkd5vtrrny50ciyeq2fp42ypj" "Single statement non-braced if" (Writing))
...
記事の最終更新日は、技術情報の鮮度の目安として使用されることを意図して保持している。そのため、目的以外の修正（誤字脱字の訂正や、フォーマットの変更）時に必ずしも更新するとは限らない。
これは記事一覧やsitemap.xmlを生成する際に使用される。
それ以外
ブログ以外のコンテンツはhtmlに対応したS式で保持している。
例として、CONTACTページを示す。
; contact.
(section ()
(h1 () "Contact")
(p () "お仕事のご依頼やご質問などございましたら、以下のメールアドレスからお問い合わせください。通常は一営業日以内に返信いたします。")
(p () (a (:href "mailto:info@mukai.systems") "info@mukai.systems")))
Generation
ブログの記事
ブログの記事はMarkdownで記述されているため、Parenの標準ライブラリであるmarkdown moduleを使用してhtmlに対応したS式へ一度変換する。変換後は後述するブログ以外の記事と同じ処理によってhtmlファイルに変換される。
例として、前述したこの記事のMarkdownを変換した結果を以下に示す。
((h1 () "Website notes")
(h2 () "Overview")
(p () "ここでは、このウェブサイトに関する設計上の特徴や慣習などについてまとめる。")
...)
それ以外
ウェブサイトにはヘッダーやフッター等繰り返しの項目がある。DRYの原則にしたがって、どのページも同一のテンプレートから生成するようにしてある。テンプレートを返す関数を以下に示す。
(function make-html (body :key page title)
`(html (lang "ja")
(head ()
(meta (charset "UTF-8"))
...)
(body ()
...
(main (id "main") ,@body)
(footer ()
(p () "Copyright 2020-2022 Mukai Systems.")))))
各文書は、このテンプレートを使用して同一のヘッターやフッターを保持するhtmlファイルに変換される。
さらにS式からhtmlに変換され以下のようになる。
<html lang="ja">
<head>
<meta charset="UTF-8">
...
</head>
<body>
...
<main id="main">
<section>
<h1>Contact</h1>
<p>お仕事のご依頼やご質問などございましたら、以下のメールアドレスからお問い合わせください。通常は一営業日以内に返信いたします。</p>
<p>
<a href="mailto:info@mukai.systems">info@mukai.systems</a>
</p>
</section>
</main>
<footer>
<p>Copyright 2020-2024 Mukai Systems.</p>
</footer>
</body>
</html>
この一連の流れは以下のように実行される。
$ paren make
Hosting
ウェブサイトのコンテンツはAWSのS3に保存している。保存したファイルはAWS Cloud Frontを介して配信している。
Source Code
Website Generator.