Hugo Github CloudflarePages で素人がブログ作り

やりたいこと

ローカルのPCでHugoで記事を作成
それをGithubにあげる
そうするとCloudflare Pagesで自動的に色々やってくれブログが表示される。

要するに難しく考えてなくてもなんとなくでところてん方式でデータが送られ簡単にブログが運営できればいい。そんな感じ。
基本的に自分の備忘録とMarkdownの練習のためなので役に立ったサイトの紹介になりますw

肝は、linuxbrewのインストールとCloudflare Pagesでのデプロイでビルドエラーが出ても気にしないことです。

自分の環境

Windows11 ProのHyper-V上のLinux Mint22.1でお試し中。

あまり技術的な話はしない（できない）ですがLinuxベースでの話になります。

用意すること

Hugoをインストールすること
Githubのアカウントを取得すること
CloudflarePagesのアカウントを取得すること

どれから先にやっても構いません。

Hugoのインストール

最新版のHugoをインストールするのに一番時間がかかった。
なぜならaptなどで通常のLinuxuのインストール方法だと古いバージョンのHugoしかインストールされないから。

解決方法はlinuxbrewをインストールしてbrewでHugoをインストールするだけ。
これについては以下のサイトを参照してください。
ターミナルからのコマンド入力でのインストールです。
https://exiz.org/posts/ubuntu-install-homebrew/

Githubのアカウントを取得

Githubのご新規さんは公式のWebページからsign upで新規取得を。
新規取得時に登録するメールアドレスはローカルPCとの紐付けの際にも使います。
https://github.com/

英語が苦手だったり画像付きの説明が必要な方は以下のサイトを参考にしてください。
https://working-class-hero.net/blog/1946/

Cloudflare Pagesのアカウントを取得

こちらもご新規さんは公式のWebページから（日本語設定に変更してから）サインアップで新規取得を。
https://www.cloudflare.com/ja-jp/

画像付きの説明が必要な方は以下のサイトを参考にしてください。
https://zenn.dev/hi_ka_ru/articles/cloudflare-init-20241115

以上で準備は完了！

ブログで記事を書くまでの下準備

まずは、Githubでリポジトリ（データ貯蔵庫）を作る
つぎに、そのリポジトリとCloudflare Pagesを紐付け
さらに、ローカルPCのHugeでブロクを作成し、Githubにアップロード
最後に、ローカルPCのHugoとGithubを紐付け

2でエラーが出るが、気にせずこの順番でやるのがたぶん一番楽。

Githubでリポジトリ作成

Webブラウザで先程作成したGithubのアカウントにサインイン。
「Repository」をクリックして「New」ボタンを押して以下の通り（「home」のページ左のフレームのTop repositoriesの横の「New」ボタンでもOK）。

Repository nameに好きな名前をつける（Cloudflare PagesやローカルPCのHugoの作業フォルダでもこの名前が反映されることになります。また独自ドメイン（カスタムドメイン）を使わないとこの名前が公開されるブログのサブドメインとなるので適当な名前はやめましょうw）。
privateでOK（あまり気にすることではないが、このprivate(他人にソースは非公開)ができるからGithub→Cloudflare Pagesで公開することにした）
Initialize this repository with:の「Add a README file」にチェック
画面下部に移動し「Create Repository」ボタンを押してリポジトリ作成は完了

画像付きの説明が必要な方は以下のサイトの「GitHub側の画面でリポジトリを作成」を参考にしてください。
https://zenn.dev/tteaoocl/articles/01e034d6671cea

Cloudflare PagesとGithubの紐付けと設定

まずは紐付けから。
Webブラウザで先程作成したCloudflareのアカウントにログイン。
左のフレームから「コンピューティング」→「Workers&Pages」を選択し、出てきた画面の「作成」ボタンを押し、「Pages」タブの「Gitに接続」を選択。

出てきた「アカウントからサイトをデプロイする」ウィンドウで「Github」タブで「Githubに接続」を選択。
Cloudflare Pagesのインストールと認証の画面が出るので、「Only select repositories」をチェックしタブの中から上記のGithubで作成したリポジトリを選択し、「Install & Authorize」ボタンを押す。
Githubのアクセス承認のウィンドウが出るので「Use Github Mobile」ボタンを押す

これでCloudflare PagesとGithubの紐付けは完了！

次にCloudflare Pagesの設定を。

「アカウントからサイトをデプロイする」ウィンドウの「リポジトリを選択する」から上記の登録したリポジトリを選択し、「セットアップの開始」ボタンを押す。
「ビルドとデプロイのセットアップ」ウィンドウが出てくるので「ビルドの設定」で「フレームワークプリセット」で「hugo」を選択、「環境変数（アドバンスド）」をクリックし「変数を追加する」ボタンを押す。
「変数名」に「HUGO_VERSION」を、「値」には以下のページに記載してあるHugoのバージョンを入力し、「保存してデプロイする」ボタンを押す。 https://github.com/gohugoio/hugo/releases
この記事執筆時のバージョンは0.147.0

これで設定は完了！

Githubにデータが入ってないので当然デプロイできずにエラーが出ますが、気にせずこれで一旦終了で構いません。
なぜならデータが入っていても何故かエラーが出てデプロイできないからw
そしてなぜかこの失敗のあとにデータを入れると自動でデプロイされ成功します。
というわけで次は入れるデータを作ります。

画像付きの説明が必要な方は以下のサイトを参考にしてください。
https://hato90.pages.dev/post/2024/0907_cloudflare_getstarted/

ローカルPCのHugoでブロクを作成し、Githubにアップロード

まず、ローカルPCにhugoの作業場ディレクトリを作ります（適当な場所でいいのですが、ホームディレクトリよりはhugoなどのディレクトリを作りその中に作業場ディレクトリを作るのが良いでしょう）。ターミナルで以下のコマンドを打ち込みhugoの作業場ディレクトリを作ります。

$ hugo new site 作成する作業場の名前

この作業場はあくまでGithubにアップロードするためのブログデータを作るためで、あとあと消すので<作成する作業場の名前>は適当で構いません。Githubのリポジトリ作成の際のRepository nameとは別の方がいいです。

更に以下のコマンドを打ち込みます。

$ cd 作成する作業場の名前
$ git init
$ git submodule add https://github.com/dim0627/hugo_theme_robust.git themes/robust
$ echo "theme = 'robust'" >> hugo.toml

これでrobustというブログの外観を決めるテーマが組み込まれ最低限の設定を行ったので、ブロクの作成が完了です。

画像付きの説明が必要な方は以下のサイトの「プロジェクトの作成」を参考にしてください。
使用してるテーマが異なるのでそこは適宜変換してください。 https://zenn.dev/rivine/articles/2023-06-12-create-hugo-blog#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90

次に、できたブログをGithubにアップロードです。
簡単に済ますためにGUIで行うのがいいと思います。
アップロード先はGithubにサインインした後に、左のフレームで先程作成したリポジトリを選択。
「add file」をクリックし、「Upload files」を選択。 GUIから<作成する作業場の名前>の中のディレクトリやファイルをGithubの画面の「Drag files here to add them to your repository」にドラッグ＆ドロップ。

これでアップロードは完了です。
そしてGithubに有効なデータが入ったので自動でCloudflare Pagesでデプロイされ今度は成功しているはずです。
Cloudflareにログインし左のフレームの「コンピューティング」→「Workers & Pases」を選択し、出てきた画面の「訪問する」をクリックしたら新規ウィンドウでブログが表示されるはずです。

画像付きの説明が必要な方は以下のサイトの「サイトを確認」を参考にしてください。
https://hato90.pages.dev/post/2024/0907_cloudflare_getstarted/

ローカルPCのHugoとGithubと紐付け

紐付けの前提としてSSHキーの作成とGitHubへの公開鍵の登録が必要です。
何を言ってるかわからなくても手順通りやれば問題ありません。

まずは、SSHキーの作成です。 Githubの新規取得時に登録したメールアドレスを用意します。
ターミナルで以下のコマンドを入力しSSHキーの作成。

$ ssh-keygen -t ed25519 -C Githubの新規取得時に登録したメールアドレス

SSHキーが作成されているか確認のために以下のコマンドをターミナルで入力。

$ cd
$ ls ~/.ssh

これらのファイルが表示されればSSHキーの作成は完了です。

id_ed25519　　id_ed25519.pub

次に、GitHubへの公開鍵の登録です。
さきほど表示したファイルid_ed25519.pubの中身をGithubにコピペするだけです。
ターミナルでファイル内容をクリップボードにコピーする方法もあるのですが、コマンドがセットアップされているか不明なのでGUIからコピーしましょう。
Linux mintではXedでファイルを開き、右クリックで「すべて選択」し更に右クリックで「コピー」です。

コピーが完了したらそれをGithubに登録です。
ブラウザでGitHubにサインインしヘッダー右にあるプロフィール画像を押し、出てきたメニューの「Settings」選択。
出てきたウィンドウの左メニューから「SSH and GPG keys」を押し、「New SSH key」ボタンをクリック。
「key」のところを右クリックして「貼り付け」し、「Add SSH key」ボタンをクリックでGitHubへの公開鍵の登録が完了です。

画像付きの説明が必要な方は以下のサイトを参考にしてください。
https://qiita.com/ck85_/items/3ac90b1036ab4cd2ca00

前提となるSSHキーの作成とGitHubへの公開鍵の登録が完了したので、いよいよ紐付けです。
まず、元になるデータを取得するためにブラウザでGitHubの「home」からブロクのために作成したリポジトリを選択。
そして「<> Code」ボタンを押し、「Local」タブを選択し、更に「SSH」タブを選択し、出てきた画面の「git@github.com:」横に表示されている「Copy url to clipboard」アイコンをクリックしURLをコピー。

次に、ローカルPCのHugoでブロクを作成の際につくった作業場ディレクトリがおいてあるディレクトリに移動します。
このディレクトリにgitコマンドでGitHubと紐付けするディレクトリを作ります。ターミナルで「git clone」と入力し、スペースをあけ右クリックでコピーしたURLを貼り付けます。

$ git clone git@github.com:YOUR-USERNAME/YOUR-REPOSITORY

これで作業場ディレクトリがおいてあるディレクトリには作業場ディレクトリと、Githubに紐付けされたディレクトリができたはずです。
Githubに紐付けされたディレクトリができ中身がちゃんと入っているなら作業場ディレクトリは不要なので削除して構いません。

画像付きの説明が必要な方は以下のサイトの「4. リポジトリのクローン」を参考にしてください。
https://note.com/ymtk00/n/n139cd8a74511

以上で全てが完了です。

あとは新規記事作成のコマンド

$ hugo new 記事の名前.md

や作成した新規記事をGithubに追加させるコマンド

$ git add .
$ git commit
$ git push

を覚えれば簡単にブログが作成できるはずです。
たぶん

以上、自分のためのHugoで簡単ブログの備忘録でした。