快適な静的サイトを格安で運営しよう
当サイトのサイト運営方針やサイト作成ツールを紹介します。快適なウェブサイトをできるだけ低コストで運営できる方法を検討しています。
サイト運営方針
知恵郎は、当サイトを訪れてくれた方に、快適にコンテンツを閲覧して欲しいと考えています。そして、そのような望ましいサイト実現のために、以下の方針でサイトを運営しています。
静的サイトで高速表示
当サイトは、静的サイトで運用して、ページ表示の高速化を図っています。
ウェブサイトには動的サイトと静的サイトがあります。動的サイトでは、サイトにアクセスがあるたびに、サーバーのデーターベースから必要な情報が抽出されてHTMLファイル等が動的に構築され、ブラウザに送られて表示されます。広く普及しているWordPressなどで作られるサイトは、この動的サイトです。一方、静的サイトでは、構築済みのHTMLファイル等が既にサーバーに配置されてあり、アクセスがあれば直ちにブラウザに送られて表示されます。
静的サイトは、動的サイトよりも圧倒的にページの表示が速いです。上記の性質からサーバー側の負荷が動的サイトに比べて非常に小さく、HTMLファイル等が瞬時にブラウザに送られて、ページ表示が高速に行われます。
静的サイトは、維持コストを低減できるというメリットもあります。サーバーへの負荷が小さいことから、後述する無料のホスティングサービスを利用することができます。
サイトの簡素化（手打ちHTML/CSS）
ウェブサイトをシンプルな構成にして、できるだけ軽くしています。具体的には、一般的に多くのサイトで見受けられる過度な装飾（CSS）や不要な機能（Javascript）を排除しています。他のサイトと比べて、味気ないかもしれませんが、高速化のためです。
インターネット上には、凝ったデザインのサイトも沢山あります。しかし、そのようなデザイン重視の姿勢はサイト作成者の自己満足だ、と知恵郎は思います。閲覧側の主目的は、サイトにある情報を得たいのであって、デザインを楽しみたいわけではないはずです。
なお、知恵郎は当サイトのHTMLやCSSコードを手打ちしています。自分で手打ちすれば、無用なコードを使うことはなく、コードが最小化されます。
ダークモードへの対応
ダークモードとは、ウェブサイトやアプリの黒基調デザインを指します。各種OSやブラウザが既にダークモード表示に対応しており（プラグインで対応する場合もあります）、従来のライトモードと新しいダークモードを選択する自由がユーザーにはあります。
ダークモードのメリットは、2つです。ディスプレイの周りが暗くても目が疲れにくくなることと、OLED（有機EL）ディスプレイのバッテリーが長持ちすることです。どちらも快適に閲覧するために必要な事です。
そこで、当サイトでも、ライトモードだけでなくダークモードにも対応できるように、それぞれ配色を設定しています。ちなみに、トップページのヘッダーロゴ画像の文字が灰色なのは、どちらのモードでも同じ画像を利用したいからです。
サイト開発環境
ウェブサイト作成ツールは、すべて無料のソフトウェアを利用しています。
HTMLエディタ: Visual Stuido Code
HTML手打ちに適したエディタとしてVisual Studio Codeを利用しています。
HTMLコード中のタグ、変数、値などが色分けされるので、コードが把握しやすいです。標準で省略記法のEmmetにも対応しており、入力作業が捗ります。また、嬉しい機能としては、複数フォルダ内のファイルを横断した置換機能があります。
Visual Studio Code
https://code.visualstudio.com/
静的サイトジェネレーター: Python
静的サイトジェネレーターをPythonで自作して利用しています。
HTMLは各ページに同じ要素（ヘッダー、メニュー、フッターなど）があり、素直にHTML手打ちするとコピペが多くなります。そこで、何かしらのプログラミングの支援が必要になります。静的サイトの場合は、そのようなプログラムは、静的サイトジェネレーターとしていくつか存在しています。ただ、知恵郎はそれらを構成するプログラミング言語を新しく覚えるのが億劫だったので、自身が理解しているPythonで自作しました。
Python
https://www.python.org/
ラスター画像処理: Irfanview
ラスター画像処理には、Irfanviewを用いています。
ピクセルデーターの集まりである写真等のラスター画像は、画像処理により大きさ、容量を調整する必要があります。知恵郎は軽快な動作が特徴のIrfanviewを利用しています。ある程度ショートカットキーを覚えると、サクサク処理できます。
Irfanview
https://www.irfanview.com/
ベクター画像処理: Inkscape
ベクター画像処理には、Inkscapeを用いています。
ウェブサイトにおいて、アイコンやロゴ等のイラストは、ベクトルデーター（SVG形式）で表示すると綺麗に表示できます。Inkspaceは、それらSVG画像のちょっとした修正や、ラスター形式画像からSVG形式への変換などで利用しています。
修正や変換したSVGファイルは、SVGOMOで容量を削減しています。
Inkscape
https://inkscape.org/ja/
SVGOMO
https://jakearchibald.github.io/svgomg/
サイト構成環境
独自ドメイン: Cloudflare Registrar
独自ドメインは、Cloudflare Registrarに管理をお任せしています。
Cloudflare Registrarにおいて、".com"ドメインの1年毎の更新費用は、$8.03です。為替にも左右されるのですが、ドメイン維持費としては現状最安です。
そして、当サイトの維持費は、知恵郎の労力を除けばこのドメイン代のみです。
Cloudflare Registrar
https://www.cloudflare.com/products/registrar/
レポジトリ: GitHub
レポジトリは、GitHubで無料管理しています。
レポジトリとは、HTMLファイル等のウェブサイトリソースの保管庫を意味しています。GitHubでは、データー更新に、従来型のFTP形式とは異なり、Git形式を採用しています。Git形式は、コードの差分のみ更新するため、更新が速く、バージョン管理が可能になるという特徴があります。
また、Gitコマンド入力不要となるGitHub Desktopを利用して、レポジトリ更新作業を行っています。
GitHub
https://github.com/
GitHub Desktop
https://desktop.github.com/
ホスティング: Cloudflare Pages
ホスティングサービスとして、Cloudflare PagesのFree Planを無料利用しています。
ホスティングとは、先に説明したウェブサイトのレポジトリを、クラウドサーバーに配置して公開することを意味します。大変ありがたいことに、静的ファイルに限定すれば、基本利用が無料のホスティングスティングサービスがいくつか存在します。GitHubとの連携を前提としたホスティングサービスとしては、GitHub Pages, Netlify, Vercel, Cloudflare Pages等があります。
知恵郎は、それら無料ホスティングサーバーを実際に利用して比較検討して、最終的にCloudflare Pagesを選択しました。
Cloudflare Pages
https://pages.cloudflare.com/
問い合わせフォーム: formrun
問い合わせフォームのサービスとして、formrunを利用しています。
静的サイトでは、問い合わせフォームはjavascriptの機能で実現されます。Googleフォームなどいくつかのサービスがありますが、問い合わせフォームに特化し、そのフォームのスタイルを自由にデザインできるformrunを選択しました。無料利用では問い合わせ上限などに制限がありますが、個人サイトのお問い合わせフォームという用途では問題ありません。
formrun
https://form.run/ja