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:00draft: 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/