关于hugo:HUGO-创建属于自己的博客

35次阅读

共计 3716 个字符，预计需要花费 10 分钟才能阅读完成。

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/

正文完
hugo
发表至： hugo
2020-08-03
 0
关于hugo:Hugo-不完美教程-V-Templates-模板机制
关于hugo:静态博客如何高性能插入评论
关于hugo:用-Hugo-和-Github-Pages-构建个人博客
关于hugo:Hugo-之旅