Web サイトを開設しました☆彡

初めまして okawa と申します。このサイトは知識のアウトプットの場として開設しました。また、使って良かったもの等も紹介できたらと思います。

早速ですが、本サイトの運用に使っているサービスを紹介します(^^)/

サイト開設にあたって

開設に当たって、次のような要件を満たす構成を考えました。

• ランニングコストがかからない (レンタルサーバー不要なもの)
• 記事をマークダウン形式で書ける
• 記事を GitHub で管理でき、公開フローを自動化できる
• 記事を書く方に集中できる < 重要

最終的に次のような構成となりました。

• Cloudflare Registrar でドメイン okawayusuke.com を取得
• Cloudflare Pages でサイトをビルド、配信
• Hugo を用いて静的サイトを生成
• デザインはテンプレートにお任せ
• サイトを構成するファイルは GitHub に保存

サイトのデザイン - Hugo Blox

Next.js や Astro で一から作ろうかとも思ったのですが、こちらに労力を割かれる未来が見えてしまったので止めました。

結果的に Hugo Blox という Web サイトビルダーを用いて構築しました。テーマ選びは最も時間がかかったところで、現在は HugoBlox/theme-academic-cv というテンプレートテーマを使っています。カスタマイズ性がかなり高い、経歴を書ける、ブログを書くための環境が整っている、ディレクトリ構造が直感的、等の理由で選びました。

基本的に、こちらのテーマの設定項目を見れば良い感じのページになるので、記事を書く方に集中できてストレスフリーです。

Cloudflare Pages

GitHub と Cloudflare Pages を連携させており、GitHub へ変更内容をアップロードするだけで、Cloudflare 側が自動的にサイトを生成し、公開までしてくれるようになっています。

将来的に他の Cloudflare のサービス (Tunnel 等) も使ってみたかったので、ドメインから全て Cloudflare で揃えました。

現時点でのいいとこポイント

• 全てのブランチに対してページを生成してくれる
• 無料プランでできることが多い
• 商用利用可能
• 多くのトラフィック情報を見れる (アクセスのあった国とか)

全ブランチのページを見れるのが、かなりありがたいと思いました。また、ビルドごとに(ドメインとは別の) URL が発行されるので、複数人開発もしやすそうだと思いました。

開発環境

マークダウンファイルや各種設定ファイルは VSCode で編集しています。ファイルは GitHub に保存しているので、Web 上でも変更できます。

サイトのプレビューはローカルサーバーを立ち上げて確認しています。ホットリロードに対応しているので、保存するとすぐプレビューに反映されます。

ランニングコスト

ドメイン代 約 1000 円/年

変更ログ

• 2024-10-17 giscus を用いたコメントシステムを導入
• 2024-10-18 google analytics を導入
• 2024-10-21 多言語対応 (英語用ページを追加)