きっかけ
以前から「自分のサイト作って公開したいな～」と思っていました。が、結局どういうツールを使えば良いのかも分からず、何もできませんでした（静的サイト作るだけなのにFlutterを使おうとする始末）。
しかし、転機となる出来事は突然訪れました。
ある日いつものようにツイ廃をしていると、こんなサイトが流れてきました。
とある人の公式サイトなのですが…
なにこれ～！？！？超デザイン良い！！！！
同じやつ使えば自分も作れるかな！？！？！？
となり、自分でやってみることにしました。
で、なにを使ってんだ？
こういうときはページの一番下を見ると書いてあることもありますよね
今回の場合、
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で追跡しないファイルたちを設定するやつ）を作ってください
# 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を設定する
リポジトリの設定を変更
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 というファイルを作りましょう
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にアクセスしてみましょう！
参考にしたサイト