Published on

本サイト作成で検討したこと・使ったもの

Table of Contents

はじめに

本ウェブサイト作成にあたってどんなことを検討し、どんなものを使ったのかを記録に残しておきたいと思います。

そもそもなぜサイトを作成したのかというと、単に記事を書くだけでなく自分で作った Web アプリなどを公開するページが欲しかったからです。
記事を書くだけであればQiita・Zenn・noteのようなサービスがありますし、はてなブログのようなブログサービスを使っても問題ありませんでした。

しかしそれでは自由度が低く、当然ですが自分のやりたかった WebGL のゲーム公開はできません。
そこで、ブログと作品公開をするサイトを作ろうと思いました。

構成

次に本サイトの構成を紹介します。

具体的な構成に関わらず実現したいと思っていたのは以下の 2 つです。

  • ブログの記事を Markdown で書ける
  • GitHub の main ブランチに push するとデプロイされる

初期の構成

そこで最初に作ったときの構成がこれです。

Web アプリケーションフレームワークは、Python が好きなので Django と Flask を検討しシンプルで学習コストの低いらしい
Flask を選択しました。
そもそも作りたいのはただの静的サイトなので、簡単な Flask で十分だと思いました。

CSS フレームワークは有名で以前から知っていた Bootstrap を選択しました。

ホスティングはあまり知らなかったので調べてみると、Netlify・GitHub Pages・Vercel など色々出てきましたが結局以前使ったことがあった Firebase Hosting にしました。

GitHub への push でデプロイする機能は、Firebase をセットアップする過程で勝手に GitHub Actions で実現されていました。
しかし当然 Flask には対応していないので自動でFrozen-Flaskを実行するように設定しました。
main に Pull Request 送るとプレビューチャンネルにデプロイされる GitHub Actions も自動で設定されていて、そのまま使うだけでいい感じのワークフローが構築されていました。

最初はこのような適当に気に入ったものを使ってサイトを構築していたのですが、Markdown でブログを書けるシステムをどう実装すればいいか調べるとReact・Next.jsやVue.js・Nuxt.jsに関する記事が多く、Python が好きだから Flask というのはあまりに安直だったと感じ始めました。
Next.js や Nuxt.js はさすがに知ってはいましたがなんとなく難しそうで選択肢に入れていなかったのですが、人気なフレームワークには人気になるだけの理由があるはずだと考えて使ってみることに決めました。

現在の構成

そして、こちらが現在の構成です。

  • JavaScript ライブラリ: React
  • Web アプリケーションフレームワーク: Next.js
  • CSS フレームワーク: Tailwind CSS
  • ホスティング: Vercel

初期の構成よりも一般的な構成になっていると思います。

フレームワークは React・Next.js と Vue.js・Nuxt.js どちらにするか悩んだのですが、より人気らしい React・Next.js にしました。
ただし日本では React より Vue.js の方が人気らしいです。
偶然かもしれませんが、本屋に行くとたしかに React より Vue.js の本の方が多く売られていました。

CSS フレームワークは Tailwind CSS にしました。
Next.js と一緒に使っているという情報を多く見たのと、Next.jsのドキュメントにも Tailwind CSS を使っている例があったのが選んだ理由です。

ホスティングも同様に、Next.js と相性の良さそうという理由で Vercel にしました。
Next.js 自体 Vercel 社が開発しているので、相性が良いのは間違いないと思います。
GitHub への push でデプロイする機能は、Vercel が当然のごとく実現してくれます。

利用ツール

その他、サイト作成に使ったツールを紹介します。

Favicon 作成: Figma

非常に簡単なデザインしかしていませんが、Favicon の作成には Figma を使いました。
ブラウザで手軽で直感的に使えますし、下のテンプレートを使うことで色々なサイズのアイコンを一度に作ることができました。

また、png・jpg・svg・pdf でのエクスポートはできますが、Favicon で使われる ico のエクスポートはできないので下のプラグインを導入しました。

ドメインレジストラ: gandi.net

以下のように、機能・料金を比較して最終的に gandi.net でドメインを取得しました。
他のドメインレジストラを使ったことがないので比較はできませんが、シンプルで使いやすいです。

まず、各ドメインレジストラについて調べてみて気になったことを以下に挙げます。
なお、ここに載せている料金はすべて.meドメインのものです。

お名前.com
メールがたくさん来て煩わしいらしい。
Whois 情報公開代行を取得時に設定し忘れると有料。
Google Domains
登録料が更新料と同じ 2530 円で高い。
ドメインロック・DNSSEC が無料。メールを自分の gmail に転送可能。
Xserver Domain
ドメインロック・DNSSEC などの機能がない割に高い。
gandi.net
無料で 3GB のメールサーバーが利用可能。
更新料が安い。

Google Domains は機能だけ見るとかなり有力で、一度購入しかけました。
しかし、他は登録料 600 円程度、更新料 2700 円程度なのに対し Google Domains は登録料も更新料も同じ 2530 円で、初年度からお金が多くかかることを知りやめました。

下の表に料金比較を載せます。（金額は当時の.meドメインのもの）
3 年維持費も 5 年維持費も gandi.net が一番安いです。

ドメインレジストラ登録料[円]更新料[円]3 年維持費[円]5 年維持費[円]
お名前.com5302728598611442
Google Domains25302530759012650
Xserver Domain7682728622411680
gandi.net6602662598411308

テンプレート: timlrx/tailwind-nextjs-starter-blog

初めは一からすべて自分で作ろうと考えていたのですが最終的にはこのテンプレートを利用させてもらいました。
本サイト同じ構成で数式の表示やコードブロックの表示などやりたいことがすべてできてデザインも好みだったので選びました。

WebGLビルドしたUnityアプリの埋め込み: react-unity-webgl

普通にUnityアプリ読み込むscriptを実行してもいいのですが、このパッケージを使うことでReactのコンポーネントとしてUnityアプリを扱うことができます。

おわりに

簡単なことしかしていませんが、React・Next.jsはFlaskと比べてとても良かったです。
FlaskはRoutingをいちいちapp.pyに書かなければいけないのですが、React・Next.jsではRoutingをpagesディレクトリの構造で表現できます。
また、ページをコンポーネントという単位で分けてcomponentsディレクトリに置くことで再利用しやすくなります。
とにかく、ルールに従うだけでディレクトリ構造がきれいで開発しやすいと感じました。

色々迷走してしまいましたが、なんとかサイト作りに一段落つけることができました。
今後は今は無効化しているブログ記事へのコメント機能を有効化しようと思います。