Hugoとは
Hugoは、Goで書かれたSSG(Static Site Generator)。
- The world’s fastest framework for building websites ということで、とにかくビルドが早い (模様)。
- GitHub Pagesと連携して簡単にサイトを作成することができる
- Kubernetesの公式ドキュメントも使っている (Kubernetesのドキュメント
)
内容
- 基本はQuickStart をベースに
- GitHub Pagesの設定をして公開 (https://nakamasato.github.io/hugo-sample)
- Google Analyticsの設定
hugoのインストール
Macの場合 brewでインストール可
brew install hugo
サイト作成
1. hugoを初期化
新しくプロジェクトを作成する場合 (Dirも作成したい場合)
hugo new site hugo-sample
git init # Gitで管理することが多いはずなのでgit initしておく
既存のProjectに追加する場合
既存Directoryに入って --forceを使えばよい。 (以下の例では、docsの下に今回作成するサイトをまとめておきたい場合。そうでない場合は、 .直接CurrentDirを指定すれば良い)
cd /path/to/your/repo
hugo new site docs --force
何れにせよ、以下のような結果が出るので、基本は示された3つのステップを行っていくだけ。
Congratulations! Your new Hugo site is created in /Users/masato-naka/repos/nakamasato/hugo-sample.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
この時点でこのようにdirectoryとファイルが作成される
tree .
.
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
6 directories, 2 files
2. Themeを追加
submoduleとして、 themes 以下に themeを配置。(今回はこちら: https://themes.gohugo.io/themes/hugo-whisper-theme/)
git submodule add https://github.com/zerostaticthemes/hugo-whisper-theme.git themes/hugo-whisper-theme
- Submoduleではなくcloneでも可
- 既存のプロジェクトでdocs以下にサイトの情報は全て入れたい場合は、 submoduleの先を
docs/themes/hugo-whisper-themeなどにするといい
± tree -L 3
.
└── docs
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
└── hugo-whisper-theme
8 directories, 2 files
3. exampleSiteを使って試す
cp -a themes/hugo-whisper-theme/exampleSite/. .
docsの中にthemesを入れていても、gitのrootDirに入れていても同様にできる。
config.tomlの更新
themesDir: 上で themes以下に themeをおいたので変更する
themesDir = "themes"
4. ローカルで実行
hugo server -D # -D include content marked as draft
http://localhost:1313/ で確認できるようになる
5. 自分でファイルを変更して自分用にする
- config.toml
- contents
などを更新して自分のサイトを作成
6. GitHub Pagesなどで公開
GitHub Actionsを追加
https://github.com/peaceiris/actions-hugo こういう便利なものがあるのでこちらを使用。
name: github-pages
on:
push:
branches:
- main # Set a branch to deploy
pull_request:
jobs:
deploy:
runs-on: ubuntu-20.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v2
with:
submodules: true # Fetch Hugo themes (true OR recursive)
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '0.88.0'
extended: true
- name: Build
# working-directory: docs # docs以下にsiteをおいた場合
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public # docs以下にsiteをおいた場合 ./docs/publicに変更が必要
if: ${{ github.ref == 'refs/heads/main' }} は一度PR時にコメントアウトして、GitHub Actionsが gh-pagesというブランチにBuild後の結果をPushできていることを確認してから戻すと、mainブランチにPush後に公開できてないのを発見することが減る。
GitHub Pagesの設定
- 今回は、
gh-pagesブランチの root以下 (GitHub Actionsの出力がRoot以下なので)を指定。 -
config.tomlのbaseURLを自分のrepoの名前<github account>.github.io/<repo>など書く。custom domainの場合は設定をすでにしてあれば、<custom domain>/<repo>のように書ける
https://nakamasato.github.io/hugo-sample でもcustom domainに飛ぶようにできた!
7. Google Analyticsを設定
Google Analyticsから設定情報を取得 (今回はGA4)
Configure Google Analyticsにもあるが、https://github.com/gohugoio/hugo/releases/tag/v0.82.0以降では、 Add support for Google Analytics v4 ba16a14c @djatwood がマージされていて単純に googleAnalyticsに設定すれば良くなっている。
が、テーマによって使っているtemplateが違う可能性があるので、今回使ってthemeだと
google-analytics.htmlのように、.Site.Params.google_analytics_idで指定する用になっていた。(詳細は調べていない)
{{- if .Site.IsServer -}}
<!-- Dont add Google analytics to localhost -->
{{ else }}
{{ $gid := (getenv "HUGO_GOOGLE_ANALYTICS_ID") }}
{{ if $gid }}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{- $gid -}}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{- $gid -}}');
</script>
{{ else }}
{{ if .Site.Params.google_analytics_id }}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{- .Site.Params.google_analytics_id -}}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{- .Site.Params.google_analytics_id -}}');
</script>
{{ end }}
{{ end}}
{{ end }}
デプロイして、GA上で確認 (baseURLの設定を間違えて 404が何回か出たが取れるようになった。)
ToDo
- analytics.jsがまだ読み込まれてるっぽいので原因確認