目录

建站日志

已经有很久没有更新过了,再回看我Hexo博客的时候,突然感觉花里胡哨的东西很多,但是有用的内容却不多,狠下心来找了找有没有更好的框架,这下才找到了hugo

下载hugo的时候一定要下载extened版本的,不然会出莫名奇妙的bug

我使用的主题是DoIt,这是一个基于LoveIt的主题,也有比较详细的文档以供开发,这里按照官方文档配置即可

1 友链页面的设置

新建一个页面,放在content目录下,DoIt主题提供了友链的相关支持如下

friend shortcode 用来在你的页面上插入友链.

friend shortcode 有以下命名参数:

  • name [必需] (第一个位置参数) 友站的名称.

  • url [必需] (第二个位置参数) 友站的链接.

  • avatar [必需] (第三个位置参数) 友站的头像.

  • bio [必需] (第四个位置参数) 友站的简介.

示例:

1
2
3
{{< friend "PCloud" "https://github.com/HEIGE-PCloud/" "https://avatars.githubusercontent.com/u/52968553?v=4" "This is PCloud~💤" >}}
或者
{{< friend name="PCloud" url="https://github.com/HEIGE-PCloud/" avatar="https://avatars.githubusercontent.com/u/52968553?v=4" bio="This is PCloud~💤" >}}

2 PicGo+Gitee+Typora搭建

Typora+Picgo+Gitee构建网络图床笔记 - 知乎 (zhihu.com)

hugo搭建博客 - 随写日记 (gitee.io)

步骤基本上和参考文章里说的一样,

在菜单格式>图像>设置图片根目录修改图片的默认根目录选择static/。然后在偏好设置>图像>,选择插入图片时复制到指定路径,然后路径填写../../static/images/${filename}。意思就是,我们把图片保存static/images路径下,为每个md文件创建一个文件夹保存图片。

并且不能忘记在md文件头部添加typora-root-url: ..\..\static

1
2
3
4
title: "Test"
date: 2020-05-09T21:15:41+08:00
draft: false
typora-root-url: ..\..\static

3 文章配置页面图

在配置文章前置参数时,可以增加以下选项

1
2
featuredImage: /images/xxx/picture.jpg	#文章页的特色图
featuredImagePreview: /images/xxx/picture.jpg	#主页的特色图

这样就能生成主页和文章页的特色图

4 评论系统

我在这里使用的是valine,个人感觉这个更简洁一点。我主要参考了hexo+next使用Valine评论系统建立评论系统。

注册应用

注册LeanCloud并创建一个开发版应用(免费)

链接:https://www.leancloud.cn/

创建Class

进入你创建的应用后,点击存储-> 创建Class,将Class的名称命名为Comment。

将Class访问权限和默认ACL权限全部设置为所有用户。

服务设置

在设置-> 安全中心中,关闭除数据存储以外的全部开关。

修改下方Web安全域名为:自己的域名:端口号,以我的博客为例:

1
https://lilac.fun

修改主题配置文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
# Valine 评论系统设置
[params.page.comment.valine]
    enable = true
    appId = "" #你自己的appId
    appKey = "" #你自己的appKey
    placeholder = "欢迎评论呀!"
    avatar = "mp"
    meta= ""
    pageSize = 10
    lang = ""
    visitor = true
    recordIP = true
    highlight = true
    enableQQ = false
    serverURLs = ""
    #  emoji 数据文件名称, 默认是 "google.yml"
    # ("apple.yml", "google.yml", "facebook.yml", "twitter.yml")
    # 位于 "themes/DoIt/assets/data/emoji/" 目录
    # 可以在你的项目下相同路径存放你自己的数据文件:
    # "assets/data/emoji/"
    emoji = ""

开启邮件通知

  • 修改LeanCloud中,设置->邮件模版->用于重置密码的邮件主题:
1
 你在{{appname}}的评论中收到了新的回复
  • 修改内容:
1
2
3
4
5
<p>Hi, {{username}}</p>
<p>
你在{{appname}}的评论中收到了新的回复
</p>
<p><a href="你的博客主页" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>

保存即可。

5 github部署

考虑到成本原因, 把博客部署在了Github pages

这里使用 hugo --source blog_root就可以发现生成了public文件夹,这样只要在public中建一个repo,再推到Github pages上就可以了

初次使用记得git initgit remote add origin git@github.com:jygzyc/jygzyc.github.io.git,之后就可以运行下面的脚本操作了

1
2
3
4
5
hugo # 生成public文件夹
cd public
git add .
git commit -m $1
git push origin master