HUGO + Cloudflare Pages で個人サイトを建てたのでやり方の備忘録

先日、個人サイト（ここ）を建てました（インターネットに土地と建物があるのって楽しいですね　いや、Cloudflare Pagesなので借地なのかもしれませんが…..）

HUGO + Cloudflare Pages を用いており、VPSなどといったサーバーは特段用いていません。HUGOのThemeはPaperMod を利用しています。サイトを建てたりなんだりしたら備忘録を書いておくのが流儀らしいし、自分で振り返れるように記事を書いていきます。

本記事更新履歴

2025/02/17 16:50:00 アイキャッチ画像の本文挿入とarchetypes/default.mdの説明の追加
2025/02/17 17:50:00 aboutページの作り方などを追加し一部修正

前提

留意事項

弊は非エンジニア
- Misskeyの個人鯖を建てたことがある程度、間違い指摘大歓迎です。
何をするのか
- ローカル (Windows 11)にHUGOをインストールし、それをGitHubにPushし、Cloudflare Pagesに上げて、カスタムドメインを付与する。
実行時の注意
- 必ず公式ドキュメントを読むこと！
- HUGO ドキュメント
  - https://gohugo.io/documentation/
  - 参考：EIGO IS dekimasen のために、非公式日本語訳が存在するが、情報が古い場合があるので細心の注意が必要 https://juggernautjp.info/hugo-ja/
- Cloudflare Pages Hugoに関するドキュメント
  - https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/
- PaperMod（このサイトで使用しているHugo Theme）ドキュメント
  - https://github.com/adityatelange/hugo-PaperMod/wiki

導入　各種必要なものをインストールする

ドキュメントによると、Windows11にHugoをインストールするには、Go と Git が必要だと書かれていますので、それらをそれぞれ事前にインストールする。ここではHugoをChocolatey を利用してインストールしようと思いますので、同じくGitやGoもChocolateyを利用してインストールします。

Chocolateyのインストール

Chocolatey にアクセス
ヘッダーにある「Try It Now」へアクセス
書いてあるのに従って Individual を選択
注意事項をよく読んでから「Now run the following command:」のコマンドをコピー
Windows 11 タスクバーの検索から PowerShell を検索し、「管理者権限で実行」
- ⚠注意！　「Windows PowerShell」ではなく、「PowerShell」を開くこと！！！！（両者は異なるアプリケーションです）
コピーしたコマンドを貼り付けて実行（エンターキー）
並んできた文字列にERRORなどがなく、かつどうやらreadyみたいなのがでてて全部終わったっぽかったら、choco -vを入力してみてバージョンが表示されるか確認。　表示されればOK (PowerShell(管理者権限)はそのままで)

Goのインストール

choco install golangをPowerShell(管理者権限)で実行
go versionで確認
- （?これを実行後に環境変数がどうのこうのって書いてる記事もネットにあるもののの、chocoを利用したインストールだと自動で設定されるため不要と思われる。たぶん。）

Gitのインストール

choco install gitをPowerShell(管理者権限)で実行
git --versionで確認

Hugoのインストール

choco install hugo-extendedをPowerShell(管理者権限)で実行
- ここでは拡張版と呼ばれるものをインストールした。拡張版の詳細についてはHugo公式ドキュメントを参照のこと
hugo -vで確認

ここまで終わったら、PowerShell(管理者権限)をexitで退出

Hugoでテーマのインストール

ここでは、サイト用のフォルダ作成ならびにPaperModのインストールをします。

PaperMod公式ドキュメントを参照すること！

サイト用のフォルダ（ディレクトリ）を作成する

ここではPaperModに書いてある方法（yaml）で行います。

PowerShellを起動（管理者権限ではなく、普通のアカウントのまま、そのままで起動してください）
PowerShell上にPS C:\Users\(ユーザーフォルダ名)>みたいな感じになっていることを確認
hugo new site examplecom --format yaml を実行（examplecomがそのままフォルダ名になるので、任意の名前（自分のサイト名などを英語で）を入力すること）
cd examplecomでフォルダへ移動
git initを実行
PaperModのInstalling にあるGit Sumodule (recomended)の方法でインストールする
エクスプローラーからC:\Users\(ユーザーフォルダ名)\examplecom\に入り、そこにあるHugo.yamlをVSCodeで開く
theme: ["PaperMod"]を挿入する
ここを参考にhugo.yamlに書き込んでいく
保存するときはctrl+sで可能

hugo.yamlの各種設定については公式ドキュメントを参照すること。

参考に弊サイトのhugo.yamlを貼ります。（PaperModにあったものをコピペして編集して使っているにすぎません、間違っている可能性があります）

baseURL: https://moe.hope-pf27.moe/
languageCode: ja-JP
defaultContentLanguage: ja
hasCJKLanguage: true
title: 電脳空間生命体「きぼう」
copyright: "きぼう"
theme: ["PaperMod"]

taxonomies:
    tag: 'tags'

enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false
enableEmoji: true

minify:
  disableXML: true
  minifyOutput: true

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  title: "電脳空間生命体「きぼう」"
  description: "きぼうの個人サイトです"
  keywords: [Blog, Portfolio]
  author: きぼう
  images: ["img/hope-pf27.webp"]
  DateFormat: "2006/01/02"
  defaultTheme: auto # dark, light
  disableThemeToggle: false

  ShowReadingTime: false
  ShowShareButtons: true
  ShareButtons: ["x", "fediverse", "bluesky", "clipboard"]
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowWordCount: true
  ShowRssButtonInSectionTermList: false
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: true
  tocopen: true

  assets:
    # disableHLJS: true # to disable highlight.js
    # disableFingerprinting: true
    favicon: "/favicon.ico"
    favicon16x16: "/img/favicon-16x16.png"
    favicon32x32: "/img/favicon-32x32.png"
    apple_touch_icon: "/apple-touch-icon.png"

  label:
    text: "電脳空間生命体「きぼう」"
    icon: /img/hope-pf27.webp
    iconHeight: 35

  # profile-mode
  profileMode:
    enabled: true # needs to be explicitly set
    title: " "
    subtitle: "流星予報：雨時々流れ星"
    imageUrl: "img/hope-pf27.webp"
    imageWidth: 120
    imageHeight: 120
    imageTitle: Hope_pf27

    buttons:
     - name: 弊について
       url: about
     - name: 記事一覧
       url: posts
    
  socialIcons:
    - name: x
      url: https://x.com/Hope_pf27
    - name: hatena
      url: https://hopepf27.hatenablog.jp
    - name: youtube
      url: https://www.youtube.com/@Hope_pf27
    - name: fediverse
      url: https://hope-pf27.moe/@moe
    - name: bluesky
      url: https://bsky.hope-pf27.moe
    - name: note
      url: https://note.com/hope_pf27 
    - name: rss
      url: https://moe.hope-pf27.moe/posts/index.xml
 
  cover:
    hidden: true # hide everywhere but not in structured data
    hiddenInList: true # hide on list pages and home
    hiddenInSingle: true # hide on single page

  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
    keys: ["title", "permalink", "summary", "content"]    
menu:
  main:
    - identifier: posts
      name: 記事一覧
      url: /posts/
      weight: 10
    - identifier: tags
      name: タグ
      url: /tags/
      weight: 20
    - identifier: rss
      name: RSS
      url: /posts/index.xml
      weight: 30 
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: true
markup:
  highlight:
    noClasses: false
    anchorLineNos: false
    codeFences: true
    guessSyntax: false
    lineNos: false
    style: monokai
  goldmark:
    renderer:
      unsafe: true

記事の作成・確認・構築（更新も同様）

記事やaboutページなどあらゆるコンテンツは/examplecom/content/以下に配置される。　ここでは/content/posts/以下に新着記事を書くこととする。（ディレクトリ管理方法は自由なので/content/posts/2025/~~という方法もある）
公式ドキュメントのここを参照すること。

記事作成方法

PawerShellを開き、examplcomフォルダに移動しcd ~/examplecom/、自分がexamplecomフォルダ内にいることを確認する
hugo new content content/posts/<適当なネーミング>/index.md を実行
- Hugo公式ドキュメントなどでは<適当なネーミング>.mdとなっているケースがほとんどであるが、/example/index.mdとすることで、example/以下の同様の場所（index.mdと同様のフォルダ）に記事内の画像も置くことができる。<適当なネーミング>.mdの場合はできない（画像がうまく紐づけされない状態でパブリッシュされる）ので注意すること
index.mdをVSCodeなどで編集（マークダウン記法を利用）フロントマターなどの詳細は公式ドキュメントを熟読
保存ctrl+sを忘れないこと

参考：fromtmatterについては、デフォルトでの状態設定を行うことができる。archetypes/default.mdをにデフォルト設定を作成。以下に弊サイトでの設定を示す。

---
date: {{ .Date }}
draft: true
title: '{{ replace .File.ContentBaseName "-" " " | title }}'
tags: [" ", " "]
cover: 
  image: " "
  alt: " "
  relative: true
lastmod: 
---

記事の確認

hugo server -D をすると、ローカル内でサーバーが起動しブラウザを通して出来を目視で確認することが可能
- 起動状態を保ちながらindex.mdなど様々なものを編集可能。また、編集中のファイルをctrl+sすると自動的にwebブラウザでも最新の状態が適用される。（ctrl+zを使いまくれ！）
サーバーを終えるときはctrl+c

記事の構築（インターネット公開用の状態にすること）

index.mdのフロントマターのdraft: trueの行を削除し、日時を調整後、保存
hugoコマンド実行するとパブリッシュされる

ここまでの手順は、Hugo公式ドキュメントのクイックスタートに書いてある。
初回の場合はそのまま次の段落へ、既にサイト構築が完了している場合は##記事の更新などその他へ

サイトをインターネットに公開する方法（GitHub + Cloudflare Pages）

GitHubとPCを接続（初回のみ）

SSH鍵の作成 (初回のみ)

予め管理者権限でssh-agentをセットアップしておく、ここの「ssh-agentをセットアップする」に書いてある

PowerShellでcd ~
ssh-keygen -t ed25519 -f .ssh/github
パスフレーズを入力
- 完了すると、windowsのユーザーフォルダ/.ssh/github/に鍵ができるはず
完了後、ssh-add さっき作ったもののうち秘密鍵のほうのパス (VSCodeで中身をみるとプライベートキーとか書いてあって判別可能 .pubじゃないほう)
GitHubウェブページへ入り公開鍵（.pubの鍵）の登録（の中身をコピペすること）をやる
PowerShellへ戻り、ssh -T [email protected]でSSHのテストをする
- 私の環境では、なぜかssh-agentのセットアップや、ssh-addなどがコマンド入力すると1度目は失敗して2度目で成功するという変な状況になってるのでよくわからないけど一応書いておく
  - これ、多分PC再起動で大丈夫になる
（必要に応じて）GitにSSH鍵読み込み方法を設定するため、git config --global core.sshCommand "C:/Windows/System32/OpenSSH/ssh.exe"を実行する

リポジトリを作成し、GitHubへpush（初回のみ）

GitHubのリポジトリを新しく作る。repo new 　適当な名前を付けて、プライベートに設定の上、クリエイトする。
Quick setup をSSHに切り替えて、手順を表示し、下のほう（…or push an existing repository from the command line）を実行する
- もしgit push~~などを実行するとSSH鍵に失敗とエラーが発生する場合、ssh-agentにうまくアクセスできていない場合がある（弊環境はそうだった）。git config --global core.sshCommand "C:/Windows/System32/OpenSSH/ssh.exe"を実行してみてからやってみる
GitHubにブラウザからアクセスし、存在するかを確認する

Cloudflare Pagesへデプロイ　（初回のみ）

Cloudflare Pages公式ドキュメント Hugo

ブラウザでCloudflareにログイン（もしまだドメインをcloudflareに追加していない場合はしておく）
Workersタブへ行き、作成をクリック
Pagesを選択、Gitに接続
リポジトリを選択して次へ
プロジェクト名好きなように、プロダクションブランチ main、フレームワークプリセットhugoを設定 (ビルドコマンドがhugoに、出力ディレクトリがpublicになっていることを確認する)
環境変数について基本空白
- 場合によってはhugoのバージョンが引っかかってビルドできない場合があります
  - その場合には、環境変数のところに、変数名HUGO_VERSION、値0.143.1と設定
    - 値は、あなたが使っているhugoの実際のバージョン値を入力してください。例えばpowershellでhugo versionと入力するとhugo v0.143.1-0~~~~~~~（一例）みたいなのが出てくるのでその0.143.1の部分だけを入力すること
- 基本的に環境変数のところに上記の他には何も入力しなくてよい。ベースURLがどうのこうのと解説しているサイトもあるが、カスタムドメインを付与する場合には関係がない
デプロイを実行

カスタムドメインの設定

無事にデプロイされたら、woekers & pagesのタブから当該へ行き、カスタムドメインの欄からカスタムドメインを設定
しばらく待ってから設定したドメインへアクセスして、確認してみる（個別のページや画像もちゃんとカスタムドメインになっているか確認）
成功してたらお疲れ様でした！これで終わりです

記事の更新などその他

GitHubへpushして記事を全世界に公開する方法（記事更新時）

hugo new content /posts/example/index.mdしてindex.mdで編集してフロントマターのdraftの行を消してctrl+sで保存してhugoでパブリッシュした後

git add .
git commit -m "（更新内容を適当に書く）"
git push -u origin main
終わり

Hugoをアップデートする方法（Chocolateyでインストールした場合）

すみませんまだ試してないので公式ドキュのコピペです

管理者権限でPowerShell
choco upgrade hugo-extended (もし普通の拡張版ではないhugoの場合はchoco upgrade hugo)

PaperModをアップデートする方法（Git Submoduleでインストールした場合）

これもまだ試してない

PowerShellでcd ~/examplecomへ
git submodule update --remote --merge

テーマのカスタマイズ ― 弊サイトの場合

このサイトでは、PaperModをいろいろカスタマイズして使っています。ここではその一部とどうやったのかを紹介します。

！！！注意！！！　テーマ内のファイルを編集する際は、ファイルを直接いじるのではなく、ファイルをコピー→examplecom/下に同様のフォルダを作成してそちらへコピーし（例えばexamplecom/thmeme/PaperMod/layouts/partials/svg.htmlの場合は、examplecom/layouts/partials/svg.htmlへ）、コピーしてきた新しいファイルで編集すること！！！

ホームページのソーシャルアイコンの色々追加

最初に用意されているソーシャルアイコンには、日本でよく使われているはてなブログや、noteなどがありません。そこで、追加してみました。

何をしたのか

thmeme/PaperMod/layouts/partials/以下にsocial_icons.htmlがあることを知る
ここを読んだりchatGPTに解説してもらってどうやらsvg.htmlを参照しているっぽいと知る
svg.htmlを読んで解説してもらってsvgとはコードとしても書けるようになってることを知ったので例えばはてなブログのsvgのコードを取得してきて、他のものと同じようになるように整えて（ここらへんまじで調べまくってchatGPTに聞いてみたいな感じだった）でなんとかやってみた
以下に一例を示す（svg.html）。

{{- else if (eq $icon_name "hatena") -}}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path fill="currentColor" d="M50.1 100.2C22.5 100.2 0 77.7 0 50.1S22.5 0 50.1 0s50.1 22.5 50.1 50.1c-.1 27.6-22.5 50.1-50.1 50.1zm0-93.8C26 6.4 6.4 26 6.4 50.1S26 93.8 50.1 93.8s43.7-19.6 43.7-43.7S74.2 6.4 50.1 6.4z"/>
    <path fill="currentColor" d="M55.9 25.3c-2.4-5-3.9-9.8-4.7-12.6v35.5c1.2.5 2.1 1.6 2.1 3 0 1.8-1.5 3.3-3.3 3.3-1.8 0-3.3-1.5-3.3-3.3 0-1.5 1-2.7 2.3-3.1V12.7c-.8 2.8-2.2 7.6-4.7 12.6-3.8 7.8-8.6 14.6-8.6 14.6l3.1 41.8s2.9 3.2 11.3 3.2 11.3-3.2 11.3-3.2l3.1-41.8s-4.8-6.8-8.6-14.6z"/>
</svg>

こうなったホームページのソーシャルアイコン画像

共有ボタンの編集

本来のPaperModテーマの共有ボタンは、次のようなものでした。 PaperModテーマデフォルトの共有ボタン
これ、だいぶダサいというか好きじゃない感じだったので、編集した。

何をしたのか

先ほどのことからshare_icons.htmlというファイルがあり、これもまたsvg.htmlを参照する形に変更出来るということが類推できることから次のように書き換えた（一例）。

    {{- if (cond ($custom) (in $ShareButtons "bluesky") (true)) }}
    <li>
        <a class="svg-icon-30" target="_blank" rel="noopener noreferrer" aria-label="share {{ $title | plainify }} on Bluesky"
            href="https://bsky.app/intent/compose?text={{ $title }}%[email protected]%0A{{ $pageurl }}">
            {{ partial "svg.html" (dict "name" "bluesky") }}
        </a>
    </li>
    {{- end }}

また、近年のSNS分散時代に向けて「クリップボードにコピー」を実装したかったので次の記事を参考にした

Hugo 製のサイト + PaperMod テーマで記事タイトルと URL をクリップボードにコピーするボタンを作成する - よましし情報

できたものがこちら自サイト用に改造した記事共有ボタンの画像

生のHTMLを挿入できるようにする

hugo.yamlのmarkup:の行に以下を追加

markup:
  goldmark:
    renderer:
      unsafe: true

aboutページを作る

これは簡単。/comtent以下に新しくabout/_index.mdを作成してそこの_index.mdに書き込めば良い。なお_index.mdのフロントマターは私はtitle:だけにしている。

投稿一覧ページを微調整する

PaperModの元の投稿一覧ページはちょっと微妙な雰囲気だったので、変更した。こちらも簡単。/content/posts/に_index.mdを追加して変更したい部分を（例えばページタイトルを英語ではなく日本語の「記事一覧」にした場合）フロントマターで編集する（私はtitle: "記事一覧"だけ書いた）。

トップページに萌え萌えなカウンターを設置する

Kauntahというアクセスカウンターがある。
Kauntahの画像こちらをホームページ（トップページ）に設置したい。

超簡単な方法

Kauntah.svg というものがある
これにあった使い方の部分をindex_profile.html（弊サイトトップページはPaperModのプロフィールモードに設定しているのでこのファイルなのです）の下のほうに次のように書き込む（試してないけどたぶんできる）。

                        <path d="M15 3h6v6"></path>
                        <path d="M10 14L21 3"></path>
                    </svg>
                    {{- end }}
                </span>
            </a>
            {{- end }}
        </div>
        {{- end }}
        #ここから下が新しく挿入した部分！！！！！！！←この部分は実際に挿入する際は削除すること
        <div class="custom-image-container">
            <img src="https://kauntah-svg.vercel.app/counter.svg" 
                 referrerpolicy="origin"
                 alt="萌え萌えなアクセスカウンター"
                 width="240"
                 style="display: block; margin: 0 auto; border-radius: 0; clip-path: none;">
        </div>
        #ここまで上が新しく挿入した部分！！！！！！！！←この部分は実際に挿入するときは削除すること
    </div>
    {{- end}}
</div>

Cloudflare Workersを使ってちゃんとデプロイしてやってみる

最初は上記の方法でやっていたが、相手サーバーへの応答が非常に遅かったりと相手側に負担をかけているっぽかったし、自分でできるなら自分でやったほうがいいので、自分でやってみることにした（とは言えこれも全部借り物ですが）

Kauntah SVG on Cloudflare Workers - GitLab というのを借りる

Cloudflare Wranglerを使ってどうのこうの…が面倒だったので全部webページ上で完結できる方法でやりました。

上記のものをForkする（プライベート）
Cloudflareのダッシュボードへアクセスし、KV（ストレージとデータベースのタブにあると思います）を新規作成して、kvの名前とIDをwrangler.toml.exampleにコピペ、また、name = "workersの新規作成で設定する予定の名前"に変更してからファイル名もwrangler.tomlに変更。（gitlab上でファイル編集できるので）
ダッシュボードWorkersから新規作成「GitLabに接続」（名前は先ほどの.tomlで設定したのと同じくする）
ビルドコマンド→pnpm install、デプロイコマンドpnpm run deploy
これでworkersは動くと思うので、次はローカルPCに行って上記のと同じように書き込む

                        <path d="M15 3h6v6"></path>
                        <path d="M10 14L21 3"></path>
                    </svg>
                    {{- end }}
                </span>
            </a>
            {{- end }}
        </div>
        {{- end }}
         #ここから下が新しく挿入した部分！！！！！！！←この部分は実際に挿入する際は削除すること
        <div class="custom-image-container">
            <img src="https://<your-app-id>.workers.dev/counter.svg" 
                 referrerpolicy="origin"
                 alt="萌え萌えなアクセスカウンター"
                 width="240"
                 style="display: block; margin: 0 auto; border-radius: 0; clip-path: none;">
        </div>
        #ここまで上が新しく挿入した部分！！！！！！！！←この部分は実際に挿入するときは削除すること
    </div>
    {{- end}}
</div>

これで次のようになる弊サイトのトップページの画像

おわりに

ここまでやってみて、まずは本当に公式ドキュメントを読むのがどれだけ大切なのかがわかった。弊は英語がどうしても苦手で……避けがちなんだけど、公式ドキュメントが1番大事です。
あと次に、chatGPTも（注意点を理解して、コマンドの意味も理解した上で）活用できることがわかった。カスタマイズするときや、SSHについてなど、chatGPTに助けられた場面は幾度もあった。
そして、インターネットにある記事は、基本的には非常に有用だが、取り込む際には注意して使ったほうが良いこともわかった。例えば常識かつ大前提となっているために記事内では省略されていることを理解していなかったりすると、大変なことになる。記事を読む際にも「どのようなケースなのか」をきちんと把握したうえで活用することが大切だと感じた。
最後に、困った時にサポートしてくれたフォロワーさん、ありがとう。

本記事更新履歴#

前提#

留意事項#

導入 各種必要なものをインストールする#

Chocolateyのインストール#

Goのインストール#

Gitのインストール#

Hugoのインストール#

Hugoでテーマのインストール#

サイト用のフォルダ（ディレクトリ）を作成する#

記事の作成・確認・構築 （更新も同様）#

記事作成方法#

記事の確認#

記事の構築（インターネット公開用の状態にすること）#

サイトをインターネットに公開する方法（GitHub + Cloudflare Pages）#

GitHubとPCを接続 （初回のみ）#

SSH鍵の作成 (初回のみ)#

リポジトリを作成し、GitHubへpush（初回のみ）#

Cloudflare Pagesへデプロイ （初回のみ）#

カスタムドメインの設定#

記事の更新などその他#

GitHubへpushして記事を全世界に公開する方法（記事更新時）#

Hugoをアップデートする方法（Chocolateyでインストールした場合）#

PaperModをアップデートする方法（Git Submoduleでインストールした場合）#

テーマのカスタマイズ ― 弊サイトの場合#

ホームページのソーシャルアイコンの色々追加#

何をしたのか#

共有ボタンの編集#

何をしたのか#

生のHTMLを挿入できるようにする#

aboutページを作る#

投稿一覧ページを微調整する#

トップページに萌え萌えなカウンターを設置する#

超簡単な方法#

Cloudflare Workersを使ってちゃんとデプロイしてやってみる#

おわりに#

本記事更新履歴

前提

留意事項

導入　各種必要なものをインストールする

Chocolateyのインストール

Goのインストール

Gitのインストール

Hugoのインストール

Hugoでテーマのインストール

サイト用のフォルダ（ディレクトリ）を作成する

記事の作成・確認・構築（更新も同様）

記事作成方法

記事の確認

記事の構築（インターネット公開用の状態にすること）

サイトをインターネットに公開する方法（GitHub + Cloudflare Pages）

GitHubとPCを接続（初回のみ）

SSH鍵の作成 (初回のみ)

リポジトリを作成し、GitHubへpush（初回のみ）

Cloudflare Pagesへデプロイ　（初回のみ）

カスタムドメインの設定

記事の更新などその他

GitHubへpushして記事を全世界に公開する方法（記事更新時）

Hugoをアップデートする方法（Chocolateyでインストールした場合）

PaperModをアップデートする方法（Git Submoduleでインストールした場合）

テーマのカスタマイズ ― 弊サイトの場合

ホームページのソーシャルアイコンの色々追加

何をしたのか

共有ボタンの編集

何をしたのか

生のHTMLを挿入できるようにする

aboutページを作る

投稿一覧ページを微調整する

トップページに萌え萌えなカウンターを設置する

超簡単な方法

Cloudflare Workersを使ってちゃんとデプロイしてやってみる

おわりに