11tyによる当サイトの制作記録（その1・当サイトの制作に11tyを使うと決めるまで）
サイトの目的
当Webサイトは、サイト名の下にあるとおり「雑多で個人的な備忘録」、つまりブログのようなものです。
「のようなもの」としたのは、現状ブログと言える機能がなく、こちらからの一方通行の発信となっているためです。
このサイトの目的も「雑多で個人的な備忘録」そのものです。
ペンと紙を使うような気軽さで、日々の思いや考えを書き残したい考えが強いです。
サイトの技術的な形態
レンタルサーバーにHTMLとCSSとJavaScriptをアップロードして公開しています。
「11ty」を使い、PCのローカル上でHTMLを生成しています。
こうした形態とした理由について、以下に記しました。
過去にWebデザインの実務にごく部分的に携わって
私は過去に、グラフィックデザイナーとして勤務する中、Web制作の実務に数ヶ月ほど携わったことがありました。
といっても、Photoshopでのレイアウトデザインがメインでした。
フロントエンドのコーディングになると、HTMLとCSSの作成を少しお手伝いする程度のものでした。
ですが、当時アナログ作業とAdobeアプリのGUIによる操作でデザインを構築することしか行ったことのない身にとって、テキストエディターでイチからコードを書いてデザインを構築することは、毎日が驚きと発見の連続だった期間でした。
数ヶ月ほどの業務だったため記憶が曖昧ですが、当時は「jQueryやレスポンシブデザインの興隆期」のような状態だったと記憶しています。
フロントエンド関連技術の独学を通じて
一方コーディング、特にJavaScriptについては、実務でほんの少しお手伝いはしたものの、書いたコードが思うように反映されず苦心の連続でした。
その状態でWeb制作業務から離れたため、消化不良の感覚が強く残りました。
こうした感覚を少しでも解消したいと思い、その後もJavaScriptを独学していました。
独学中に、TypeScriptやReactが台頭し、次第にそれらの知識も習得したいと思うようになりました。
ですが、その流れになかなか追いつけていないのが自らの現状です。
ただ、実務に携わった以上、デザインはイチから作りたいという強い希望がありました。
ブログ的なサイトである以上、ブラウザで表示された時に最優先することは「文章が読みやすいデザイン」だと考えています。
特に、記事の途中で関連性の低い広告が表示されることは避けたいと思いました。
ここで、さまざまな企業によるブログサービスを使用するのは選択肢として難しくなります。
加えて、PHPの知識がないため、WordPressでの運用も考えづらい状況です。
11tyを使った決め手
これまで記した状況や条件を踏まえてこの備忘録をカタチにするには、最終出力はブログのようなものですが、ブログという様式に厳密にこだわらなくてもよいと考えました。
「一方通行の発信」という現状を踏まえ、最終的にHTMLとCSSとJavaScriptをWebサーバーにアップできれば、必要最低限の仕様を満たせると判断しました。
サーバーをレンタルするコストはかかりますが、最優先すべき「文章が読みやすいデザイン」を実現するために至った結論でした。
その上で、HTMLへのハードコーディングは避けたいと思っていました。
こうした希望を満たす技術がないか調べたところ、「静的サイトジェネレーター」という技術がある、そしてその中にMarkdownからHTMLの生成が可能な「11ty」というものがある、ということを知りました。
Markdownが使えると記事の作成も気軽にできると考え、最終的に11tyを使おうと決めました。
11tyの公式サイトや、11tyを紹介なさっているさまざまな企業や個人の方々のサイト（例：株式会社豆蔵のデベロッパーサイト）を拝読し、Markdownに限らず、JavaScript（.11ty.js形式）、Liquid、Hamlといった多様な形式からHTMLが生成できることを知りました。
さまざまな入力形式を受け付け、出力はHTMLに収斂する形態であることが大きな決め手となりました。
以上のような経緯で、11tyを使った当サイトの作成に至ります。
この続きは「その2」として後日アップしたいと思います。