きっかけ

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

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

https://kuroyei.com/ より

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

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

ということで、この記事では Hugo+Blowfish+GitHubPages で静的サイトを作る方法と、自分が詰まった箇所を紹介していきます！！

HugoとBlowfishってなに？？

(あんまりWeb系の知識ないので、テキトーなこと言ってたらすいません)

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

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

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

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

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

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

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

その中の一つがBlowfishで、多機能で速いっぽいです(他のテーマ試してないのでなんとも言えない)。

ということでインストールしたくなりましたよね？(圧)

インストール

Hugo

公式サイト参照。自分の場合、Wingetだとうまくいかなかったです

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 でツールを起動しましょう。

こんな風に出てくると思うので、一番上を選択して（上下矢印キーで動かせる）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にいっぱいファイルがあるか確認しましょう。

なかったら、

blowfish toolsでインストール

`npx blowfish-tools'

git submoduleでインストール

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ファイルを配置します

一番上のはこれで、

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です。

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

最後に、hugo.tomlの5行目のコメントアウトを外してやれば完成です！

config/_default/hugo.toml

theme = "blowfish" # UNCOMMENT THIS LINE

試しにhugo server -Dを実行し(エラーが出たら頑張って直してください☆)、

こんな感じのが出てきたら、
http://localhost:1313/ にアクセスすると、ページが表示されるはずです。

GitHubActionを設定する

リポジトリの設定を変更

Settings → Pages → Build and deployment のSourceは Deploy from a branch のままで、Branchは main・/root にして、Saveしましょう。

ここからが大事なのですが、必ず「Permission(権限)」を変更してください
Settings → Actions → General → Workflow permissions(一番下) を上の Read and write permissions にして、Saveしましょう。

.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）

先程のPagesの設定から、Branchをgh-pagesに設定すれば完成です！

下のように、デプロイに成功しているのを確認して…

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

参考にしたサイト