Hugo 领有超快的速度,弱小的内容治理和弱小的模板语言,使其非常适合各种动态网站。能够轻松装置在 macOS,Linux,Windows 等平台上,在开发过程中应用 LiveReload
可即时渲染更改
一、装置 Hugo
Mac 上装置 HUGO
,很简略,通过 brew
能够疾速装置
brew install hugo
查看装置版本信息
hugo version
二、应用 Hugo
1、创立网站
hugo new site iChochy
创立
其中
iChochy
为你的博客目录
目录构造
iChochy
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
2、增加主题
a、下载主题
以 hyde
主题为例 https://github.com/spf13/hyde
间接下载主题,放到 themes
目录中,或通过 git
形式增加主题
git submodule add https://github.com/spf13/hyde.git themes/hyde
b、批改配置
echo 'theme ="hyde"' >> config.toml
config.toml
文件内容
baseURL = "https://ichochy.com/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hyde"
目录构造
iChochy
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
└── hyde
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── go.mod
├── images
│ ├── screenshot.png
│ └── tn.png
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── head.html
│ ├── head_fonts.html
│ ├── hook_head_end.html
│ └── sidebar.html
├── static
│ ├── apple-touch-icon-144-precomposed.png
│ ├── css
│ │ ├── hyde.css
│ │ ├── poole.css
│ │ ├── print.css
│ │ └── syntax.css
│ └── favicon.png
└── theme.toml
3、编写内容
新建文章
hugo new posts/HelloWorld.md
新建
注:以 archetypes/default.md
为模版创立
编写文章
vim content/posts/HelloWorld.md
HelloWorld.md
文件内容
---
title: "HelloWorld"
date: 2020-08-02T21:47:48+08:00
draft: true
---
### HelloWorld
https://ichochy.com
预览文章
hugo server -D
启动服务,拜访 http://localhost:1313
目录构造
iChochy
├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── posts
│ └── HelloWorld.md
├── data
├── layouts
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
└── themes
└── hyde
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── go.mod
├── images
│ ├── screenshot.png
│ └── tn.png
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── head.html
│ ├── head_fonts.html
│ ├── hook_head_end.html
│ └── sidebar.html
├── static
│ ├── apple-touch-icon-144-precomposed.png
│ ├── css
│ │ ├── hyde.css
│ │ ├── poole.css
│ │ ├── print.css
│ │ └── syntax.css
│ └── favicon.png
└── theme.toml
部署
批改部署目录
批改 config.toml
文件
1、批改 bashURL
的部署域名
2、增加 publishDir = "docs"
,指定部署目录为 docs
config.toml
文件内容
baseURL = "https://ichochy.com/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hyde"
publishDir = "docs"
生成动态文件
hugo -D
生成动态文件
目录构造
iChochy
├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── posts
│ └── HelloWorld.md
├── data
├── docs
│ ├── 404.html
│ ├── apple-touch-icon-144-precomposed.png
│ ├── categories
│ │ ├── index.html
│ │ └── index.xml
│ ├── css
│ │ ├── hyde.css
│ │ ├── poole.css
│ │ ├── print.css
│ │ └── syntax.css
│ ├── favicon.png
│ ├── index.html
│ ├── index.xml
│ ├── posts
│ │ ├── helloworld
│ │ │ └── index.html
│ │ ├── index.html
│ │ └── index.xml
│ ├── sitemap.xml
│ └── tags
│ ├── index.html
│ └── index.xml
├── layouts
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
└── themes
└── hyde
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── go.mod
├── images
│ ├── screenshot.png
│ └── tn.png
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── head.html
│ ├── head_fonts.html
│ ├── hook_head_end.html
│ └── sidebar.html
├── static
│ ├── apple-touch-icon-144-precomposed.png
│ ├── css
│ │ ├── hyde.css
│ │ ├── poole.css
│ │ ├── print.css
│ │ └── syntax.css
│ └── favicon.png
└── theme.toml
部署 GitHub Pages
将整个我的项目推送到 GitHub
,而后在我的项目的 Settings
中开启的 GitHub Pages
,并指定分支和目录 docs
就是能够间接在线拜访了,如:https://ichochy.github.io
总结
Hugo 简略、易用、疾速
模版化弱小,只须要关怀文章的编写
默认开启 LiveReload
,批改后能够实时预览,免去手去刷新操作
还有很多弱小的性能,如:摘要 (Summary)、文章目录(TableOfContents)、相干举荐(Related)、多语言反对(i18n)、列表分页(Pagination)、简码(Shortcodes) 等。
联系方式
网站:https://ichochy.com/
源文:https://ichochy.com/posts/20200802/