雨来

千里之行,始于足下 thesky341@foxmail.com

0%

hexo更换主题

背景

hexo 默认主题真丑!!!想要选择一个简约的主题,同时能显示一些个人信息,让博客更加完整。

目标

  1. 更换 hexo 主题

过程

更换主题

查看了好多个主题,最后在 github 搜索 hexo theme,发现最高star的项目 next 很符合我的口味。next 更加简约,也能够展示我想要的信息,因此选择了 next 主题。

next 主题有两个仓库,老仓库是个个人仓库,开发了 hexo-theme-next 主题。这个仓库火了之后,开了一个正式的账号theme-next,后续next 主题的更新是在新仓库发布的。

官方文档:theme-next 安装文档

1
2
3
4
5
6
7
8
9
10
11
12
13
# 下载安装最新稳定版
mkdir themes/next
curl -L https://api.github.com/repos/theme-next/hexo-theme-next/tarball/v7.8.0 | tar -zxv -C themes/next --strip-components=1

# 修改 _config.yml,使用next主题
vim _config.yml
------_config.yml
theme: next

# 查看安装结果
hexo clean # 删除以前配置
hexo server --debug
# 访问 4000端口,发现正常访问,符合预期

下面是更换效果

细节配置

接下来是私人习惯配置
参考老的官方文档:Next 使用文档

hexo 里有两个配置文件,hexo自带的_config.yml,为站点配置文件;主题自带文件,如themes/next/_config.yml,为主题配置文件,可以copy到my_blog/目录,作为_config.next.yml文件

这部分就不记录了,比较零碎,适合根据官方文档一点点配置。

自动部署

这部分超级超级推荐,现在每次本地更新完,一键更新到线上,也不会对博客更新感到厌烦了。

在实际写 blog 时,我先在本地编写和预览,然后上传到服务器进行发布。为了简化上传和部署的流程,写了一个函数来执行。

执行时有点报错,不过能用就行,先这样吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# 需要将函数写入 .zshrc 或 .bashrc 文件
# 使用时在本地执行 publish_my_blog
function publish_my_blog() {
echo "准备发布博客新版本到云服务器..." $(date +%H:%M:%S)
# 进入 my_blog所在的父目录
cd /Users/$USER/
# 压缩文件夹
tar -czf my_blog.tar.gz my_blog
#传送文件夹
# 注意更换端口、用户名、路径
scp -P 4567 my_blog.tar.gz newname@xx.xx.xx.xx:/home/newname
# 删除压缩包
rm my_blog.tar.gz
echo "博客新版本已经上传云服务器..." $(date +%H:%M:%S)
echo "准备执行远程命令..." $(date +%H:%M:%S)

# 注意更换端口、用户名、路径
# 1. 进入目录
# 2. 杀掉正在运行的 hexo
# 3. 删除原来的 my_blog
# 4. 解压缩
# 5. 删除压缩包
# 6. 进入 my_blog
# 7. 删除缓存
# 8. 生成模版文件
# 9. 后台执行
ssh -p 4567 newname@xx.xx.xx.xx "cd /home/newname;
ps -ef | grep hexo | grep -v grep | awk '{print $2}' | sudo xargs kill -9;
rm -rf /home/newname/my_blog;
tar -zxf my_blog.tar.gz;
rm my_blog.tar.gz;
cd my_blog;
hexo clean;
hexo generate;
nohup sudo hexo server -p 80 -s > /home/newname/myblog.log 2>&1 &"
echo "云服务器已经执行发布新版本" $(date +%H:%M:%S)
# 返回原目录
cd -
}

参考文档

九个好看实用的Hexo主题推荐 - 掘金
hexo博客主题推荐
8 款颜值爆赞的 Hexo 主题推荐!快来搭建个人博客玩玩 | Github掘金计划
最终选择 next 主题:GitHub - theme-next/hexo-theme-next: Elegant and powerful theme for Hexo.