背景
github pagesでなんか静的サイトをホスティングしたいなと思い、Hugoを試したみたのでメモ.
ただのメモ書き
チュートリアル
- https://gohugo.io/getting-started/quick-start/
内容
とりあえず動かす
Install
$ brew install hugo
Check
$ hugo version
Hugo Static Site Generator v0.32.4 darwin/amd64 BuildDate: 2018-01-13T15:56:11+09:00
project作成
$ hugo new site quickstart
$ cd quickstart
$ git init
$ curl -o .gitignore https://raw.githubusercontent.com/github/gitignore/master/Go.gitignore
$ git add .
$ git commit -m "init"
テーマ追加
$ git clone https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
$ echo 'theme = "ananke"' >> config.toml
記事追加
$ hugo new posts/my-first-post.md
サーバー起動
$ hugo server -D &
$ open http://localhost:1313/
テーマを変える
$ git clone https://github.com/spf13/hyde themes/hyde
$ hugo -t hyde
$ hugo server -D
テーマを作る
$ hugo new theme sample
$ tree themes ~/github/mattak/mattak.github.com/quickstart [master|mattak|TakumanoMacBook-Pro.local]
themes
└── sample
├── LICENSE.md
├── archetypes
│ └── default.md
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── footer.html
│ └── header.html
├── static
│ ├── css
│ └── js
└── theme.toml
8 directories, 9 files
thema適用してみる
$ hugo new post/my-first-post.md
$ hugo -t sample
$ hugo server -t sample
このままだとなにも表示されない.
適当にlayoutを当ててみる
themes/sample/layouts/_default/single.html
{{ partial "header.html" . }}
{{ .Content }}
{{ partial "footer.html" . }}
themes/sample/layouts/partials/header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>{{ .Title }}</title>
</head>
<body>
<div>header</div>
themes/sample/layouts/partials/footer.html
<footer id="footer">footer</footer>
</body>
</html>
draftをfalseにしておく
content/post/my-first-post.md
---
title: "My First Post"
date: 2018-01-16T23:53:02+09:00
draft: false
---
hello world!!
実行
$ hugo server -t sample
できた！ あとはレイアウトの中身を整えていけばどんなサイトでも作れそう