トップページ

ウェブサイト開設の手引き

はじめに

Hugoで作成したウェブサイトをGitHubで公開する方法を紹介します。HugoはMarkdownファイル(*.md)からHTMLファイル(*.html)を生成します。生成されたHTMLファイルをGitHubにアップロードすればウェブサイトが公開されます。HTMLファイルのアップロードにはGitを使用します。HugoおよびGitについては天才まくまくノートを参照してください。

HugoおよびGitのインストール

HugoおよびGitはコマンドラインで操作するアプリケーションです。ここではコマンドラインの環境としてWindowsターミナルとPowerShellを使用します。

以下のコマンドを入力してHugoおよびGitをインストールします。

# winget install Hugo.Hugo.Extended Git.Git

ウェブサイトの作成

Hugoで新規のWebサイトを作成するの説明にしたがってウェブサイトを作成します。

ウェブサイトの新規作成

最初にウェブサイトの雛形を作成します。ウェブサイトを構成するファイルがプロジェクトのディレクトリ(ここでは~/my_site)に生成されます。

# cd
# hugo new site my_site
Congratulations! Your new Hugo site was created in C:\Users\user\my_site.

Just a few more steps...

1. Change the current directory to C:\Users\user\my_site.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>\<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

表示された英語の手順にしたがって作業を進めていきます。

プロジェクトのディレクトリに移動します。Hugoのコマンドはプロジェクトのトップディレクトリで実行するようにしてください。

# cd my_site

テーマの設定

Hugoのウェブサイトにはテーマを指定する必要があります。既存のテーマを利用することもできますが、ここでは新たにテーマmy_themeを作成します。

# hugo new theme my_theme

作成したテーマを設定ファイルhugo.tomlで指定します。

# echo "theme = 'my_theme'" >>hugo.toml

記事ファイルの作成

記事ファイルhello.mdを作成します。

# hugo new posts/hello.md

contentディレクトリにhello.mdが生成されていることを確認します。

# ls content/posts

hello.mdをテキストエディタで開くと、ヘッダの部分にタイトルや日付が記述されているのが確認できます。ドラフトの指定は解除しておきます。

~/my_site/content/posts/hello.md
+++
title = 'Hello'
date = 2024-04-04T04:04:04+09:00
draft = false
+++
Hello!

ヘッダの下に記事の本文を書いて保存します。Markdownの記述方法についてはQiita マークダウン記法 一覧表・チートシートを参照してください。

ウェブサーバの起動

Hugoのウェブサーバを起動します。

# hugo server

ウェブブラウザからhttp://localhost:1313/にアクセスするとウェブサイトのトップページが表示され、作成した記事のリンクをクリックすると記事が表示されます。

通常はウェブサーバをバックグラウンドで起動させた状態で記事の更新作業を行います。contentディレクトリの内容が変更されるとウェブブラウザが自動的にリロードされます。

ウェブサーバをバックグラウンドで起動させる以下のような関数をファイルprofile.ps1に定義しておくといいでしょう。

profile.ps1
function Start-HugoServer {

    # すでに hugo サーバーが起動しているか確認
    $existing = Get-Process -Name "hugo" -ErrorAction SilentlyContinue
    if ($existing) {
        Write-Output "hugo はすでに起動しています(PID: $($existing.Id))"
        return
    }

    # サーバー起動スクリプト
    $script = {
        param($path)
        hugo -s "$path" server --port 1313 | Out-Null
    }

    # 非同期で起動
    $path = Join-Path -Path $HOME -ChildPath "my_site"
    Start-Job -ScriptBlock $script -ArgumentList $path | Out-Null
    Write-Output "hugo を起動しました: hugo -s ""$($path)"" server --port 1313"
}

HTMLファイルの生成

コマンドhugoを入力するとpublicディレクトリにウェブサイトのHTMLファイルが生成されます。

# hugo
Start building sites …
hugo v0.121.2-6d5b44305eaa9d0a157946492a6f319da38de154 windows/amd64 BuildDate=2024-01-05T12:21:15Z VendorInfo=gohugoio


                   | EN
-------------------+-----
  Pages            | 17
  Paginator pages  |  0
  Non-page files   |  1
  Static files     |  1
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 175 ms

以下のように記事ファイルを作成するとpublic/foo/index.htmlと出力されてしまいます。

# hugo new foo.md

この挙動が気に入らないのであれば以下の設定を追加します。

# echo "uglyurls = true" >>hugo.toml

ウェブサイトの公開

GitHubアカウントの取得

ウェブサイトを公開するにはGitHubのアカウントを取得する必要があります。ユーザ名とパスワードを指定すればアカウントを作成できます。当然ですが他の人が使用しているユーザ名を使用することはできません。以後user_nameは自身のユーザ名に置き換えてください。

SSHの設定

SSHはサーバとやりとりするデータを暗号化する仕組みです。詳細についてはsshコマンドの使い方: UNIXの部屋を参照してください。

アップロードのプロトコルには公開鍵認証のSSHを使用するのでその鍵が必要です。~/.sshにすでに鍵が存在する場合はそれを使用できます。

# ls ~/.ssh

鍵が存在しない場合は鍵を作成します。鍵のファイル名とパスフレーズ(鍵のパスワード)を聞かれますが、何も入力せずにそのままEnterキーを押してください。

# ssh-keygen -t rsa

秘密鍵~/.ssh/id_rsaと公開鍵~/.ssh/id_rsa.pubが生成されていることを確認します。

# ls ~/.ssh

公開鍵をクリップボードにコピーします。

# cat ~/.ssh/id_rsa.pub | clip

GitHubのアカウントにログインして公開鍵を登録します。右上隅にあるプロファイルの画像をクリックして [Settings] > [SSH and GPG keys] の[New SSH key]をクリックします。[Key type]のリストから[Authentication Key]を選択して、先ほどコピーした公開鍵を[Key]に貼り付けたら[Add SSH key]をクリックします。[Title]は空欄のままで構いません。

GitHubにSSHで接続できることを確認します。

# ssh -T git@github.com

リモートリポジトリの作成

GitHubのアカウントにログインしてリポジトリを作成します。ページの右上隅の[+]をクリックして[New repository]を選択します。[Repository name]にuser_name.github.ioを指定して[Create repository]をクリックします。

ローカルリポジトリの作成

GitHubのリポジトリ(以下リモートリポジトリ)にコンテンツをアップロードするにはローカルリポジトリが必要です。プロジェクトmy_siteのpublicディレクトリにローカルリポジトリを作成します。ローカルリポジトリの内容をリモートリポジトリにプッシュすればアップロードできます。

# cd ~/my_site/public
# git init

ユーザ名およびメールアドレスの設定

ローカルリポジトリで使用するユーザ名およびメールアドレスを設定します。USER_NAMEおよびUSER_E-MAILは自身のユーザ名とメールアドレスに置き換えてください。

# git config user.name USER_NAME
# git config user.email USER_E-MAIL

ブランチ名の変更

ローカルリポジトリで使用するブランチをmasterからmainに変更します。

# git branch -M main

Gitのデフォルトブランチはmasterですが、差別的な表現ということでGitHubではmasterからmainに変更されたようです。

リモートリポジトリの登録

リモートリポジトリをoriginとして参照できるようにします。リモートリポジトリのアドレスはgit@github.com:user_name/user_name.github.io.gitです。

# git remote add origin git@github.com:user_name/user_name.github.io.git

変更するにはgit remote set-url originとします。git remote rm originとすれば削除できます。

リモートリポジトリが正しく設定されていることを確認します。

# git remote -v

リモートリポジトリの初期化

リモートリポジトリを初期化するためにREADME.mdをローカルリポジトリにコミットしてリモートリポジトリにプッシュします。

# echo "# user_name.github.io" >>README.md
# git add README.md
# git commit -m "first commit"
# git push -u origin main

ウェブブラウザからリモートリポジトリにアクセスしてREADMEがコミットされていることを確認します。

最後に入力したコマンドgit push -u origin mainは-uオプションを付加したことにより以後git pushとして実行できるようになります。

ウェブサイトのアップロード

コンテンツをローカルリポジトリにコミットしてリモートリポジトリにプッシュします。

# git add .
# git commit -m "update"
# git push

リモートリポジトリのmainブランチにコンテンツを置いておくとウェブブラウザからhttps://user_name.github.io/というアドレスでアクセスできます。

更新日時の取得

HugoにはGitのログからファイルの更新日時を取得する機能があります。この機能を使用してウェブページのフッタに更新日時を表示してみます。

ファイルの更新日時を取得するにはプロジェクトのトップディレクトリ(ここでは~/my_site)にリポジトリを作成する必要があります。

# cd ~/my_site
# git init

このリポジトリはpublicディレクトリのリポジトリには影響しません。publicディレクトリはこのリポジトリの追跡対象にならないということです。

contentディレクトリのファイルだけを追跡対象にしたいので、その他のファイルおよびディレクトリを追跡対象から外します。~/my_site/.gitignoreに以下を記述します。

~/my_site/.gitignore
archetypes/
data/
layouts/
public/
resources/
static/
themes/
hugo.toml

ファイルの更新日時を取得するために以下を設定ファイル~/my_site/hugo.tomlに追加します。

~/my_site/hugo.toml
enableGitInfo = true

[frontmatter]
  date = [":fileModTime"]

フッタのテンプレート~/my_site/layouts/partials/footer.htmlに更新日時を挿入します。

~/my_site/layouts/partials/footer.html
<div id="date"><time datetime="{{ .Lastmod.Format "2006-01-02 15:04:05" }}">{{ .Lastmod.Format ( .Site.Params.dateformat | default "2006-01-02 15:04:05") }}</time></div>

リポジトリにコミットしてログを生成します。

# cd ~/my_site
# git add .
# git commit -m "update"

ウェブサーバを起動してウェブブラウザで記事のページを表示してみてください。フッタに更新日時が表示されているはずです。

ウェブサイトの更新

以下のようなシェルスクリプトを使用すればコマンド1つでウェブサイトの更新作業を終わらせることができます。

upload_content.ps1
$path_here = Get-Location
$path_to_site = Join-Path -Path $HOME -ChildPath "my_site"

Set-Location -Path $path_to_site

# 更新日時を取得するためにGitのログを生成
git add .
git commit -m "update"
$path = Join-Path -Path $path_to_site -ChildPath "config.toml"
Add-Content -Path $path -Value $null

Write-Host "------------------------------------------------------------"

# ウェブサイトのコンテンツを出力
hugo -s $path_to_site

Write-Host "------------------------------------------------------------"

# ウェブサイトのコンテンツをアップロード
$path = Join-Path -Path $path_to_site -ChildPath "public"
Set-Location -Path $path
git add .
git commit -m "update"
git push origin main

Set-Location -Path $path_here