今ブログを始めるならHugo*Vercelが良いかもしれない

Bloggerは流石に使いづらくなってきた。

要件

とりあえず無料で始めたい
マークダウンなどで簡単に書けるようにしたい
画像添付を簡単にしたい
自由度が高いほうがいい
広告だとかは勝手についてこないようにしたい
ソースコードをきれいに表示したい
サーバは日本に近いほうがいい

Hugoについて

静的サイトジェネレーター。
Markdownで記事を書い、HTMLに変換することができる。

Hugoのインストール

WindowsならWinGetでインストールできる。

winget install Hugo.Hugo.Extended
hugo version

Hugoの使い方

https://gohugo.io/getting-started/quick-start/

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

echo "theme = 'ananke'" >> hugo.toml
はpowershellだと動かないのでbash等を使うかhugo.tomlへ直接追記する。

hugo.toml

baseURL = 'https://example.org/'
languageCode = 'ja-jp'
title = 'My New Hugo Site'
theme = 'ananke'

http://localhost:1313
http://localhost:1313/sitemap.xml
http://localhost:1313/404.html
http://localhost:1313/categories/
http://localhost:1313/tags/

デフォルトで8ページほど生成される。

テーマ

あらかじめ用意されたデザインを利用することができる。

テーマは以下から選ぶことが可能。
https://themes.gohugo.io/

Kayalを試してみる
https://themes.gohugo.io/themes/kayal/

git submodule add -b main https://github.com/mnjm/kayal.git themes/kayal

themes\kayal\config
をコピーする。config内のhugo.tomlの先頭にテーマを追記する。


theme = "kayal"

コンテンツの追加

hugo new content content/posts/hello-wowld.md

content/posts以下にコンテンツが作成されていく。
マークダウンで記述して記事を作成することが可能。
デフォルトはドラフト状態で作成されすぐに公開されることはない。

+++
date = '2024-10-19T17:28:39+09:00'
draft = true
title = 'Hello Wowld'
+++
### Hello World2

This is **bold** text, and this is *emphasized* text.

hugo server -D

でドラフト込みのページも確認可能

まだまだ大量にできることがありそうだがHugoについてはいったんここまで。

Vercelについて

https://gohugo.io/hosting-and-deployment/
以下のコマンドで静的ファイルが生成されるため公開自体なら割となんでもいい。

hugo --gc

でpublicディレクトリに静的ファイルが生成されるので基本的にこれをデプロイするだけでよい。

当初はNetlifyの予定だったが日本のリージョンがないのでVercelで試してみる。

VercelでデプロイするにはVercel CLIを使用する方法とGitHub連携する方法がある。
今回はGitHub連携する方法を試してみる。

GitHubへプッシュ

詳細については割愛。

Vercelへデプロイする

https://vercel.com/
GitHubアカウントでサインアップするとスムーズに進めることができる。

Vercelでインポートプロジェクトを設定する。

Import Git Repository
→ 先ほどプッシュしたリポジトリ　を選択する

Configure Projectで各種設定を行う

Project Name: 任意のプロジェクト名
Framework Preset: Hugo
Build and Output Setting: Hugoを選択していればデフォルトで良い

Deploy

Hugoのビルドバージョンを指定する

場合によってはデプロイに成功してもサイトを表示したときにエラーになる場合がある。
ビルド時のバージョンが違うようなので環境変数を設定する。

https://vercel.com/[your-project]/settings/environment-variables
Settingsより
Key:HUGO_VERSION
Value:hugo versionで確認できるバージョン(-移行は不要x.y.zまでで良い)

以上でウェブサイトが公開できるはず。
https://memonote-seven.vercel.app/

参考

https://kt-graph.com/hugo_netlify_deploy_2_deploy/

https://www.nyan-da-full.com/posts/vercel-deploy-hugo-version/