ブログを作った

もくじ

• はじめに
• 技術選定
  • プラットフォーム/フレームワークの選定
  • テーマの選定
• 出力の例
  • 文字列の強調
  • 画像
  • 引用
  • ルビ
  • コードブロック
• おわりに

はじめに

（2024/04/22追記）フレームワークをHugoからSvelteKitにリプレースしたので、この記事の内容はほぼ全部嘘になった。詳しくは更新作業についての記事に書いてある。

もとよりドメインtachibanai.oneを連絡用メールアドレスのために取得していたが、Webサイトに割り当てるという本来の使い方をしていなかった。そこで、Twitter（現: X）に投稿するには長すぎる話とコードを書きたいという欲求を満足するための場所を用意しようということでブログを作ることになった。

今後はサイト自体の調整や改善をしつつ、Web/CG技術のことや私生活のことについて書いていければと思う。

本稿ではこのブログがどのように作られたか、そしてどのように出来ているかについて記す。

技術選定

プラットフォーム/フレームワークの選定

サイトの見た目や記事執筆のワークフローなどを決定するプラットフォーム/フレームワークの選定はその性質上、複数の候補から慎重に検討した。その結果、

• はてなブログ
• note
• Astro
• SvelteKit
• Hugo

の中からHugoが選ばれた。選定理由は以下の通り。

• 初期コストの低さ
  • AstroやSvelteKitを採用した場合にはサイトを一から作成する必要があり、執筆作業と向き合えるようになるまで時間がかかってしまう。その点Hugoのセットアップの容易さは魅力的だった。
  • とはいえAstroもSvelteKitもおもしろいフレームワークなので、これらもいずれ記事にしたい。
• デプロイの容易さ
  • GitHub PagesをはじめとしてCloudflare PagesやVercelなど複数のサービスがGitHubからのHugoのデプロイに対応しており、WebhookやActionsの設定で悩む必要がない。
• カスタマイズ性の高さ
  • ブログを持とうと思ってから執筆作業に至るまでの距離でいえばはてなブログやnoteなどのブログプラットフォームが圧倒的に優位だが、カスタマイザビリティでは強力なテーマ機能に加えてShortcode（Goのtext/templateおよびhtml/templateライブラリを拡張した構文で独自のコンポーネントを定義したりMarkdownパーサの出力を調整したりできる機能）のあるHugoに軍配が上がった。

テーマの選定

通常HugoでWebサイトを作る場合にはコミュニティライブラリの中から有志が作成したテーマを探すことになるが、このブログでは自作のテーマを使っている。自分のユースケースに特化したテーマを自作することで機械可読性やアクセシビリティの高いページを生成することに加え、Hugoについての知見を深めることが狙いだ。

出力の例

文字列の強調

出版物のスタイルを模倣するため、<em>要素にはfont-style: italicを、<strong>要素にはfont-family: sans-serifを設定している。

例）HTMLの標準仕様によれば、<em>要素は重要でないが強調したいテキストに、<strong>要素は高い重要性を持つテキストに使用するべきとされている。セマンティクスを考慮して両者を使い分けることは機械可読性やアクセシビリティが重要視される今日においてはWeb開発者の義務であるといっても過言ではないだろう。

画像

HugoのMarkdown render hooksを使ってマークダウンのパース結果をオーバーライドし、単体の<img>要素の代わりに<figure>要素によって画像とキャプションを提供している。本文の幅を長辺とした16:9の領域内に画像が収まるようにCSSを記述した。

基本的に画像はwebp形式のものを掲載する。

引用

Markdownの引用では機能に限界があるため、Shortcodeを使って本文と出典を併記している。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 宮沢賢治『ポラーノの広場』

ルビ

Markdownにはルビの機能が存在しないため、Shortcodeを使って実装している。（文章はWikipedia「ルビ」より）

例）今日 ( きょう )は一昨日 ( おととい )の明後日 ( あさって )です。

コードブロック

シンタックスハイライトはHugoの標準機能を使ってビルド時に行っている。（コードはMDN Web Docsより）

let shoppingDone = false;

if (shoppingDone === true) {
  let childsAllowance = 10;
} else {
  let childsAllowance = 5;
}

おわりに

テーマを自作することによって使われないコードスニペットのない、軽量かつクリーンなサイトにできたのではないかと思っている。

RSSフィードなどまだまだ追加するべき機能は多いが、まずはコンテンツの充実を目指したい。