本文为原创文章，转载注明出处，欢迎关注网站https://hkvision.cn

前述

起了无数次搭博客的心，前两天才下定决心用hugo弄个博客出来，毕竟码了几年的代码，也需要记点东西。 去年用django写了个博客的半成品，被老师吐槽了审美，也没兴致继续弄下去了。前段时间学了go语言，发现了hugo这个东西，听说这玩意生成网页很快，打算用这个弄。大家实践过程中如果出错了，可以先看一下后面我遇到的坑，也许对你有所帮助。

Hugo

Hugo是由Go语言实现的静态网站生成器。简单，易用，高效，扩展性好，快速部署

Hugo安装

安装方式很多，如果你是Mac，可以选择用brew安装，类似的linux可以用软件包管理工具安装(apt,yum)

1

brew install hugo

可以选择去github上下载编译好的二进制包，如果你有golang的环境，可以选择源码编译

1

go get -v -u github.com/gohugoio/hugo

生成站点

使用Hugo快速生成站点，使用命令

hugo new site /blog

这样在/blog下生成了初始站点，cd进去

cd /blog

使用主题

到主题列表中选择你喜欢的主题，这里我选择maupassant这个主题，有读者可能发现了，这个主题并没有提交到官方网站，选择这个主题主要是因为和网上推崇的casper主题比起来，这个主题是国人从hexo的主题迁过来的，比较符合国人的博客口味。国外的主题如果你没有fb，推特的账号的话基本上这个主题一半的功能就废了

下面我们来安装主题

1

git clone https://github.com/rujews/maupassant-hugo themes/maupassant

安装好的主题放在themes下

接着是配置主题

网站根目录下新建config.toml文件，具体配置可看GitHub的说明，下面是我的配置

 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

baseURL = "https://hkvision.cn"
languageCode = "zh-CN"
title = "HaoKunT的博客"
theme = "maupassant"
summaryLength = 10

[author]
  name = "HaoKunT"

[params]
  author = "HaoKunT"
  subtitle = "GIS学生党，喜欢学习新技术"
  keywords = "GIS,golang,go语言,python,HaoKunT,R,blog,博客"
  description = "数据库,Web后端,Django,Golang,GIS"
  busuanzi = true
  preserveTaxonomyNames = true
  disablePathToLower = true
  
  [params.utteranc]
    enable = true
    repo = "HaoKunT/blog-hugo-comments"    # 存储评论的Repo，格式为 owner/repo

    issueTerm = "pathname"  #表示你选择以那种方式让github issue的评论和你的文章关联。

    theme = "github-light" # 样式主题，有github-light和github-dark两种


  [[params.links]]
    title = "R语言空间数据处理与分析实践教程"
    name = "R语言空间数据处理与分析实践教程"
    url = "https://baike.baidu.com/item/R%E8%AF%AD%E8%A8%80%E7%A9%BA%E9%97%B4%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86%E4%B8%8E%E5%88%86%E6%9E%90%E5%AE%9E%E8%B7%B5%E6%95%99%E7%A8%8B"

  [[params.links]]
    title = "CS-Tao的博客"
    name = "CS-Tao的博客"
    url = "https://home.cs-tao.cc"

  [[params.links]]
    title = "HPdell的博客"
    name = "HPdell的博客"
    url = "https://hpdell.github.io"

[menu]

  [[menu.main]]
    identifier = "tools"
    name = "工具"
    url = "/tools/"
    weight = 2

  [[menu.main]]
    identifier = "archives"
    name = "归档"
    url = "/archives/"
    weight = 3

  [[menu.main]]
    identifier = "about"
    name = "关于"
    url = "/about/"
    weight = 4

[params.cc]
    name = "知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议"
    link = "https://creativecommons.org/licenses/by-nc-nd/4.0/"
  
[permalinks]
  post = "/:year/:month/:day/:title/"

配置默认Front Matter

写文章之前我们先配置一下文章的默认Front Matter

网站根目录下新建文件archtypes/default.md，下面是我的配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

+++
title = "{{ replace .Name "-" " " | title }}"  # 文章标题

date = {{ .Date }}  # 自动添加日期信息

draft = true  # 设为false可被编译为HTML，true供本地修改

tags = [""]  # 文章标签，可设置多个，用逗号隔开。Hugo会自动生成标签的子URL

categories = [""] # 文章类型

toc = true # 用于开启文章目录

preserveTaxonomyNames = true
disablePathToLower = true
+++

写文章

OK前期所有的工作都完成了，我们可以开始愉快的写文章了，执行下面命令

1

hugo new post/first.md

命令会在根目录下新建content目录，这个目录保存了你所有的文章内容，会新建一个目录post，下面则是你的各篇文章

打开first.md你会惊奇的发现自动给你添加了Front Matter，你根据你这篇文章的内容修改相应的头，例如这篇文章的头

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

+++
title = "使用hugo+netlify部署个人主页"  # 文章标题

date = 2019-07-27T09:20:55+08:00  # 自动添加日期信息

draft = false  # 设为false可被编译为HTML，true供本地修改

tags = ["hugo","netlify","maupassant"]  # 文章标签，可设置多个，用逗号隔开。Hugo会自动生成标签的子URL

categories = ["博客","hugo"]
toc = true
preserveTaxonomyNames = true
disablePathToLower = true
+++

然后开始写你的文章主体。

运行

文章写完后就可以开始运行了

1

hugo server -t maupassant

这个命令用于开启本地调试，还可以自动更新，得益于Hugo的高效，你可以一边写文章一边实时的查看你的文章的网页表现

浏览器里打开: http://localhost:1313

这里插一句归档页面的事 归档页面需要你在content下新建archives目录，新建index.md，然后填入以下内容

1
2
3
4
5
6

---

title: "归档"

description: GIS学生党一枚，喜爱Python和Golang，欢迎探讨GIS和Web开发
type: archives # 这里类型一定要是archives

---

这样才能正常归档

部署netlify

我博客部署在netlify上面，不选GitHub Pages主要是因为百度收录不了GitHub Pages，具体原因参考参考，作为“内事不决问百度，外事不决问谷歌”的“内事”，百度还是不能随便放弃的，于是我打算用netfily，当然你也可以用Coding了。

Netlify官网：https://app.netlify.com

进去后直接用Github登录，安装Github app，反正按照流程来就行了，记得直接将网站所在的repo作为持续部署的库，会自动识别这个库是Hugo的库，command那里会自动填充Hugo，Publish directory那里会自动填充public

一切顺利的话你的网站已经成功部署了，netlify也提供二级子域名供你使用，如果你有自己的域名的话，也可以自定义域名，然后在域名服务商那里调整一下解析路线。

netlify提供持续集成，自动HTTPS，检查是否混用等实用功能，当你更新文章后直接推送到github仓库，netlify会自动重新构建，构建成功会自动发布，非常方便。当然GitHub Pages也可以做持续集成，自己写一个小shell就行，网上教程很多，就不列举了。

几个坑

  • BaseUrl一定要配置好，特别是后面用自己的域名的时候，或者你一开始就准备好了部署的域名。若出现更换域名的情况，则除了修改DNS以外，还要修改BaseUrl，重新发布。
  • 大家可能发现关于页面，工具页面好像返回的404。其实这是因为你还没有写对应的文章，你可以在content下新建一个about目录，然后新建index.md，这里写自己的关于页面，工具页面同理
  • 用git clone下来的主题其实都是submodules，但是没有相应的.gitmodules文件，而netfily只认submodules，只认.gitmodules文件，所以在下载主题的时候，要么用git add submodules命令，要么就手动添加一个.gitmodules文件，文件内容如下
[submodule "themes/maupassant"]
	path = themes/maupassant
	url = https://github.com/rujews/maupassant-hugo

这是最大的坑，很折磨人，尤其是我对git的子模块一点不熟

  • 有些人可能会问我明明添加了文章但是为什么不显示呢？通常这是因为文章的draft参数没有设置为false，设置为true的时候代表是草稿，是不会渲染的，所以你看不到。其实这个很简单但是刚开始用的时候总是会忘。
  • 如果你看不到netlify的部署日志（我在网上搜了无数次都没人提到这个），显示Deploy logs are currently unavailable. We are working on resolving the issue.，那是被墙了。

祝大家每一步都顺利

最后在这里感谢JokerQyou，飞雪无情提供的主题