Hugoで新しいWebサイトを作成する
サイトの骨格を生成する
まずHugoをインストールし、hugoコマンドを使用できる環境を用意する。
そして、次のようにhugo new siteコマンドを使用すると、Webサイトの初期ファイル構成となるディレクトリの骨格を作成できる。
新しいWebサイト(my-site)を作成する
% hugo new site my-site
Congratulations! Your new Hugo site is created in /Users/user/hugo-tutorial/my-site.
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.
生成されるファイルは非常に簡単で、次のように2つのファイルといくつかのディレクトリだけである。
.
└── my-site
├── archetypes : 新しいページを作成するときのテンプレートファイル
│ └── default.md
├── config.toml : サイト全体の設定ファイル
├── content : コンテンツの保存場所。サイト内容となるMarkdown形式のファイルを置く。
├── data : サイト生成時に利用するデータ
├── layouts : レイアウトテンプレートの場所
├── public : 生成されたHTML、CSS、画像などの配置場所
├── static : 画像ファイルなど、サイト生成時にそのままコピーされるファイルを置く
└── themes : テーマディレクトリの場所。実際に使用するテーマはconfig.tomlで指定する。
この状態でサーバーを起動すると、“Page Not Found"と表示される。
サイトテーマのインストールと設定
Hugoで新しいWebサイトを生成した後は、外観を定義するためのテーマを1つ設定する。hugo new siteで作成したサイトにはテーマまでは生成されないため、サイトで公開されているテーマをダウンロードする必要がある。
ここではmainroadというテーマを適用してみる。
Hugoテーマは、themesディレクトリにテーマディレクトリを作成して保存すればよい。テーマごとにディレクトリを分けて保存するため、複数のテーマをあらかじめダウンロードしておくことができ、使用するテーマも簡単に変更できる。
また、テーマは主にGitHubで配布されているため、Gitがインストールされていれば、次のようにルートパスからgit cloneで簡単に適用できる。
% cd themes
% git clone https://github.com/vimux/mainroad
または、次のようにコマンドを一度に実行できる。
% git clone https://github.com/vimux/mainroad themes/mainroad
上記のコマンドでthemes/mainroadディレクトリが作成されたら、次にこのテーマを使用するようHugo設定ファイル(config.toml)へ次の内容を追加する。
config.toml
theme = "mainroad"
これでテーマ設定は完了である。
サイトのタイトルと言語設定
サイトの設定ファイルでは、テーマ設定以外にも、サイトタイトル(title)やサイト全体で使用する言語(languageCode)を設定する必要がある。
config.toml
baseURL = "http://devkuma.com/"
languageCode = "ko-kr"
title = "My New Hugo Site"
theme = "mainroad"
ポスト作成
ここでは例としてポストを1つ作成してみる。次のようにhugo newコマンドを実行すると、contentディレクトリの下にポストファイル(Markdownファイル)が自動的に生成される。コマンドはプロジェクトの最上位ディレクトリで実行する。
$ hugo new post/sample.md
これでcontent/post/sample.mdファイルが作成されるので、次の形式に修正する。
content/post/sample.md
---
title: "ポストタイトル"
date: 2023-05-05T23:19:43+09:00
#draft: true
---
ポスト本文
ポスト本文
ポスト本文
ヘッダー部分のdraft: true行を削除またはコメントアウトしないと、ページが出力されないため、その行はなくす必要がある。
Hugo Webサーバーの起動
Webサイトのテーマ設定と記事作成が終わったら、hugo serverコマンドを実行してWebサーバーを起動する。
% hugo server
Start building sites …
hugo v0.104.3+extended darwin/arm64 BuildDate=unknown
| EN
-------------------+-----
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 5
Processed images | 0
Aliases | 3
Sitemaps | 1
Cleaned | 0
Built in 7 ms
Watching for changes in /Users/user/hugo-tutorial/my-site/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/user/hugo-tutorial/my-site/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Hugoサーバーの起動にかかる時間はわずか7msである。非常に速い。
Hugoサーバーが起動した状態でWebブラウザからhttp://localhost:1313/へアクセスすると、サイトの最初のページが表示される。
以後はhugo newコマンドを使ってポストを続けて作成していけばよい。Hugoサーバーはcontentディレクトリの変更を監視し、ポストが作成または修正されると自動的に再読み込みされるため、Hugoサーバーは一度起動すれば再起動しなくてもよい。
ポストのカスタマイズ方法はテーマごとに少しずつ異なるため、詳しい内容は各テーマのサイトを参照する必要がある。