hugo建站 | 我的第一个博客网站
阅读原文时间:2023年07月11日阅读:1

博客地址 - https://billie52707.cn

1. 建博客的初衷?

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

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

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

why hugo?

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

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

基本环境

go、git、github

安装方法

官网下载对应版本的源码,添加到环境变量

生成博客

hugo new site 博客名

下载主题

git clone 

设置主题

echo ‘theme = “cactus”’ » config.toml

启动博客

hugo server -w

新建文章

hugo new post/文章名.md

生成public目录

hugo -D

博客的基本设置可以通过对应主题的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"

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

title: "hugo建站 | 我的第一个博客网站"
date: 2020-08-04T18:42:17+08:00
categories:
- tec
tags:
- hugo

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

以我现在使用的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>

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

使用:

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>

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

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

  1. 在GitHub创建一个仓库,并命名为your_github_id.github.io,注意your_github_id一定要小写

  2. 在博客项目目录下新建文件deploy.sh

  3. 打开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

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

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

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