Hugo+Blowfish+GitHubPagesで超かっこいいWebページをつくる

# きっかけ
以前から「自分のサイト作って公開したいな～」と思っていました。が、結局どういうツールを使えば良いのかも分からず、何もできませんでした（静的サイト作るだけなのにFlutterを使おうとする始末）。

しかし、転機となる出来事は突然訪れました。
ある日いつものようにツイ廃をしていると、こんなサイトが流れてきました。
とある人の公式サイトなのですが…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493828/9526ae8f-ed9f-2f8d-2c1c-41ca05c25df8.png)
https://kuroyei.com/ より

なにこれ～！？！？超デザイン良い！！！！
同じやつ使えば自分も作れるかな！？！？！？
となり、自分でやってみることにしました。

で、なにを使ってんだ？
こういうときはページの一番下を見ると書いてあることもありますよね
今回の場合、
*Powered by Hugo & Blowfish*
と書いてあるので、HugoとBlowfishで書かれていることが分かります。

**ということで、この記事では `Hugo+Blowfish+GitHubPages` で静的サイトを作る方法と、自分が詰まった箇所を紹介していきます！！**
# HugoとBlowfishってなに？？
:::note warn
(あんまりWeb系の知識ないので、テキトーなこと言ってたらすいません)
:::

まず、Webサイトにはざっくり以下の２種類があるらしいです

・静的サイト
・動的サイト

静的サイトはホームページやブログなどの「閲覧するだけ系」のサイトで、動的サイトはWebアプリなどの「ユーザーが操作する系」のサイトです

で、静的サイトを作れるのが「静的サイトジェネレーター」です

静的サイトジェネレーターには、Next.js(一番使われてる？)、Jekyll(GitHubPagesで使われてるやつ)、[Hugo](https://gohugo.io/)(今回使うやつ)などたくさんの種類があります
その中で、Hugoは割と有名らしいです。あとなんか速いらしいです(詳しいことは下の記事が参考になると思います)

https://qiita.com/peaceiris/items/ef38cc2a4b5565d0dd7c#hugo-%E3%81%A8%E3%81%AF

この記事ではホスト先としてNetlifyがおすすめされていますが、やはりGitHubだけで完結できた方が楽だと思います(?)←Netlify試してから言え
あとgithub.ioの方が謎の安心感あるしね

Hugoの話に戻しますが、Hugoではさまざまな「[テーマ](https://themes.gohugo.io/)」なるものが利用でき、それぞれが十人十色のデザイン・機能を持っています。

その中の一つが[Blowfish](https://blowfish.page/ja/)で、多機能で速いっぽいです(他のテーマ試してないのでなんとも言えない)。

ということでインストールしたくなりましたよね？(圧)
# インストール
## Hugo
公式サイト参照。自分の場合、Wingetだとうまくいかなかったです

https://gohugo.io/installation/

Windowsなら `choco install hugo-extended`、
Macなら `brew install hugo` で行けると思います
## Blowfish tools
```
npx blowfish-tools
```
でBlowfish Toolsというのが使え、これを使えばいろいろ簡単にできます！
まぁHugoコマンド使えば一応同じようなことはできるらしいです
# サイトを作る
## GitHubリポジトリを作る
リポジトリ名は `ユーザー名.github.io` にすると良いです（これ以外にした場合、URLは `ユーザー名.github.io/リポジトリ名` となります）

そしたら、VSCodeとかGitHubDesktopとかでCloneしましょう
## セットアップする
`npx blowfish-tools` でツールを起動しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493828/ed69d892-1fe9-cd42-b27c-66f8ce392dfa.png)
こんな風に出てくると思うので、一番上を選択して（上下矢印キーで動かせる）Enterを押します

※ちなみに２個目を押すとBlowfishが用意してくれているテンプレートのサイトを作れます、こっちをいじっていくほうが楽かもしれない

`? Where do you want to generate your website (. for current folder)?` とどのディレクトリに作るか聞かれるので、`.` と打ちましょう。

`✖ Directory already exists and is not empty.`（=空のディレクトリにしろ！）と怒られたら、テキトーなフォルダに作って、中身を全てコピーしましょう。

ちなみに、`hugo new site [ディレクトリ名]` でも同じことができるはずです。

## .gitignoreの設定
以下のように`.gitignore`（gitで追跡しないファイルたちを設定するやつ）を作ってください
```.gitignore
# Generated files by hugo
/public/
/resources/_gen/
/assets/jsconfig.json
hugo_stats.json

# Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux

# Temporary lock file while building
/.hugo_build.lock

# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon

# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db

# Dump file
*.stackdump

# Folder config file
[Dd]esktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp

# Windows shortcuts
*.lnk

*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

# KDE directory preferences
.directory

# Linux trash folder which might appear on any partition or disk
.Trash-*

# .nfs files are created when an open file is removed but is still being accessed
.nfs*

*.tmp

# Word temporary
~$*.doc*

# Word Auto Backup File
Backup of *.doc*

# Excel temporary
~$*.xls*

# Excel Backup File
*.xlk

# PowerPoint temporary
~$*.ppt*

# Visio autosave temporary files
*.~vsd*

# Draft Markdown
*draft*.md
```
## Blowfishを配置
ここで、`themes/blowfish`にいっぱいファイルがあるか確認しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493828/a5c14664-6349-4843-463f-1aa25fc4cc57.png)
なかったら、
#### blowfish toolsでインストール
`npx blowfish-tools'
#### git submoduleでインストール
```shell
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
```
#### 手動インストール(自分はこれ)
手動インストール(https://github.com/nunocoracao/blowfish/releases/latest)
フォルダ名を`blowfish-*.**.*`から`blowfish`に変更
`themes/`に配置

## 初期設定
`config/_default`(なければ作る)に、以下の7つのtomlファイルを配置します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493828/2da1d071-05b7-5d00-a403-c06917104c62.png)
一番上のはこれで、
```config/_default/config.toml
theme = "blowfish"
#baseURL = "https://???.github.io"　#←設定して
languageCode = "ja"
defaultContentLanguage = "ja"

#記事にHTMLを書きたい人は下のコメントアウト外して
#[markup]
#  [markup.goldmark]
#    [markup.goldmark.renderer]
#      unsafe = true

```
あとは以下のGitHubからダウンロードorコピペすればOKです。

https://github.com/nunocoracao/blowfish/tree/main/config/_default

そしたらファイル名のenのところをjaにしましょう

最後に、hugo.tomlの5行目のコメントアウトを外してやれば完成です！
```config/_default/hugo.toml
theme = "blowfish" # UNCOMMENT THIS LINE
```
試しに`hugo server -D`を実行し(エラーが出たら頑張って直してください☆)、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493828/25957443-eaa2-59c9-cc7a-e364fbcfea69.png)
こんな感じのが出てきたら、
http://localhost:1313/ にアクセスすると、ページが表示されるはずです。
# GitHubActionを設定する
## リポジトリの設定を変更
`Settings → Pages → Build and deployment` のSourceは `Deploy from a branch` のままで、Branchは `main・/root` にして、Saveしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493828/26137930-e610-29d0-0531-7799c603d143.png)

ここからが大事なのですが、必ず「Permission(権限)」を変更してください
`Settings → Actions → General → Workflow permissions(一番下)` を上の `
Read and write permissions` にして、Saveしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493828/79a05e3b-a47e-9324-8a61-dbb7376974a8.png)
`.github/workflows` というフォルダを作り、その中に `pages.yml` というファイルを作りましょう
```.github/workflows/pages.yml
name: GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
          user_name: 'github-actions[bot]'
          user_email: 'github-actions[bot]@users.noreply.github.com'
```
そうするとgh-pagesブランチができているはず（できていなかったら自分で作ればOK）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493828/47f2d09b-4177-c27d-9016-1c83c56e4854.png)
先程のPagesの設定から、Branchをgh-pagesに設定すれば完成です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493828/aa45dc26-65f7-4249-06ed-9d49acbc0bce.png)

下のように、デプロイに成功しているのを確認して…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493828/c0246bb7-4cb0-cc7f-8df6-bbd0d696499b.png)

ユーザー名.github.ioにアクセスしてみましょう！

# 参考にしたサイト

https://zenn.dev/tamanegi/articles/5a44fbcda0f7c5

https://qiita.com/peaceiris/items/ef38cc2a4b5565d0dd7c#netlify-%E3%81%8C%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1

https://zenn.dev/jolly96k/articles/f8d0e5eb247bf0

https://blowfish.page/ja/

https://gohugo.io/