このサイトの実装 2020年版

2020年時点でのこのサイトの実装について。

ホスティング

GitHub Pagesで静的ファイルを配信している。

当たり前に思うかもしれないが、articles.html というファイルを配置したときに、/articles.html だけでなく /articles というURLでもアクセスできて嬉しい。後者に統一している。

画像もGitHub Pagesにホスティングしてもらっている。特別にカメラも持っていないし、今のところ枚数も知れている。しかし以下のように制限もあるので、写真が好きな人や、制作物を紹介するポートフォリオのようなものを用意したい場合には少し注意が必要だろう。

  • ファイルあたり100MBの制限
  • サイトあたり1GBの制限
  • 月あたり100GBの帯域幅制限

利用する場合は、一度ガイドラインを読んでおこう。

ドメイン

Amazon Route53でドメインを管理している。

このウェブサイトにおいて唯一継続的にお金が掛かっているところでもある。最初の数日だけ r7kamura.github.io で運営していたこともあったが、試験用途でも無い限り、.comドメインぐらいの価格で済むなら明らかにドメインはあった方が良い。

ただの記録にも関わらずアドバイス的な形式でわざわざ書いているのは、学生の頃、自分のウェブサイトをつくろうとしたのにドメインを取るのに躊躇してやめた過去があるから。面白半分で良いから、興味があるなら自分にお金を掛けてみるべき。

ビルド

GitHub Actionsで静的ファイルを自動生成している。

このウェブサイトは動的なRackアプリケーションとして実装されていて、ビルド毎に全ページのスナップショットが静的ファイルとして出力される、という設計にしている。多分このサイトの実装で一番面白いところだろう。

この仕組みの良いところの一つは、普段利用しているアプリケーション開発の知識を静的なウェブサイトの開発にも適用できるところ。例えば、Railsを使っても良いし、Hanamiを使ってみても良いし、自分で最強のウェブアプリケーションフレームワークをつくってみるという遊び方をしても良い。

デザイン

気になったときにHTMLテンプレートやCSSを盆栽のようにいじっている。

試してみていることを幾つか挙げる。

  • 覚えるべきことを減らす
    • デフォルトを尊重する
    • 同じスタイルを再利用する
  • 実装しない
    • ブラウザに任せる
    • Googleに任せる

記事の書き方

Markdownベースの何かで記事を書いている。

---
title: このウェブサイトの実装 2020年版
---

このサイトの2020年時点での実装のまとめ。振り返り用。

## ホスティング

GitHub Pagesで静的ファイルを配信している。
記事のソースコードの例

「Markdownベースの何か」に関する話をすると長くなるので、また別の機会に触れたい。

記事を書いたら、git push するとよしなにやってくれる。ブラウザでGitHubを開いてエディタで書くこともできる。とはいえ外出時にたまたま気になってiPhoneから編集したことがある程度で、今のところPCのエディタで書くことがほとんど。