Installation
# macOS
$ brew install hugo
# Ubuntu
$ sudo apt-get install hugo
Operations
Refer to https://gohugo.io/getting-started/quick-start/.
创建新站点
# 创建新站点
$ hugo new site "$mysite"
主题
First, download the theme from GitHub and add it to your site’s themes
directory:
cd quickstart
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
Then, add the theme to the site configuration:
echo 'theme = "ananke"' >> config.toml
创建文章
$ hugo new index.md
启动 Hugo Server
- ‘hugo server’ will avoid writing the rendered and served content to disk, preferring to store it in memory.
# include content marked as draft
$ hugo server -D
编译生成可部署静态文件
The most common usage is probably to run hugo
with your current directory being the input directory.
This generates your website to the public/
directory by default, although you can customize the output directory in your site configuration by changing the publishDir
field.
# include content marked as draft
$ hugo -D
Draft, Future, and Expired Content
Hugo allows you to set draft
, publishdate
, and even expirydate
in your content’s front matter. By default, Hugo will not publish:
- Content with a future
publishdate
value - Content with
draft: true
status - Content with a past
expirydate
value
All three of these can be overridden during both local development and deployment by adding the following flags to hugo
and hugo server
, respectively, or by changing the boolean values assigned to the fields of the same name (without --
) in your configuration:
--buildFuture
--buildDrafts
--buildExpired
Directory Structure
文档中的设置
markdown文档中的设置(Front Matter)
Front matter allows you to keep metadata attached to an instance of a content type—i.e., embedded inside a content file—and is one of the many features that gives Hugo its strength.
https://gohugo.io/content-management/front-matter/
slug
appears as the tail of the output URL. A value specified in front matter will override the segment of the URL based on the filename.
url - 重写当前markdown文档对应页面的URL
the full path to the content from the web root. It makes no assumptions about the path of the content file. It also ignores any language prefixes of the multilingual feature.
Theme
- 不错的
- 有目录
- 文字歪的,有点奇怪
管理静态资源
s3配置
https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html
$ s3cmd sync --recursive "." s3://swtestiznzwbzxihzi/ --delete-removed
一个idea
By default, the static/
directory in the site project is used for all static files (e.g. stylesheets, JavaScript, images). The static files are served on the site root path (eg. if you have the file static/image.png
you can access it using http://{server-url}/image.png
, to include it in a document you can use ![Example image](/image.png) )
.
https://gohugo.io/content-management/static-files/
因此,在generate时,把所有.md中的图片路径都override成/<….png>
然后存储图片文件对应的assets文件夹复制到./publish/.static下即可。
页面生成
hugo生成页面的时候有以下一些流程:
-
copy静态资源到public文件夹,包括:
- copy theme/static/* 到 public/下
- copy static/* 到 public/下
-
遍历所有content/下所有文件
- 获取文件头信息,并把正文markdown转换为html
-
渲染生成每个页面对应的正文页面,生成文件夹对应的列表页面,生成分类页面,生成主页
- 每个静态页面生成的时候需要两个东西,一个模版,一个结构体数据。
Official
-
将Markdown渲染
-
Code Highlighter
- Hugo uses Chroma as its code highlighter.
- https://gohugo.io/content-management/syntax-highlighting/
-
Summary
-
Syntax
with
:https://gohugo.io/functions/with/
-
Variables:https://gohugo.io/templates/introduction/#variables
-
Page Variables:https://gohugo.io/variables/page/#page-variables
- .Title
- .Data
- .Content
-
-
.Date.Format:https://gohugo.io/functions/format/
-
Config File https://gohugo.io/getting-started/configuration/
-
Git Info
-
Template: https://gohugo.io/templates/introduction/
- Page V
Reference
- https://gohugo.io/
- https://juju.one/hugo-static-site-generator/
- https://gohugo.io/getting-started/installing/