引きこもりが毎日緩やかに勉強中

日々の学習のアウトプットとしてのブログです。

Hugo+Cloudflare Pagesによる個人ブログ構築

学習内容の整理、記憶定着のためのアウトプットのために、当ブログを開設しました。 できるだけお金をかけず、自身で取得したドメインを使い、それでいて簡単に構築したいと考えていた結果、FOSS(フリーソフト)のHugoとCloudflare Pages(無料プランのあるホスティングサービス)を利用するに至りました。 以下では、ドメイン取得から実際に投稿できるところまでをステップ分けして説明します。 OSはWindows11です。 1.ドメイン取得 お名前ドットコムで取得しました。 初回ゼロ円で、更新時にだけ料金が発生する感じです。 メアドがあれば誰でも簡単に好きなドメインを取得することが可能です。(お名前IDをメモしておいてくださいね) 購入時は様々なオプションを勧められますが、料金が発生するものは全てチェックを外し、ドメインのみを取得。 ホスティングはCloudflare Pagesの無料プランを利用するため、レンタルサーバー等も契約しません。あくまでドメインのみ。 2.Cloudflareアカウント作成 Cloudflare Pagesを利用するためにアカウントを作成します。こちらもメアドのみで作成可能です。色々な方法でアカウント作成が可能です。 3.環境構築(諸々のインストール) PowerShellを管理者として実行します。 以下のインストール作業を行ってください。 # Hugo(Extended版) winget install Hugo.Hugo.Extended # Node.js(Wranglerに必要) winget install OpenJS.NodeJS.LTS # Git (テーマをGitHubから取得するため、バックアップのため) winget install Git.Git PowerShellの再起動後、インストール済みか確認(versionの表示) hugo version node -v npm -v git -v 同様に、Cloudflareへのデプロイツールをインストール→確認します。 npm install -g wrangler wrangler --version 管理者PowerShellを閉じてください。 4.Hugoプロジェクト作成 通常のPowerShellで作業します。 cd ~\Documents hugo new site my-blog cd my-blog git init テーマの追加(ブログの見た目です。当ブログはPaperModを利用していますが、公式サイトで色々なテーマを見れるので、好きなものを利用してください。) git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod Add-Content hugo.toml 'theme = "PaperMod"' ローカル環境で、動作だけ確認してみます。 ...

2026年6月6日 · 2 分 · こも勉

ブログ開始

ブログ開設理由 日々の在宅学習記録としてブログを開設しました。 勉強内容の整理や、記憶定着のためのアウトプットとして利用していきます。

2026年6月6日 · 1 分 · こも勉

First Post

## 今日やったこと Hugo と Cloudflare Pages でブログを構築した。

2026年6月6日 · 1 分 · こも勉