Featured image of post GithubPages + Hugo によるブログ開設（Part1）

GithubPages + Hugo によるブログ開設（Part1）

概要

GitHubPagesの機能を使ってブログ開設を行うための手順を残した記事です．全3パートでお送りします．

今回の記事では、環境構築からブログを公開するところまでを記します． 細かい設定などは次回の記事を参考にしてください．

※Gitとターミナル操作の知識が必要になります

準備

  1. GitHubのアカウントを開設する
  2. GitHubの自分のページから空の新規リポジトリを作成する
リポジトリ作成

公開設定はPublicでもPrivateでも問題ないです

1.Codespacesの環境構築

ローカルに環境を構築したくないので、Codespace上で記事を書けるように構築を行います。

作成したリポジトリの「Code」に[Create a codespace]というボタンからcodespaceを立ち上げます．

初期設定のままだと，必要なパッケージがないので設定を行います．

  1. .devcontainerという名前のディレクトリを作成する
  2. .devcontainerディレクトリにdevcontainer.jsonとDockerfileを用意する
1
2
3
4
5
6
7
8
9

// devcontainer.json

{
  "name": "codespace-for-hugo",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "postCreateCommand": "brew install hugo"
}

1
2
3
4
5
6
7
8

// Dockerfile
# ベースイメージとしてHomebrewがインストールされたイメージを使用
FROM homebrew/brew:latest

# 必要なパッケージのインストール
RUN brew install go
RUN brew install hugo
RUN brew install npm
  1. codespaceを再起動する
  2. codespaceのターミナルからhugo --helpと打ってhugoの説明が出てくればOK

あとは快適な環境に必要な拡張機能をcodespaceのマケプレからインストールしておいてください．

2. Hugoの初期設定 + テーマ導入

codespaceのターミナルからhugo new site <site-name>と打ち込んでください．<site-name>は任意の名前で大丈夫です．

すると，<site-name>という名前のディレクトリが生成されるので移動して，hugo serverと打ち込んでください． これで，デバッグ用のwebサーバーが起動します．「ポート」からブラウザで開けるようになるので，開いてみてください．

空のサイト

こんな感じで何も表示されませんが，何も設定していないので正常です．

次にブログのテーマを導入します． Hugo Themesから，良さげなテーマを見つけてください．

今回は，Github Starsが多かったStackというテーマを選択しました．

以下は,Stackの導入方法です．テーマごとに導入方法が異なるので公式ドキュメントをよく読んでください．

  1. 以下のコードを実行する
1
2
3

>> git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
>> cp -r themes/hugo-theme-stack/exampleSite/* .
>> rm hugo.toml //環境によってはconfig.tomlかも

これで，hugo.yamlという設定ファイルと必要なファイルが生成されます．

この状態で再度hugo serverと実行し，「ポート」から指定されたアドレスをブラウザで開いてください．

空のサイト

サンプルのサイトが表示されれば成功です．

しかし，まだ公開できる状態ではないので設定ファイルに少し修正を加えます．

1
2
3
4

# hugo.yaml

baseurl: https://<github username>.github.io/<repository name>
publishDir: ../docs

baseURLは，必ず<Githubのユーザ名>.github.io/<リポジトリ名>と指定してください． publishDirはビルド先のディレクトリを指定します．Github Pagesはリポジトリ直下もしくは/docsのみホームディレクトリとして指定できるため，/docsをビルド先に指定します．

ここまで完了したら，hugoと打ち込みビルドを行ってください．新たにdocsというディレクトリが生成されたら成功です．

成功したら，codespacesの左にある「ソース管理」からコミット + プッシュをしてください．

Githubの公開設定

GitHubのリポジトリに戻り「Setting」のタブを開きます．左のメニューから「Pages」を選択します．

  • Source = Deploy from a branch
  • Branch = main/docs

と設定して[Save]を押します．

ページ設定

体感5〜10分くらい待つと設定が反映されて，ブログが公開されるようになります．

公開完了

このように「Pages」の画面にURLが出てくれば設定完了です．

Google Search Consoleの設定

このままでは，検索しても引っかからないのでGoogleに開設したことを知らせます．

まず<site-name>/staticの下にrobots.txtというファイルを作成しビルドします．

1
2
3
4

// robots.txt
User-agent: *
Allow: /
Sitemap: https://<Github username>.github.io/<repository>/sitemap.xml

ブラウザから「google search console」と検索してください．

画面に従って進めていくと，URLを求められるのでhttps://<Github username>.github.io/<repository>/と入力します．他の項目は適当で大丈夫です．

全ての項目を入力すると，コンソール画面に移動します． 左のメニューから「URL検査」を選択しhttps://<Github username>.github.io/<repository>/と打ち込んでください．

「このURLは未登録です〜」的な表示が出てくるはずなので「インデックス登録をリクエスト」を押してURLのリクエストを行ってください．

URLリクエスト

次に左メニューの「サイトマップ」を選択してください． サイトマップの「新しいサイトマップの追加」からhttps://<Github username>.github.io/<repository>/sitemap.xmlと入力し[送信]を押します．

サイトマップ登録

サイトマップの登録は（たぶん）時間がかかるので「取得できませんでした」と表示されても，数日待ちます．

数日経っても「取得できませんでした」となっている場合には，https://<Github username>.github.io/<repository>/sitemap.xmlが存在するか確認してください．

終わりに

以上でGithub Pages + Hugo でブログを書く環境を構築するところから，公開までの手順が完了です． 後編で，実際の書き方やカスタマイズを説明したいと思います．

© 2025 M.J
Hugo で構築されています。
テーマ Stack は Jimmy によって設計されています。