建站日志

Ecool 收录于类别 BlogLog

2021-08-15 2022-05-08 约 2071 字预计阅读 5 分钟次阅读

已经有很久没有更新过了，再回看我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 评论系统

4.1 valine

我在这里使用的是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 hugo本地调试

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

1

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

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

1

hugo server --disableFastRender -e production

6 github部署

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

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

初次使用记得git init和git 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

7 私有服务器部署

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

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

首先进入控制台，能看到选择使用哪一种应用，这里选择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

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

8 文章最近更新配置

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

1
2
3
4
5
6


# 用于配置前置内容
[frontmatter]
date = ['date', 'publishDate', 'lastmod']
expiryDate = ['expiryDate']
lastmod = ['lastmod', ':fileModTime', ':default']
publishDate = ['publishDate', 'date']