ウェブサイトを作るために使っているツール
原文は Ben Hoyt により に公開されました。 このブログを購読する
時々、ウェブ開発を始めたばかりの人から、こんな感じのメールをもらいます。「benhoyt.comを作るのに何を使っていますか？コンテンツ管理システム（CMS）を使っていますか？どのテーマを使っていますか？」といった内容です。
普段は簡単に返信しています。シンプルにやるのが好きで、テキストエディタでMarkdownファイルを書き、Jekyllという静的サイトジェネレーターでローカルでテストし、Gitツールを使ってGitHub Pagesにプッシュして公開していると答えています。凝った「テーマ」は使っておらず、数十行のHTMLとCSSで自作したシンプルなレイアウトを使っているだけです。
興味があれば、以下にもう少し詳しく書いておきます。次に誰かに聞かれたら、このページを案内するつもりです！
無料ホスティング（GitHub Pages）
GitHub Pagesを使っています。これはGitHubが提供する無料のウェブサイトホスティングサービスです。GitHubリポジトリを作成してGitHub Pagesを有効にすれば、数分後には完全に動作するウェブサイトが手に入ります。私のウェブサイトのリポジトリはこちらをご覧ください。
独自ドメインも使えます（私の場合はbenhoyt.comです）。しかも無料でTLS暗号化が提供されるので、httpsのURLも使えます。
GitHub Pagesは、Jekyllという静的サイトジェネレーターを使ってソースファイルからHTMLのウェブページを生成します。ソースファイルは通常Markdownで書かれます。詳しくは後述します。いくつかのプリセットのレイアウト、いわゆる「テーマ」が用意されていますが、ネット上で公開されている何百もの無料のJekyllテーマを使ったり、自分で作ったりすることもできます。
GitHub Pagesではオープンソースプロジェクトのウェブサイトをホストできるほか、GitHubのユーザー名に紐づいた個人のウェブサイトもホストできます。ウェブサイトのソースリポジトリは公開（public）にする必要がありますが、成果物であるウェブサイト自体がそもそも公開されるものなので、問題だとは思っていません。
GitHub Pagesは強くおすすめします。無料ですし、とにかく問題なく動きます。プログラマーでなくても「パソコンが得意」な方なら問題なく使えると思います。プリセットのテーマが使えますし、Gitを学ばなくてもGitHub上のオンラインエディタで編集できます。
GitHubが無料でホスティングを提供してくれているので、お礼に宣伝させてもらっています！ :-)
静的サイト生成（Jekyll）
私は「スモールウェブ」のファンです。比較的シンプルな技術で動き、ファイルサイズが小さく高速なウェブページのことです。静的サイト生成はこれにぴったり当てはまります。サイトを更新するたびに、ツール（「静的サイトジェネレーター」）がソースファイルから配信可能なHTMLのウェブページを生成する仕組みです。
生成されたページは、どんな静的ファイルサーバーでも配信できます。クラウド上の小さな仮想マシンでも、1秒あたり数百の静的ファイルを配信できます。たとえばHacker Newsのトップページに掲載されたときの「hug of death（アクセス殺到）」でも十分耐えられるくらいです。
前述のとおり、GitHub PagesはJekyllという静的サイトジェネレーターと連携しています。Jekyllのコンテンツファイルは通常Markdownで書かれ、短いYAMLヘッダーがあり、レイアウト、タイトル、URLなどのメタデータを提供します。例えば、この記事のソースコードの冒頭数行は次のようになっています。
---
layout: default
title: "The tools I use to build my website"
permalink: /writings/tools-i-use-to-build-my-website/
description: "The tools I use to build my website: GitHub Pages ..."
---
<h1>{{ page.title }}</h1>
<p class="subtitle">August 2022</p>
Every so often I get an email from someone starting out in web
development who asks something along these lines: "What do you use to
create your website, `benhoyt.com`? Do you use a Content Management
System? What theme do you use?"
...GitHub Pagesでは、HTMLを手書きしてシンプルなウェブサイトを作ってホストすることもできます。ただ、Jekyll（あるいは他の静的サイトジェネレーター）を使えば、すべてのページで同じHTMLレイアウトを使い回したり、ブログ記事へのリンクを集めたインデックスページを自動生成したりといったことをプログラム的に行えます。
シンプルな自作レイアウト（HTMLとCSS）
できるだけミニマルに、そして仕組みを理解しておきたいので、基本的なHTMLとCSSでシンプルな自作レイアウトを作りました。
上のコードスニペットを見ると、1行目がlayout: defaultとなっています。Jekyllでは複数のレイアウトを持てますが、私のサイトを含む多くのシンプルなサイトでは1つだけで、ここでは「default」という名前にしています。
私のHTMLテンプレートとCSSは_layouts/default.htmlにあり、表示用に少し簡略化すると次のようになっています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
{% if page.description %}
<meta name="description" content="{{ page.description | escape }}">
{% else %}
<meta name="description" content="Ben Hoyt is an experienced software engineer at Canonical. He and his wife and three daughters live in Christchurch, New Zealand.">
<meta name="keywords" content="Ben Hoyt, Benjamin Hoyt, Ben, Hoyt, software, engineer, Canonical, Compass, Jetsetter, Oyster.com, TripAdvisor, Brush Technology, Ben Hoyt's CV, Ben Hoyt's resume">
{% endif %}
<meta name="author" content="Ben Hoyt">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<style type="text/css">
body { background: white; color: #301800; font-family: Georgia, "Bitstream Charter", "Times New Roman", serif; font-size: 17px; line-height: 1.6; word-spacing: 0.1em; margin: 0 auto; max-width: 1000px; }
#menu { margin: 0 auto; width: 92.5%; height: 5.5em; border-bottom: 1px solid #d0c8c0; }
#content { margin: 2em auto; width: 92.5%; max-width: 700px; }
@media (max-width: 750px) {
body { font-size: 15px; }
#menu ul.links { font-size: 75%; }
}
@media (max-width: 615px) {
body { font-size: 13px; }
#menu { height: 7.5em; }
#menu .site-title { float: none; }
#menu ul.links { float: none; margin: -0.5em 0 0 -0.8em; }
h1 { margin-top: 0.5em 0; }
}
/* ... other CSS rules ... */
</style>
</head>
<body>
<div id="container">
<div id="menu">
<div class="site-title"><a href="/">Ben Hoyt</a></div>
<ul class="links no-print">
<li>{% if page.url == '/' %}<b>Home</b>{% else %}<a href="/" title="Go to the home page">Home</a>{% endif %}</li>
<li>{% if page.url == '/cv/' %}<b>Resume/CV</b>{% else %}<a href="/cv/" title="Go to my Resume/CV">Resume/CV</a>{% endif %}</li>
<li>{% if page.url == '/projects/' %}<b>Projects</b>{% else %}<a href="/projects/" title="Projects I've authored">Projects</a>{% endif %}</li>
<li>{% if page.url == '/writings/' %}<b>Tech Writing</b>{% else %}<a href="/writings/" title="Stuff I've written">Tech Writing</a>{% endif %}</li>
<li>{% if page.url == '/writings/non-tech/' %}<b>Non-Tech</b>{% else %}<a href="/writings/non-tech/" title="Stuff I've written">Non-Tech</a>{% endif %}</li>
<li><a href="mailto:[email protected]" title="Email me">Email</a></li>
</ul>
<ul class="links print-only">
<li><a href="https://benhoyt.com/">benhoyt.com</a>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</div>
<div id="content">
{{ content }}
</div>
</div>
<script data-goatcounter="https://benhoyt.goatcounter.com/count" async src="https://gc.zgo.at/count.js"></script>
</body>
</html>これはHTMLやCSSのチュートリアルではないので、仕組みの詳細には立ち入りません。比較的シンプルなレスポンシブなレイアウトで、スマートフォンでも大画面でもきれいに表示されます（上記の@mediaクエリを参照）。大画面ではテキストの最大幅を700pxにしているので、行が長くなりすぎず読みやすくなっています。
テンプレートでは、CSSを各ページの<style>セクションにインラインで埋め込んでいます。CSS自体が小さく、訪問者の多くは1〜2ページしか見ないため、毎回ページに含めてしまい、2回目のHTTPリクエストをなくした方が高速だからです。
現在のレイアウトに更新したのは2018年頃です。それ以前はサイドバーがあり、もっと昔ながらの見た目でした。古いホームページのスクリーンショットがこちらです。
シンプルなアクセス解析（GoatCounter）
アクセス解析にはGoatCounterを使っています。基本的にどのページが人気かを示してくれるもので、記事がHacker NewsやRedditで話題になったときに眺めるのが楽しいです。
今日の表示はこんな感じです（数日前に「単語数カウント」のパフォーマンス比較がHacker Newsに投稿されたので、デフォルトの表示では結果が偏っています）。
GoatCounterは導入がとても簡単です。アカウントを作成して、上に示した1行の<script>タグを埋め込むだけです。ホスト版は「常識的な範囲」の個人利用なら無料で、必要に応じて有料プランを使ったりセルフホストしたりもできます。
以前はGoogle Analyticsを使っていましたが、2019年に置き換えてGoAccessというログ解析ツールにし、2021年にGoatCounterに乗り換えました。こちらの方が少し使いやすく、管理もしやすいです。
コンテンツの追加と編集（Sublime Text）
サイトに新しい記事を追加したり既存のコンテンツを更新したりするときは、愛用のテキストエディタであるSublime Textを立ち上げて書くだけです。
新しい記事を追加する際は、通常、既存の記事ファイルをコピーして中身を消し、YAMLヘッダーの構造を合わせます。また、Sublimeのディストラクションフリーモードを使っているので、画面にはテキストが表示された落ち着いたダークな画面だけが広がります。UIもアイコンもなく、編集中のMarkdownテキストだけがそこにあります。
執筆中はターミナルでjekyll serveを実行し、http://localhost:4000にアクセスして記事のレンダリング結果を公開前に確認しています。
Sublime Textはとても気に入っていますが、有料です。Notepad++、VS Code、Vimなど、無料のテキストエディタのどれを使っても同じように簡単にできます。Markdownに特別なことは何もありません。メモ帳でもいいですし、GitHub.com上で直接ファイルをオンライン編集することもできます。
変更の確認とGitHubへのプッシュ（Sublime Merge）
記事を公開する準備ができたら、GUIのGitツールであるSublime Mergeに切り替えて、変更をコミットしてプッシュ（保存して公開）します。GitHub Pagesなら1、2分でインターネット上に公開されます。
この記事の下書きをSublime Mergeでコミットしているスクリーンショットがこちらです。
編集するときは、テキストエディタに戻って変更を加え、Sublime Mergeで差分を確認してからコミットしてプッシュします。
ここでも、Sublime Mergeは高速で差分UIが優れていて気に入っていますが、コマンドラインのgitツールや無料のGUI Gitクライアントを使っても同じことができます。GitHub.com上でファイルをオンライン編集するなら、Git関連の作業はすべてGitHubがやってくれます。
まとめ
今どきウェブサイトを作ってホストするのは難しくありませんし、ドメイン代の年10ドル程度を除けば費用もかかりません。
開発者の方には、私が使っている構成を強くおすすめします。GitHub PagesとJekyll、そして読者に大量のJavaScriptをダウンロードさせないシンプルなレイアウトです。ウェブページは小さく、高速に保ちましょう！
コメント
ログインしてコメントする