Hugoでブログ構築 - Getting Startedをやってみる

# Hugoの検索
> mise search hugo
Tool           Description
hugo           The world’s fastest framework for building websites. https://github.com/gohugoio/hugo
hugo-extended  The world’s fastest framework for building websites. https://github.com/gohugoio/hugo/hugo-extended

# Hugoのバージョンを検索
> mise ls-remote hugo-extended
0.16
# ...省略
0.152.1
0.152.2

# 目的のバージョンをインストール
> mise install hugo-extended@0.152.2

# 99-percent-orange-driven-developmentという名前で新しいサイトを作成しています
# ./99-percent-orange-driven-developmentにフォルダが作成されます
> hugo new site 99-percent-orange-driven-development
Congratulations! Your new Hugo site was created in C:\Users\me\Documents\projects\99-percent-orange-driven-development.

Just a few more steps...

1. Change the current directory to C:\Users\me\Documents\projects\99-percent-orange-driven-development.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>\<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

> cd 99-percent-orange-driven-development

# Hugoのバージョンを固定します
> mise use hugo-extended@0.152.2
mise C:\Users\me\Documents\projects\99-percent-orange-driven-development\mise.toml tools: hugo-extended@0.152.2

# Gitリポジトリを初期化します
> git init
Initialized empty Git repository in C:/Users/me/Documents/projects/99-percent-orange-driven-development/.git/

# テーマをクローンします
> git submodule
 add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
Cloning into 'C:/Users/me/Documents/projects/99-percent-orange-driven-development/themes/ananke'...
remote: Enumerating objects: 4061, done.
remote: Counting objects: 100% (42/42), done.
remote: Compressing objects: 100% (26/26), done.
remote: Total 4061 (delta 28), reused 20 (delta 16), pack-reused 4019 (from 2)
Receiving objects: 100% (4061/4061), 6.19 MiB | 14.67 MiB/s, done.
Resolving deltas: 100% (1964/1964), done.
warning: in the working copy of '.gitmodules', LF will be replaced by CRLF the next time Git touches it

# hugo.tomlにテーマ名を追記します
> echo "theme = 'ananke'" >> hugo.toml

# ローカルサーバーを起動して、ブログを表示させてみる
> hugo server --buildDrafts

> hugo new content content/posts/2025/10/new-hugo-blog-1/index.html
Content "C:\\Users\\me\\Documents\\projects\\99-percent-orange-driven-development\\content\\posts\\2025\\10\\new-hugo-blog-1\\index.html" created

# ローカルサーバーを起動して、ブログを表示させてみる
> hugo server --buildDrafts --bind 0.0.0.0

# hugo.toml
baseURL = 'https://example.org/'
languageCode = 'ja'
title = '99% Orange Driven Development'
theme = 'ananke'

# content\posts\2025\10\new-hugo-blog-1\index.html
---
title: "Hugoでブログ構築 - Getting Startedをやってみる"
date: 2025-11-05T15:00:00+09:00
lastmod: 2025-11-05T15:00:00+09:00
draft: false
tags: ["Hugo"]
categories: ["Hugo"]
summary: |-
  ブログを作りたいけど大げさなことはしたくない。
  そんな時は、Hugoがきっと最適です。
  手書きのHTML・CSSをただ配信してくれればいい。
  けど、毎回ヘッダーなどを書くのはちょっと。。。を解消してくれます。
---

    <p>
      適当にファイルを編集して再度ローカルサーバーを起動します。
      ファイルの冒頭にdraft: trueとある場合は、<code>--buildDrafts</code>オプションを付けて起動しないと見れないようです。
      ちなみに、<code>--bind 0.0.0.0</code>オプションを付けると、同じネットワーク内の他のデバイスからもアクセスできるようになります。
      同じWifiに接続しているスマホなどからブログの見た目を確認したいときに便利です。
      （<code>localhost</code>としていた部分を<code>ipconfig</code>などで確認したローカルIPアドレスに置き換える必要があります）
{{< highlight pwsh >}}
# ローカルサーバーを起動して、ブログを表示させてみる
> hugo server --buildDrafts
{{< /highlight >}}
    </p>

{{</* highlight pwsh */>}}
# ローカルサーバーを起動して、ブログを表示させてみる
> hugo server --buildDrafts
{{</* /highlight */>}}