きっかけ
(作り方だけ知りたい方は飛ばしてください)
以前から「自分のサイト作って公開したいな～」と思っていました。が、結局どういうツールを使えば良いのかも分からず、何もできませんでした（静的サイト作るだけなのにFlutterを使おうとする始末）。
しかし、転機となる出来事は突然訪れました。
ある日いつものようにツイ廃をしていると、こんなサイトが流れてきました。
とある人の公式サイトなのですが…
なにこれ～！？！？超デザイン良い！！！！
同じやつ使えば自分も作れるかな！？！？！？
となり、自分でやってみることにしました。
で、これは何で作られてるんだ？
こういうときはページの一番下を見ると書いてあることもあります
今回の場合、
Powered by Hugo & Blowfish
と書いてあるので、HugoとBlowfishで書かれていることが分かります。
ということで、この記事ではHugo+Blowfish+GitHubPagesで静的サイトを作る方法と、自分が詰まった箇所を紹介していきます！！
HugoとBlowfishってなに？？
(あんまりWeb開発の知識はないので、テキトーなこと言ってたらすいません)
まず、Webサイトにはざっくり以下の２種類があります。
・静的サイト
・動的サイト
静的サイトはホームページやブログなどの「閲覧するだけ系」のサイトで、動的サイトはWebアプリなどの「ユーザーが操作する系」のサイトです。
で、静的サイトを作れるのが「静的サイトジェネレーター」です。
静的サイトジェネレーターには、Next.js(一番使われてる？)、Jekyll(GitHubPagesで使われてるやつ)、Hugo(今回使うやつ)などたくさんの種類があり、Hugoは割と有名らしいです。あとなんか速いらしいです(詳しいことは下の記事が参考になると思います)
この記事ではホスト先としてNetlifyがおすすめされていますが、やはりGitHubだけで完結できた方が楽だと思います(?)
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/リポジトリ名となります）
作れたら、まず設定を変えましょう
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しましょう。
そしたら、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で追跡しないファイルたちを設定するやつ）を作ってください
# 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ファイルを配置します
一番上のはこれで、
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行目のコメントアウトを外してやれば完成です！
theme = "blowfish" # UNCOMMENT THIS LINE
試しにhugo server -Dを実行し(エラーが出たら頑張って直してください☆)、
こんな感じのが出てきたら、
http://localhost:1313/ にアクセスすると、ページが表示されるはずです。
GitHubActionを設定する
.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にアクセスしてみましょう！
参考にしたサイト