HTML / 静的サイトジェネレータ / Hugo / HelloWorld(Windows)

HTML / 静的サイトジェネレータ / Hugo / HelloWorld(Windows)

例によりシンプルなサンプルを作っている人が居ないので。

Hugo 本体のインストール

Golang らしくクロスコンパイルでの1バイナリ生成ができるので Windows でもダウンロードして置くだけの楽々設計。

https://github.com/gohugoio/hugo/releases

このへんにバイナリがそのまま落ちているのでそれを使う。 今回使ったのは hugo_0.83.1_Windows-64bit.zip これ。

解凍して取り出した exe を適当なフォルダに設置。今回はソースのフォルダに直置きする。

> hugo.exe version
hugo v0.83.1-5AFE0A57 windows/amd64 BuildDate=2021-05-02T14:38:05Z VendorInfo=gohugoio

プロジェクト生成

このように打つ。

> hugo new site helloworld

Congratulations! Your new Hugo site is created in C:\Users\xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

helloworld フォルダができあがってそこに色々ファイルとかディレクトリが生成されていることがわかる。

サイトの基本設定を行う

できあがった、プロジェクトの中の config.toml に以下のように書く。

baseURL = "http://localhost/"
languageCode = "ja-JP"
title = "HelloWorld"

テーマを作る

>..\hugo new theme simple
Creating theme at C:\Users\xxxxxxxxxxxxxxxxxxxxxxx\helloworld\themes\simple

なんか関連するファイルがズラズラできる。

それを適用するために config.toml に追記する

baseURL = "http://localhost/"
languageCode = "ja-JP"
title = "HelloWorld"
theme = "simple"

作っられたディレクトリに layout というモノがありそこに default/single.html という空っぽのファイルがあるのでそこに適当に

hogehoge
{{ .Content }}

とでも書き込む。このブラケットの部分が実際のコンテンツとすり替わる。

ページを作る

対象のプロジェクトのディレクトリでこのように打つ。

>..\hugo new index.md
C:\Users\xxxxxxxxxxxxxxxxxx\helloworld\content\index.md created

そうすると指定したファイルが content 配下に作られる。 ここにさらにディレクトリを作るとそれがカテゴリとして認知されるようである。 今回はディレクトリ無し。

中にはこんな MD が最初から書き込まれている

---
title: ""
date: 2021-05-25T09:41:01+07:00
draft: true
---

なので、このように書き換える

---
title: "helloworld index"
date: 2021-05-25T09:41:01+07:00
draft: true
---
 
hello
================================================================================
 
world
--------------------------------------------------------------------------------
 
hugo hugo hugo

ビルドする

このようにするとビルドされる。

>..\hugo -D

生成された html が public 配下に生成される。テーマで作った index.html の内容と同じ内容の index.html が出力されているのがわかる。

これで簡易サーバが立ち上がって http://localhost:1313 でアクセスできる。

>..\hugo server -D

D オプションは draft もビルドするという意味である。

HTML がこのようになっているのが確認できた。

hogehoge
 
<h1 id="hello">hello</h1>
<h2 id="world">world</h2>
<p>hugo hugo hugo</p>
html/ssg/hugo/helloworld_windows.txt · 最終更新: 2021-05-25 12:57 by ore