科学技術コミュ日記

この日記はどう作られているか

Astro, UnoCSS, Vercel などを使い、盆栽のようにブログをつくっている

北海道大学総合博物館
北海道大学総合博物館

7月になりました。5月12日に始めたこの日記（ブログ）では、5月に9本、6月に6本の記事を書きました。

北海道大学でのCoSTEPの講義は、開講式特別プログラムと、「モジュール1. 科学技術コミュニケーション概論」（計5回）が終わりました。7月からは、CoSTEPスタッフによる「モジュール2. 表現とコミュニケーションの手法」（計4回）が始まっています。

ここまで毎回、講義や演習、実習のたびに記事を書いていましたが、ここからは、それに限らず、ざっくりやっていこうかと思います。

今回は、この日記をどう作っているかを書いてみます。既存のブログサービスを使わず、自分で一から実装しています。

盆栽のように

私はウェブサービスをつくるお仕事をしています。

仕事では、様々な技術を用途に応じて採用しますが、趣味のプロダクトでは、後で述べるような好きなものをいくらでも導入することができます。

誰に頼まれてやっているわけでもない、締め切りもないものです。好きな時に、インクリメンタルに、デザインや機能を変えていったりできます。

このブログも、最初はシンプルな文字だけのデザインでしたが、数週間経って、サムネイル画像を表示する形に変えました。この記事をあなたが読んでいる頃には、また変わっているかもしれません:

2023年5月15日 - https://github.com/sorami/costep/commit/491295e438ff3e5f42ded1ffab174b99d12d6a30

2023年7月2日のスクリーンショット

広大なインターネットの世界にある好きな例を、いくつか紹介します:

ブログに関する記事もいくつか:

以前の日記で、時系列の「ブログ」ではない、Wikiのような「デジタル・ガーデン」という形を紹介しましたが、とりあえずは、このような日記もいいのではないかなと。

友人が「盆栽のような個人ブログを」と言っていました。のんびりと、あれやこれやと試していければいいなと思っています。

好きな技術を好きなだけ: Astro, UnoCSS, Vercel

この日記のコードおよびコンテンツ、編集履歴は、全て以下のページ（GitHubレポジトリ）で確認できます:

sorami/costep: 科学技術コミュ日記

実装には「Astro」というWebフレームワークを使っています。2022年にv1.0がリリースされました。Next.jsが複雑なWebアプリの構築へ適しているのに対し、Astroはコンテンツをベースとしたウェブサイト（ブログやランディングページなど）へフォーカスしています。私としては「まさにこういうのが欲しかったんだよ！」という気持ちで、使いやすく、昨年末くらいから積極的に利用しています:

Astro

ちなみに個人的には、以前は静的サイトジェネレーターのEleventy（11ty）を使っていましたが、そちらはNunjucksやHAML、といったテンプレート言語を使うものでした。一方でAstroは、よりモダンなWeb開発のフレーバーです。また、ReactやVue.js、Svelteといったフレームワークのコンポーネントをそのまま利用することもできます:

また、↑のような埋め込みを容易にするため、Astroでコンポーネントを作成し、それをMDXで利用しています:

Markdown for the component era | MDX

Markdocにも興味があるのですが、そのタイミング（2023年5月ごろ）はまだAstroのContent Collectionsという機能にMarkdocが正式対応していなかったようなので、MDXを使っています:

スタイルには、UnoCSSというアトミックCSS（ユーティリティファーストCSS）フレームワークを使っています（Tailwind CSSのようなものです）。個人的にかなり好きで、手に馴染みます。最近、一番惚れた技術です:

デプロイにはVercelを使っています。無料プランで十分使えています。シンプルで、開発者体験が良くて好きです:

Vercel: Develop. Preview. Ship. For the best frontend teams

ぼちぼちやっていきます 🧑‍🌾