Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@e99h2121

Tips: Hugoで静的サイト構築

各種静的サイト構築を試す遊びに興じてしまいそれぞれをメモしている。
3000文字Tips - 知ると便利なTipsをみんなへ届けよう にあやかりHugoで静的サイト構築までを書きます。

環境: Microsoft Windows 10 Home

公式

Install

githubのHugoで https://github.com/spf13/hugo/releases よりwindowsの64bitバージョンを選び、
C:\hugo_0.83.1_Windows-64bit に置いた。
Hugoのbinフォルダを作りexeを配置。パスを通す。

C:\hugo_0.83.1_Windows-64bit\bin\hugo.exe

set path=%path%;C:\hugo_0.83.1_Windows-64bit\bin;

hugo help などが使えることを確認。

Hugoの初期フォルダを作る。ここでは blog-hugo
cd C:\git\blog-hugo
hugo new site <サイト名> でサイトが作れる。

C:\git\blog-hugo>hugo new site InitialSites
Congratulations! Your new Hugo site is created in C:\git\blog-hugo\InitialSites.

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.

Theme

テーマをインストール。今回は github-style にした。

cd InitialSites
mkdir themes
cd themes

git clone https://github.com/MeiK2333/github-style
C:\git\blog-hugo\InitialSites>hugo new readme.md
C:\git\blog-hugo\InitialSites\content\readme.md created

起動

cd .. InitialSitesに戻り、以下で起動してみる。

hugo server -t github-style -D -w

https://localhost:1313/
サイトプレビュー停止には中断コマンドの Ctrl+C

config.toml の設定

config.toml
baseURL = "https://e99h2121.github.io/blog-hugo/"
publishDir = "docs"
languageCode = "ja-ja"
title = "e99h2121's New Hugo Site"
theme = "github-style"
googleAnalytics = "UA-1234567890"
pygmentsCodeFences = true
pygmentsUseClasses = true

[params]
  author = "yamada_n"
  description = ""
  github = "e99h2121"
  twitter = "e99h2121"
  url = "https://e99h2121.github.io/"
  rss = true
  lastmod = true
  location = "Japan"

  [[params.links]]
    title = "Link"
    href = "https://e99h2121.github.io/"

[frontmatter]
  lastmod = ["lastmod", ":fileModTime", ":default"]

記事を書く

hugo -t github-style で公開ファイルを生成。
cd C:\git\blog-hugo-src\InitialSites
例: hugo new post/newpost202106091417.md

C:\git\blog-hugo-src\InitialSites>hugo new post/newpost202106091417.md
C:\git\blog-hugo-src\InitialSites\content\post\newpost202106091417.md created

hugo server -t github-style -D -w で動作確認。
hugo -t github-style で生成。

config.toml
publishDir = "docs"

と、config.toml に設定することで、docs 以下を GitHubPages化しているリポジトリにコピーすればまずは手動公開できる。

https://github.com/<ユーザー名>/<リポジトリ名>/tree/main/docs

参考

静的サイトは群雄割拠ですね。色々比較軸があります。

以上です。

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What is going on with this article?