このサイトの設計 2020年版

2020年時点でのこのサイトの設計について。

ドメイン

Amazon Route 53でr7kamura.comドメインを管理している。

このサイトの運営で唯一維持費が掛かっているところ。r7kamura.github.ioドメインで運営していたこともあったが、試験用途でも無い限り、独自のドメインを持った方が良いと考えている。学生の頃、自分のサイトをつくろうとしたのにドメイン取得に躊躇してやめた過去を後悔しているので、ただの記録にも関わらず説教くさく書いている。面白半分で良いので、興味があるなら自分にお金を掛けてみるべきだ。

ホスティング

GitHub Pagesにホスティングしてもらっている。

画像もGitHub Pages。今のところ枚数も少なく、1枚あたりの容量も知れているので問題無いが、以下のように制限もある。

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

写真が好きな人や、制作物を紹介するポートフォリオのようなものを用意したい場合には少し注意が必要だろう。利用する場合は、一度ガイドラインを読んでおこう。

ビルド

https://github.com/r7kamura/r7kamura.com に記事が投稿されると、GitHub Actionsでファイルが生成され、GitHub Pagesで公開される仕組みになっている。

記事原稿もプログラムも同じリポジトリで管理している。このプログラムは、記事のプレビューとファイル生成に利用されている。

このサイトは動的なRackアプリケーションとして実装されていて、ビルド毎に全ページのスナップショットが静的ファイルとして出力される、という設計にしている。多分このサイトの設計で一番面白いところだろう。この仕組みの良いところの一つは、普段利用しているアプリケーション開発の知識を静的なサイトの開発にも適用できるところ。例えば、Railsを使っても良いし、Hanamiを使ってみても良いし、自分で最強のウェブアプリケーションフレームワークをつくってみるという遊び方をしても良い。

デザイン

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

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

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

記事の書き方

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

---
title: このサイトの設計 2020年版
---

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

## ホスティング

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

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

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