博客搭建记录

本博客使用Hugo搭建，使用了jane模板，集成了Beaudar评论。

一、安装HUGO

Hugo是一个静态网站生成器，使用Go编写。选择Hugo，因为它足够简单，而且很快。这里是官网，这里是github。

官网推荐使用brew install hugo (mac)、choco install hugo -confirm(Windows)等包管理器进行安装。也可以在github上Releases中找到最新的包自行下载，注意区分不同架构。

查看系统CPU架构方法：

Mac：uname -a

Windows： systeminfo

使用以下命令验证安装是否成功

1

hugo version

其他安装选项官网列的很全面，就不多费笔墨了。

二、创建网站

在本地找一个合适的目录运行

1

hugo new site myblog

Hugo会创建一个名为myblog的文件夹。一个空的网站框架就生成好了。

三、加载模板主题

我使用的主题是hugo-theme-jane，官网地址。更多皮肤可以去hugo官网挑选，地址

在你网站目录下：

1
2
3


cd myblog
git init
git submodule add https://github.com/xianmin/hugo-theme-jane.git themes/hugo-theme-jane

这里说明一下：

你可以增加多个主题皮肤，然后在配置文件中切换即可
使用git添加为子模块，而不是直接将皮肤clone下来，为的是后面我们需要把网站源码托管到github上，子模块不会污染代码。

拷贝jane主题的示例文件：

1
2


cp -r themes/hugo-theme-jane/exampleSite/content ./
cp themes/hugo-theme-jane/exampleSite/config.toml ./

说明：

content/post文件夹下存放的是你的所有文章
config.toml 是Hugo的配置文件，参考示例中full-config.toml文件，来配置你需要的功能。

举几个配置的例子：

 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


# 基于leancloud.cn的网站计数和评论，你需要在leancloud.cn网站上新建一个项目，然后使用对应的appId和appKey即可
# 评论插件
  [params.valine]
    enable = true
    appId = ''
    appKey = ''
    notify = false 
    verify = false 
    avatar = 'mm'
    placeholder = ''
# 网站计数器插件
  [params.counter.leancloud]
    enable = true
    appId = ""
    appKey = ""  
# 添加备案信息
  customFooter = "粤ICP备xxxxxxxx号"
  
# 你可以增加或删除你需要的网站头菜单
[[menu.main]]
  name = "首页"
  weight = 10
  identifier = "home"
  url = "/"
[[menu.main]]
  name = "全部文章"
  weight = 20
  identifier = "archives"
  url = "/post/"

预览示例网站：

1

hugo server

打开 http://localhost:1313/ ，预览效果

四、新建文章

1

hugo new post/first.md

该命令会新建一个文件，并应用默认文章头模板，例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


---
# 常用定义
title: "An Example Post"           # 标题
date: 2018-01-01T16:01:23+08:00    # 创建时间
lastmod: 2018-01-02T16:01:23+08:00 # 最后修改时间
draft: false                       # 是否是草稿？
tags: ["tag-1", "tag-2", "tag-3"]  # 标签
categories: ["index"]              # 分类
author: "xianmin"                  # 作者

# 用户自定义
# 你可以选择 关闭(false) 或者 打开(true) 以下选项
comment: false   # 关闭评论
toc: false       # 关闭文章目录
# 你同样可以自定义文章的版权规则
contentCopyright: '<a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a>'
reward: false	 # 关闭打赏
mathjax: true    # 打开 mathjax
---

五、发布

1

hugo

直接运行hugo命令，将在public文件夹下生成HTML、CSS、JS等静态文件。接下来，可以将public部署了。如本博客是搭建在云虚拟机的，我们将public拷贝到远程虚机的文件夹，使用nginx做代理进行访问。例如下nginx.config配置：

1
2
3
4
5
6
7
8
9


server {
    listen       80;
    server_name  wywy.life;
    
    location / {
        root   /data/myblog/public;
        index  index.html;
    }
}

每次拷贝很不方便，所以在本地编辑完并预览OK后，将myblog工程提交到github，然后登录虚机将myblog pull下来（注意github上，最好使用private，否则你的配置可能会暴露你的隐私）就可以实现一键部署了。

六、集成Beaudar

hugo支持很多评论插件，推荐一下我了解的：

valine

基于LeanCloud，在中国比较友好。免费、简单。风险就是稳定性不可控了。
gitment、gitalk、gitter

依托于github issue，好处是可以自己管理。gitment好一点，但也已经不再维护了，登录也会出现问题。
Disqus

国外比较流行，但是有广告，对于大陆加载也慢，不推荐使用。
utterances、beaudar

也是基于github issue，beaudar算是utterances的汉化版本，也是本博客最终的选择。

集成流程：

在github上创建一个公开(public)的仓库
在仓库中安装Beauder app

在jane主题下themes/hugo-theme-jane/layouts/partials/comments.html文件中，增加beauder代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


  <!-- beaudar -->
  {{- if .Site.Params.beaudar.enable -}}
  <div id="beaudar" class="comments">
    <script src="https://beaudar.lipk.org/client.js"
          repo="{{ .Site.Params.beaudar.repo }}"
          branch="{{ .Site.Params.beaudar.branch }}"
          issue-term="{{ .Site.Params.beaudar.issueTerm }}"
          theme="{{ .Site.Params.beaudar.theme }}"
          crossorigin="{{ .Site.Params.beaudar.crossorigin }}"
          async>
    </script>
  </div>
  {{- end }}

ps: 由于jane主题还没有默认支持beauder，如果以后支持了可以直接配置，不用修改主题文件了。

在config.toml文件中，增加如下配置：

1
2
3
4
5
6
7
8


  # Beaudar 基于github issue的评论
  [params.beaudar]
    enable = true
    repo = "your_github_name/blog_comments" # 你的公开仓库
    branch = "main"
    issueTerm = "title"
    theme = "github-light"
    crossorigin = "anonymous"

配置选项，可以在官网进行查询。效果就如下方评论

文章目录