静态博客Hugo安装及使用教程

一、安装

1、下载

最新版下载地址：https://github.com/gohugoio/hugo/releases

下载 Windows-64bit.zip

2、新建本地目录

D:\Hugo\bin
D:\Hugo\Sites

盘符和目录都可以自定义，但bin和Sites要固定

将下载的安装包里面的hugo.exe解压到D:\Hugo\bin下面

3、配置环境

我的电脑→右键→高级→环境变量→系统变量→Path，增加D:\Hugo\bin

也可以命令执行：set PATH=%PATH%;D:\Hugo\bin

4、安装完成

验证

1
2
hugo version //查看版本
hugo help //帮助文档

能正常输出即安装成功，如果输出错误，则需要重启电脑后再试

二、新建网站

在D:\Hugo\Sites下面打开cmd，或其他命令工具

1
hugo new site simple.com

新建simple.com 网站名自定义

回车创建成功！
然后在D:\Hugo\Sites下面就会新建一个simple文件夹

三、内容管理

1、目录说明

archetypes/ 创建页面的原型文件，比如标题时间等，可以自定义
content/ markdown原文件存储目录
layouts/ 样式自定义时需要
static/ 静态文件
themes/ 主题会安装在这儿
config.toml 配置文件

2、创建页面

在网站目录下面执行命令

1
hugo new about.md

自动在当前网站下的content目录下生成about.md文件

3、创建文章

1
hugo new post/hello-world.md

自动在content/post下面生成hello-world.md文件

新生成的文件自动会有三个字段(这儿的模板可以在archetypes里面的文件修改)： archetypes/default.md

1
2
3
4
5
6
7
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
tags: []
description: ""
---

4、安装主题

在官方主题库中找到喜欢主题，按照教程安装，https://themes.gohugo.io/

主题配置：

config.yml

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
baseURL: "https://aixin.me"
title: Aixin.me
pagination:
  pagerSize: 10
ignoreLogs:
  - 'warning-goldmark-raw-html'
theme: PaperMod
enableRobotsTXT: true #生成robots.txt
enableEmoji: true
buildDrafts: false # 生成草稿
buildFuture: false
buildExpired: false

minify: # 压缩文件
  disableXML: true
  minifyOutput: true

outputs:
  home:
    - HTML
    - RSS
    - JSON # necessary for search

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  title: Aixin.me
  description: "With love in your heart, you will meet your better self!"
  keywords: [Blog, aixin, love]
  author: #作者信息
  DateFormat: "2006-01-02"
  defaultTheme: auto # dark, light
  disableThemeToggle: false

  ShowReadingTime: true # 显示阅读时间
  ShowPostNavLinks: true
  ShowBreadCrumbs: true # 显示面包屑导航
  ShowPostDate: true
  ShowCodeCopyButtons: true
  ShowWordCount: true # 显示文章字数
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: false
  tocopen: false
  math: true #先配置好math然后在这儿开启

  assets:
    # disableHLJS: true # to disable highlight.js
    # disableFingerprinting: true
    favicon: "/favicon.ico"
    favicon16x16: "<link / abs url>"
    favicon32x32: "<link / abs url>"
    apple_touch_icon: "<link / abs url>"
    safari_pinned_tab: "<link / abs url>"

  label:
    text: "Aixin.me"
    #icon: "/images/logo.png"
    iconHeight: 35
  
  # home-info mode
  homeInfoParams:
    Title: Welcome to Aixin.me ❤️
    Content: >
      1. 提升胜任力，首先是动物本能，指的是生物天生具有的、未经思考的行为反应。

      1. 接着是自我反省，即对自己的行为、思想进行反思和审视。

      1. 情绪控制意味着能够管理和调节自己的情绪。知行合一表示认知和行动的统一。

      1. 专注与无私强调专注于某件事情并且不自私。利他是为他人利益考虑和行动。
      
      1. 最后，启蒙与觉醒指的是在思想和认知上达到更高的境界，获得新的领悟和成长。

  cover:
    hidden: flase # hide everywhere but not in structured data
    hiddenInList: flase # hide on list pages and home
    hiddenInSingle: flase # hide on single page

  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    keys: ["title", "permalink", "summary", "content"]
menu:
  main:
    - identifier: about
      name: About
      url: /about/
      weight: 10
    - identifier: archives
      name: Archives
      url: /archives/
      weight: 10
    - identifier: tags
      name: Tags
      url: /tags/
      weight: 20
    - identifier: search
      name: Search
      url: /search/
      weight: 30
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: true
markup:
  highlight:
    codeFences: true # 是否使用代码块
    noClasses: true # 不使用类名
    guessSyntax: true # 是否自动检测语言
    lineNos: true # 行号
    style: github # https://gohugo.io/quick-reference/syntax-highlighting-styles/

修改主题：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 首页欢迎内容高度：
// /assets/css/common/post-entry.css
.first-entry {
    min-height: 120px;//修改这儿的高度即可
}

// 修改字体大小
// themes\hugo-PaperMod-6.0\assets\css\core\reset.css
body{
  font-size: 15px;
}

// 底部版权
// /layouts/partials/footer.html

// 修改代码高亮
//themes\PaperMod\assets\css\core\theme-vars.css
//更新
:root {
    --code-block-bg: rgb(255, 255, 255);
}
// themes\PaperMod\assets\css\common\post-single.css
// .post-content blockquote下新增
.post-content .highlight{
    border: 1px solid rgba(0, 0, 0, 0.1);
}
// 修改
.post-content pre code {
    /* color: rgb(102, 102, 102); */
}
// 打开[]{http://xyproto.github.io/splash/docs/}，找打对应的主题，比如github，打开主题预览页面，右键查看源代码，复制style标签中的内容，替换`themes\PaperMod\assets\css\includes\chroma-styles.css`中的内容
// 也可以再找一个黑暗主题，将对应style内容添加到并放在：
@media (prefers-color-scheme: dark) {
  //这儿
}

支持数学公式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// https://adityatelange.github.io/hugo-PaperMod/posts/math-typesetting/

// 第一步：创建文件
主题/layouts/partials/math.html
// 粘贴以下内容
// https://katex.org/docs/autorender.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>
// 第二步：打开主题/layouts/partials/extend_head.html，并添加以下代码
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

// 第三步：打开主题/config.yml，并添加以下代码
params:
    math: true #开启
// 以上是全局模式，也可以在文章中单独开启，math: true

5、本地运行

网站根目录执行：

1
2
3
4
5
6
hugo server
// 忽略缓存，并实时监控
hugo server --ignoreCache --watch

// 禁用缓存
hugo server --disableFastRender

最后，必须将文章的draft: true改成draft: false才可以在网站上显示出来

四、发布网站

网站根目录执行：

1
hugo --baseURL=https://aixin.me/

然后就会将博客发布到public目录下面

将pubic目录下的文件发布到git上即可

https://simple.com 是目标网址，也可以是simple.github.io
–baseURL是将config文件里面的baseURL修改为生产环境的地址

以上全部完毕，只写了基本的用法，更详细的教程请查看官方教程，也可以使用hugo help命令查看帮助文档

一、安装#

1、下载#

2、新建本地目录#

3、配置环境#

4、安装完成#

二、新建网站#

三、内容管理#

1、目录说明#

2、创建页面#

3、创建文章#

4、安装主题#

5、本地运行#

四、发布网站#