建站日志

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

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

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

新建一个页面,放在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~💤" >}}

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

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

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

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

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

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

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

进入你创建的应用后,点击存储-> 创建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>

保存即可。

使用如下命令即可进行hugo的本地调试,这里的主题可以根据自己已经使用的主题进行更换

1
hugo server --theme=doit --buildDrafts --disableFastRender

若需要效果全开,则可以使用生产环境的命令

1
hugo server --disableFastRender -e production

考虑到成本原因, 把博客部署在了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

最近搞了自己的服务器,把东西都挪到服务器上了,那么就需要在服务器上进行环境的搭建

我使用的是阿里云的轻量应用服务器,首先是博客本身不会有太多的流量,其次配置起来要容易一些。

首先进入控制台,能看到选择使用哪一种应用,这里选择LNMP

这样我们使用ssh进行连接后,首先安装git,因为最后我们是使用git进行同步的

安装git

1
sudo apt-get install git 

在服务端新建一个git仓库,主要作用即同步本地生成的静态博客目录

1
2
cd git
git init --bare blog.git

配置钩子,这一步是为了将同步的内容放到网站目录下

1
2
3
cd blog.git
cd hooks
vim post-receive

写入以下文本

1
2
#!/bin/bash
git --work-tree=/website_path/lilac.fun --git-dir=/workd/git/blog.git checkout -f

之后可以设定绑定域名,并进行解析

/images/blog_diary/image-20220204005128264.png

在使用时发现文章最近更新时间不会随着文件修改而更新,去官网找了一下,最后在站点 config.toml中添加如下配置后终于正常了

1
2
3
4
5
6
# 用于配置前置内容
[frontmatter]
date = ['date', 'publishDate', 'lastmod']
expiryDate = ['expiryDate']
lastmod = ['lastmod', ':fileModTime', ':default']
publishDate = ['publishDate', 'date']