hugo建站 | 我的第一个博客网站

前言

1. 建博客的初衷？

2020那一年，八月的第一天，我还是像往常一样打开我的域名网站，本以为还是会像以前一样显示每日一图的界面，结果出现的却是破图，当即开始打开服务器进行一番检查，发现是一直在使用的词霸API接口挂掉了（结果两天后又恢复正常了），这样一来就意味着我的域名现在闲下来了这时候，一个想法闪过我的脑海 ————

是时候开始做自己的博客网站了！

在这之前，由于平时比较忙，并且搭建博客需要投入一定的精力，加上已经有现成的博客园平台可以供自己记录博客，因此，考虑到时间成本以及学习成本，就一直搁置了博客网站这件事.

why hugo?

通过 Hugo 你可以快速搭建你的静态网站，比如博客系统、文档介绍、公司主页、产品介绍等等。相对于其他静态网站生成器（例如hexo）来说，Hugo 具备如下特点：

极快的页面编译生成速度。（ ~1 ms 每页面）
完全跨平台支持，可以运行在 Mac OS X, Linux, Windows, 以及更多!
安装方便 Installation
本地调试 Usage 时通过 LiveReload 自动即时刷新页面。
完全的皮肤支持。
可以部署在任何的支持 HTTP 的服务器上。

2. hugo的基本使用


基本环境	go、git、github
安装方法	官网下载对应版本的源码，添加到环境变量
生成博客	hugo new site 博客名
下载主题	git clone …
设置主题	echo ‘theme = “cactus”’ » config.toml
启动博客	hugo server -w
新建文章	hugo new post/文章名.md
生成`public`目录	hugo -D

3. 快速部署基本设置

博客的基本设置可以通过对应主题的GitHub帮助文档进行一步步设置，也可以走捷径，直接替换博客项目下的config.toml为主题文件中exampleSite下的config.toml文件，接着在config.toml中的对应位置修改自己的设置：

baseURL = "https://billie52707.cn"

languageCode = "en-us"

title = "人人都爱小雀斑's blogs"

theme = "cactus"

copyright = "billie" # cactus will use title if copyright is not set

disqusShortname = "example" # Used when comments is enabled. Cactus will use site title if not set

# googleAnalytics = "UA-1234-5"

4. 文章添加标签和分类

以你现在看到的这篇文章为例，新建一篇文章之后，如果想加入标签，可以在每篇文章的页首这样设置：

title: "hugo建站 | 我的第一个博客网站"

date: 2020-08-04T18:42:17+08:00

categories:

- tec

tags:

- hugo

ps：注意-后面有一个空格

5. 页脚信息的编辑

以我现在使用的cactus主题为例，页脚配置文件位于：cactus/layouts/partials/footer.html，编辑如下：

<footer id="footer">

  <div class="footer-left">

    Copyright

    &copy;

    {{ now.Format "2006" }}

    <span>️{{ if .Site.Copyright }} {{ print .Site.Copyright }} {{ else }} {{ print .Site.Title }} {{ end }} | </span>

    <span>粤ICP备20025795号-1 | </span>

    <span>Powered By Hugo | </span>

    <span id="busuanzi_container_site_pv">

        pv：<span id="busuanzi_value_site_pv"></span> |

    </span>

    <span id="busuanzi_container_site_uv">

        uv: <span id="busuanzi_value_site_uv"></span>

    </span>

  </div>

</footer>

6. 网站流量统计

工具：不蒜子，一个通过仅仅两行代码实现的网页流量计数器

使用：

1、在/cactus/layouts/partials/head.html文件中引入不蒜子js文件

<!-- 不蒜子 -->

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

2、在页面添加统计代码，在/cactus/layouts/partials/footer.html中添加如下代码

<span id="busuanzi_container_site_pv">

    本站访问量：<span id="busuanzi_value_site_pv"></span>次

</span>

&nbsp;

<span id="busuanzi_container_site_uv">

    您是本站第 <span id="busuanzi_value_site_uv"></span> 位访问者

</span>

3、设置文章阅读数，在/cactus/layouts/posts/single.html中，大概35行的位置，添加如下代码

<div class="article-tag">

            <i class="fa fa-eye"></i>

            <span id="busuanzi_container_page_pv">

              <span id="busuanzi_value_page_pv">0</span>

            </span>

        </div>

具体显示效果可移步此文章页首标题处查看

4、设置文章字数和阅读时间，在/cactus/layouts/_default/single.html中添加以下代码

<h5 id="wc" style="font-size: 1rem;text-align: center;">{{ .FuzzyWordCount }} Words|Read in about {{ .ReadingTime }} Min|本文总阅读量<span id="busuanzi_value_page_pv"></span>次</h5>

7. 添加评论系统Valine

Valine - 一款快速、简洁且高效的无后端评论系统。

Valine 诞生于2017年8月7日，是一款基于Leancloud的快速、简洁且高效的无后端评论系统。

理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho等博客程序在使用Valine。

特性：

快速
安全
Emoji
无后端实现
MarkDown 全语法支持
轻量易用(~15kb gzipped)
文章阅读量统计 v1.2.0-beta1+

Tips：

整个过程，是以cactus主题为例的，其它主题操作大同小异。
配置之前应该先阅读Valine快速开始

Leancloud相关配置：

评论系统依赖于leancloud，所以需要先在leancloud中进行相关的准备工作。

登录或注册 LeanCloud
登录成功后，进入后台点击左上角的创建应用
创建好应用，进入应用，左边栏找到设置，然后点击 应用Key，此时记录出现的 App ID 和 App Key，后面配置文件中会用到
因为评论和文章阅读数统计依赖于存储，所以还需要建立两个新的存储 Class，左边栏找到并点击存储，点击 创建Class
创建两个存储Class，分别命名为: Counter 和 Comment
为应用添加安全域名，左边栏点击设置，找到 安全中心，点击后会看到 安全域名 设置框，输入博客使用的域名，点击保存即可

8. 添加 Valine 参数项：

  # Valine.

  # You can get your appid and appkey from https://leancloud.cn

  # more info please open https://valine.js.org

  [params.valine]

    enable = true

    appId = '你的appId'

    appKey = '你的appKey'

    notify = false  # mail notifier , https://github.com/xCss/Valine/wiki

    verify = false # Verification code

    avatar = 'mm'

    placeholder = '说点什么吧...'

    visitor = true

上面几项内容的含义，这里简单一说，具体还是要看 Valine官网中配置相关的内容：

参数	用途
enable	这是用于主题中配置的，不是官方Valine的参数，true时控制开启此评论系统
appId	这是在 leancloud 后台应用中获取的，也就是上面提到的 App ID
appKey	这是在 leancloud 后台应用中获取的，也就是上面提到的 App Key
notify	用于控制是否开启邮件通知功能，具体参考邮件提醒配置
verify	用于控制是否开启评论验证码功能
avatar	用于配置评论项中用户头像样式，有多种选择：mm, identicon, monsterid, wavatar, retro, hide。详细参考：头像配置
placehoder	评论框的提示符
visitor	控制是否开启文章阅读数的统计功能i, 详情阅读文章阅读数统计

9. 修改主题文件：

主要是修改主题中评论相关的布局文件 themes/even/layouts/partials/comments.html，按照 Valine快速开始添加 Valine 相关代码，找到以下位置，大概55～81行的位置：

  <!-- gitment -->

  {{- if .Site.Params.gitment.enable -}}

  <div id="comments-gitment"></div>

  <!--这里省略了部分代码-->

  <noscript>Please enable JavaScript to view the <a href="https://github.com/imsun/gitment">comments powered by gitment.</a></noscript>

  {{- end }}

  <!--这个位置添加Valine相关代码-->

添加的 Valine 评论的代码如下：

  <!-- valine -->

  {{- if .Site.Params.valine.enable -}}

  <!-- id 将作为查询条件 -->

  <span id="{{ .URL | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">

    <span class="post-meta-item-text">文章阅读量 </span>

    <span class="leancloud-visitors-count">1000000</span>

    <p></p>

  </span>

  <div id="vcomments"></div>

  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>

  <script src='//unpkg.com/valine/dist/Valine.min.js'></script>

  <script type="text/javascript">

    new Valine({

        el: '#vcomments' ,

        appId: '{{ .Site.Params.valine.appId }}',

        appKey: '{{ .Site.Params.valine.appKey }}',

        notify: {{ .Site.Params.valine.notify }},

        verify: {{ .Site.Params.valine.verify }},

        avatar:'{{ .Site.Params.valine.avatar }}',

        placeholder: '{{ .Site.Params.valine.placeholder }}',

        visitor: {{ .Site.Params.valine.visitor }}

    });

  </script>

  {{- end }}

可以看到上述代码中引用了配置文件中的相关参数，这样以后修改配置就不用修改代码了，只需要改配置文件 config.toml，另外注意到的是，我也添加了文章阅读数统计的显示内容。将配置文件中 valine 配置的 eanble 设置为 true

10. 上传代码到GitHub

上传代码这部分我选择的方案是把相关git代码写进一个可执行文件下，然后后面更新博客的话运行这个可执行文件就行了，步骤如下：

在GitHub创建一个仓库，并命名为your_github_id.github.io，注意your_github_id一定要小写
在博客项目目录下新建文件deploy.sh
打开deploy.sh并编辑

hugo -D #打包成静态文件目录public

cd public #切换到public目录

git init

git remote rm origin

git remote add origin https://github.com/your_github_id/your_github_id.github.io.git #链接到你的GitHub博客项目

git add .

git commit -m "update"

echo "Pushing to github"

git pull origin master

git push -u origin +master

11. 为你的博客网站添加一个域名

上传代码到GitHub之后，在GitHub项目下新建一个’CNAME’文件，打开并编辑，在第一行写入你的域名（所以你要先有一个域名，并备案），比如我的就是billie52707.cn，这一步目的是做一个域名的关联，当你访问你的域名的时候，就会关联到你的博客项目来。

接着，以阿里云为例，在这之前，你的域名已经备案好了，登录阿里云，进入你的域名列表，在域名右侧点击解析，点击添加安全组,新手引导，在记录值输入你的博客项目GitHub pages的IP地址，IP地址可以通过终端输入ping your_github_id.github.io获取。

12. 后记

最后欢迎大家的访问 billie52707.cn