ホームページ更新 2026
令和のこの世にhtmlを手打ちする男
以前の2記事は、時間がなかったのでhtmlを手打ちして作っていましたが、あまりにも更新が大変すぎるので、流行りのMarkdownで記事が書けるように、SSG(静的 サイト ジェネレータ の略)を使ったWebサイト構築を行うことに決めました。 Markdown+SSGにしたのは、WordPressは重くて脆弱という偏見があるからです。あとCMSの機能を使いこなすのは多分無理
昨今は、有料のレンタルサーバーを使わずとも、node.JS製のWebサイトをホスティングしてくれる無料サービスがたくさんあります。
古いブラウザからも見れるようにSSLを無効化したり文字コードをShift-JISにしたりと、本当は細かいカスタマイズをしたかったのですが、無料ホスティングサービスの範疇ではなかなか難しそうで、今回は諦めました。
今回使用しているSSGは、Eleventyです。SSGは、有名なところだとHugoやAstro、あるいはC#等で自作するという手もあります。既存のテーマを使うならHugoやAstroの方が機能が充実しているものと思います。しかしテーマを作るとなると、Goは書いたことないし、AstroよりはEleventyの方がhtml直書きに近い感覚で作れるらしいので、今回はEleventyを選択しました。
C#でSSGを自作するのは思ったより大変そうですが、Node.JSではどうやらShift-JISを簡単に扱えないっぽいので、いずれは挑む必要がありそうです。
11tyの自作テーマを作ってみた
既存のテーマを使うのはなんだか味気ないし、なんとなく7.cssをちゃんと使ってみたい気持ちになったので、今回は自分でテーマを作ることにしました。といっても、JavaScriptとかeleventyのこととか私は全くわからないので、とりあえずhtml+cssで雛形を作ってから、同じ文章のMarkdownファイルを作り、それらをcopilotくんに読み込ませて、markdown->htmlのスクリプトを作るようにCopilotくんに頼みました。
AIに頼ったコーディングって自分に負けた気がしてちょっと嫌なんですが、わからないものは仕方がない。むしろAIに書いてもらったコードをとっかかりにして勉強しよう、という自己正当化を行いました。(11tyの日本語記事が少ないのと、jsの知識がないとドキュメントなどを読んでも何もわからない)
学生プランのCopilotで使用できるモデルが今年の3月頃に大幅削減されてしまったため、まともなコードが生成されるかどうか不安ではありましたが、3回か4回くらい修正指示すると、ほぼ期待通りのページが出来ました。最近のLLMはすごいですね。私はChatGPTが出る前のGPT3.5の頃からLLMで遊んでいたが故に、基本的に生成AIの出力を信用していません。それだけに、ここ1～2年のLLMの進化は凄まじいものと感じます。昔のように突然わけのわからないコードを書き始めるようなことも、今回はありませんでした。道具としては進化していますが、遊び道具としては退化だよね、これ。面白くないもん。
あと各種プラグインにも非常に助けられました。サイト内検索はPagefindをほぼそのまま使っていますし、Twitterとかの埋め込みもeleventy-plugin-embed-everythingの力を借りました。コードブロックの部分はPrism.js、リセットCSSにはressをお借りしました。 感謝。
今回実装した機能は、記事ごとのタグ、カテゴリの付与、それらを元にしたカテゴリ別・タグ別記事一覧ページの作成など。
終わりに
モダンな見た目とは非常にほど遠いですが、出来は満足。結局CSSの調整が一番時間かかった気がする。
あと、私はパフォーマンスとかSEOとかのことを全く知らないので、タグのあたりはeleventy-high-performance-blogを丸パクリしたんですが、EdgeのLighthouseでスコア測定をしてみたらまあまあ良い数値が出ました。 そもそものデータ量が少ないからかもしれないが。
気が向いたらソースコードを公開しようと思います。今はちょっとめんどくさい