hugoでサイトを作るメモ

こんにちは

去年買ったS22のディスプレイに焼き付きを発見して絶望中、やなぎです。
メインスマホをNothing Phone(2a)にしようか悩み中です。
Felicaにも対応したようなので、日本でも十分使えそうです!!

hugo

hugoは静的サイトジェネレーターです。もう知ってる？はいそうですよね。
とりあえずインストールから公開までこの記事で解説していきます。

インストール

Windows環境もMacもあんまり変わらないと思います。

Windows

wingetを使うのが一番手軽でしょう。次のコマンドを実行。

1

winget install Hugo.Hugo.Extended

もし不明なコマンドって言われたら、ストアを開いて「アプリインストーラー」と検索。

これをインストールしましょう。

Mac

Macはbrewからインストールできます。
そもそもこういうのに興味ある人は導入済みだと思うのでbrewについては省略。

1

brew install hugo

これでOKです。

ほかに必要かも？なソフト

そのほかにはVSCodeとかgitとかですかね。まぁ入っているでしょう。

サイトを作る

サイトを作ります。まぁローカルにですけど。
次のコマンドを実行。

1

hugo new site <名前> --format yaml

例えば「yanagilog」って名前のサイトの場合は

1

hugo new site yanagilog --format yaml

こうなります。
実行するとカレントディレクトリ内に指定した名前のディレクトリが作成されますので
cdコマンドでそこに移動しましょう。
なお、--format yamlは設定ファイルとかにyamlを使うという設定。
デフォルトはtomlですがyamlがいいのでyaml。

設定を編集

まずvscodeでディレクトリを開きます。

1

code .

設定ファイルの名前は hugo.yaml とか config.yaml だと思います。(私はconfig.yaml)
次のように編集、追記してね。

1
2
3


baseurl: /
languageCode: ja
title: サイトのタイトル

テーマを選ぶ

hugoにはテーマがあります。デフォルトだとサイトらしいものは表示されないので、、、
とりあえず当サイトでも使っている Stack というテーマを。
私は公開用のリポジトリを非公開(Private)にしたいので、テーマのリポジトリをzipとしてダウンロードしてファイルを配置しますが、
特別そのようなことをしない人は次のコマンドをサイトのルートで実行してください。

1

git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

次に設定に使うテーマを書きましょう。次の内容を設定ファイルに追記。

1

theme: hugo-theme-stack

プレビュー

ここで一度サイトの見た目とかを確認してみましょうか!!
サイトのルートで次を実行。

1

hugo serve -D

すると次のように出てくると思う。

ブラウザで localhost:1313 にアクセスしてみましょう。
次のように表示されていれば大丈夫です!!

サーバーはCtrl+Cで終了できます。

記事の設定

次はいよいよコンテンツ、つまり記事を書いていきます。
ですがその前に記事のテンプレートみたいなのを少しだけ弄ります。
archetypes\default.md というファイルを開きます。デフォルトでは次の内容でしょう。

1
2
3
4
5


+++
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
date = {{ .Date }}
draft = true
+++

これでも機能はしますけど!!yamlじゃないし、いろいろ足りないので、変えます!!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


---
title: '{{ replace .File.ContentBaseName "-" " " | title }}'
date: {{ .Date }}
slug: ''
description: ''
draft: true 
categories:
    - Blog
tags:
    - tag
---

最終的に上のようになりました。 +++から---にしてyaml形式で指定できるように。
slugとdescription、タグとカテゴリもとりあえず入れてくれるように。

記事の追加

さて記事を書いていきますよ～!!
次のコマンドを実行しましょう。

1

hugo new content post/<記事のタイトル>/index.md

このときの注意ですが、クオーテーションされていないので空白を使えない、日本語は使わないほうがよさそう
ってことですかね。タイトル自体はマークダウンファイルで設定可能なので、意味が分かる簡単な英単語くらいにしておくのがいいと思う。

こうなればOK

もういちど hugo serve -D すると…

ちゃんと反映されていますね!!
あとは適当に中身を書いていくだけ!!
書き終わったら draft: true を draft: false にしてください!!

ブログの公開

手順としては、こう。

リポジトリをgithubで作成
CloudflarePagesで公開設定
みんなのもとに新鮮なコンテンツが!!

リポジトリを作る

VSCodeはgithubのリポジトリをソフト内で作れるので楽です。
サイトのルートで

1

git init

しまして、イニシャライズします。
するとサイドバーのソースの管理のとこに通知みたいなのが付きます。

適当にコメントをつけてコミットします。

ブランチの発行が出たらそれをクリックして

こんなダイアログが出ますので、好きなほうを選択してください。
私はPrivateを。

しばらく待つと…

こんな通知が出ます。これでOK!!

Cloudflare Pagesで公開設定

ドメインはいりません。アカウントの作成、決済情報の登録などは済ませておいてください。
サイドバーの Workers&Pages を開きます。

そしたら「アプリケーションの作成」をクリック

「Pages」を選択

場合によってはアカウントを追加して、さっき作ったリポジトリを選択。

「セットアップの開始」をクリック。
スクショが面倒になってきましたので文面だけになります。すみません。

プロジェクト名 : プロジェクト名です。またサイトのURLが<プロジェクト名>.pages.devになります。
プロダクションブランチ : 本番環境のブランチを選択できます。今回はmainです。
ビルドの設定>フレームワークプリセット : ドロップダウンからhugoを選択
ビルドの設定>ビルドコマンド : ビルド時のコマンドを指定できる。今回はデフォルトの hugo です。
ビルドの設定>フレームワークプリセット : ビルドされたファイルの場所。デフォルトでOK。

次に 環境変数 (アドバンスド) を開いて、変数を追加します。変数名は HUGO_VERSION、値は現時点では 0.123.8 です。
これはビルド時のhugoのバージョンを指定するもので、デフォルトだと結構古めなので指定してあげます。
ローカルのバージョンは hugo version で確認可能です。
一通り設定し終わったら、「保存してデプロイする」をクリック。

しばらく待てば…

お疲れ様です!デプロイされコンテンツを見れるようになりました!!

みんなのもとに新鮮なコンテンツが!!

アクセスしてみると…

はい、ちゃんとできてますね!!

(Stack限定)フォントダサい問題解決

このテーマ、たぶん中国の方が開発されているので、フォントが中国な感じになっています…
日本語フォントも使いたいじゃんってことで、修正していく。

assets\scss\custom.scssを作成&開きます。
そして次を追記します。

1
2
3
4
5
6


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
    --ja-font-family: 'Inter', 'Noto Sans JP';
    --base-font-family: var(--ja-font-family), sans-serif;
}

これで日本語が怪しかったサイトが、、、

こんな感じになるよ!!
この例では英数字にInter、日本語にNotoSansJPを使っています。
無難に読みやすく、違和感のないフォントだと思うのですが。どうでしょうか？

更新

更新なんかは、本番環境のブランチへコミットすれば自動でデプロイしてくれます。
月500回までですが、正直そんなにするかな？という感じ。
なのでまぁ確認など終えてからコミットすればあとはいい感じにやってくれます。

何から何まで至れり尽くせりなサービス。

以上

以上です。後半眠くなって雑になった。
でもできると思う。多分。