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/