Hugo github actions作業備忘録

githubにpushして、 contentに入っているファイルをhtmlにしたりpublicに移したりするなどの公 開に必要な作業を 自動で実行してもらうために、actionsを使用します。

作成したファイルをgithub.ioで公開するので、actionsを用いて自動deployする。

1$ hugo

と実行すると、作成したコンテンツファイルをpublic/に展開します。

このファイルをweb serverに上げれば公開できるようですが、手元にweb serverがないので、githubのお世話になります。

Hugoで作成したコンテンツをgithub_actionsでdeploy!

まずはgithubのサイトで作業

1. repository作成


tarj8253.github.io

小文字にすること。 [ユーザー名]に大文字が入っていてもURLは小文字になるので、間違いを防 ぐために小文字にしました。

2. リポジトリにおいて、actionsが動くように設定

(1) settings/pages/build and deployment/

source を github actionsにする

(2) Actions/general

  • Workflow permissions :Read and write permissionsをchk
  • Allow Github actions to create and approval requestsにchk
  • SAVEを押す

3. actionsのファイルを取得

actionsのworkflowはgithubのものを使用

Actions/All workflowからhugoを探してサンプルをlocalの.github/wolrkflows/hugo.yamlとして保存 (下記のとこ(Pages/Build and deploy)にもサンプルあり)

後述するトラブル発生時の解決方法として、ファイルを全部pushしてから、 actionsのファイルを設定すると、 push時のエラーやコンパイルの動きが見やすいので必要に応じて設定します。

また、自分の環境(mac/linux/win)をhugo.yaml内に書くようですが、 厳密に合わせる必要はないようです。(debian使ってますが、.yaml内にはubunt残ってます。)

4. tokenを取得

1.mainの一番上の段階 home,dashboardの右端にある写真のアイコン(緑のへんなやつ)をクリック

2.現れたメニューの中から Settings/Developer Settings/Personal access token/Tokens(Classic)

noteに:hugodeploy workflow: github actionsにchkout

Generate new token

ghp_*************************************

トークンをpasteして控えておく; リポジトリ削除しても、tokenは残っている

準備ができたら、localからhugoのソースを全部push

1git init
2git add .
3git commit -m "1st"
4git branch -M main
5git remote add origin https://github.com/[USERNAME]/[UNAME].github.io.git
6git push -u origin main
7Username for 'https://github.com': [USERNAME]
8Password for 'https://[USERNAME]@github.com': tokenのコードを貼り付け

問題がなければ、deployまで自動で行われ、[USERNAME].github.ioで公開され ます。

このときのトラブルメモ

  • .gitignoreに書いてあるファイルはgithub上へはpushされない!

  • local上のhugo severで見えても、github上では全く見えない!?

手元のマシンで構築できても、githubのhugoコンパイラ(?)ではエラーが出た! 文法少し違う?要注意!!

push時の自動actionsをやめて、pushしてからworkflow/actionsを動かすようにしたら エラーが見やすくなり、原因がわかった。

githubのサイトのリポジトリフォルダにあるActionsのタブメニューを押すと、workflowのログが見えます。

その他 actions-hugoのトラブル。

actionsに使うtomlはあちこちで紹介されていて、それぞれ微妙にちがうので どれを採用するか迷った。 githubのものを採用したが、メモとして残しておく。

githubのdocument peaceiris/actions-hugo

actions-hugoでの紹介

gh-pages.yml

asciidoctorのworkflowもここにあり!

HUGOのdocument, HUGO/host and deploy/Host on github pages.

hugoでの紹介

hugo.yamlを設定

Step 1
Create a GitHub repository.

Step 2
Push your local repository to GitHub.

Step 3
Visit your GitHub repository. From the main menu choose Settings >
Pages.
In the center of your screen you will see this:

BUILD and deployment
Source
 Deploy from a branch

Step 4

Change the Source to GitHub Actions.
The change is immediate; you do not have to press a Save button.
BUILD and deployment
Source
 GitHub Actions

Step 5

Create a file named hugo.yaml in a directory named .github/workflows.
mkdir -p .github/workflows
touch .github/workflows/hugo.yaml

Step 6
Copy and paste the YAML below into the file you created. Change the branch name and Hugo version as needed.

Step 7
Commit and push the change to your GitHub repository.

git add -A
git commit -m "Create hugo.yaml"
git push

Step 8

From GitHub’s main menu, choose Actions. You will see something like this:

All workflows
1 workflow run
[yellow]Add workflow

Step 9

When GitHub has finished building and deploying your site, the color of the status indicator will change to green.

All workflows
1 workflow run
[green]Add workflow

Step 10

Click on the commit message as shown above. You will see this:

hugo.yaml
build -- deloy
Under the deploy step, you will see a link to your live site.

In the future, whenever you push a change from your local repository,
GitHub will rebuild your site and deploy the changes.