hugo建站 | 我的第一个博客网站
前言
博客地址 - https://chenxuefan.cn
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
©
{{ 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>
<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