前言

之前用vercel+chatgpt next web搭建GPT私人站点后，发现vercel部署静态网站非常方便，于是就想着也用vercel搭建个人博客。捣鼓了一天，对功能和样式进行了一些修改美化，最终搭建完成。本文将介绍如何使用hexo+vercel+butterfly搭建个人博客。

hexo

  • 安装

    1
    2
    3
    4
    5
    npm install -g hexo-cli
    //在本地文件夹内
    hexo init <folder>
    cd <folder>
    npm i

  • 本地运行

    1
    2
    3
    hexo clean	# 清除缓存文件 (db.json) 和已生成的静态文件 (public)。第一次建站可以不执行
    hexo generate # 生成静态文件。
    hexo server # 启动本地服务器。默认情况下，访问网址为： http://localhost:4000/。

vercel

本地hexo文件夹上传github

安装 hexo-deployer-git

1
npm install hexo-deployer-git --save

更改_config.yml的deploy选项

1
2
3
4
5
deploy:
  type: "git"
  repo: git@github.com:goatpang/HexoBlog.git 
  # 用https会出错，git才可以（原因未知）
  branch: main

然后执行

1
2
3
hexo clean	# 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo generate # 生成静态文件
hexo deploy # 部署网站

Vercel部署

点击import project导入github项目，然后点击deploy部署即可。

  • vercel域名绑定
    在vercel项目中，点击域名，然后点击add域名，输入域名。最后还需要在域名服务商那里添加cname记录，cname记录的值为vercel提供的域名。

butterfly | 样式美化&功能优化

主题美化

主要参考文章：https://www.wzhecnu.cn/2021/07/22/blog/hexo-02-zhu-ti-mei-hua/
以及：官方文档

网站图标显示

网页图标需要压缩到很小才能生效，可以使用：https://www.bitbug.net/

URL美化

参考文章：https://imbhj.com/b6a99401/

Hexo 文章链接默认的生成规则是：:year/:month/:day/:title，是按照年、月、日、标题来生成的。

这样的话，生成的链接非常长长长长长，而且如果我们的 Markdown 使用中文标题，那就更惨了，URL 一转码，将是一场灾难。

1
npm install hexo-abbrlink --save

评论区功能

采用giscus：https://zhuanlan.zhihu.com/p/603658639

底部栏美化

footer美化（包含底边的badge）：https://www.aohuiliu.fun/posts/26947/

https://www.cnblogs.com/sddai/p/13779316.html
https://lpd-ios.github.io/2017/05/03/GitHub-Badge-Introduction/

badge官网：https://shields.io/

文章置顶

文章置顶：https://www.jianshu.com/p/42a4efcdf8d7

引入图片

师姐的一篇文章，和typora搭配使用非常方便：https://c10udlnk.top/p/blogsFor-Enjoying-hexo/#%E4%BC%98%E9%9B%85%E5%9C%B0%E5%9C%A8%E5%8D%9A%E5%AE%A2%E4%B8%AD%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87

spawn failed

  1. 删除.deploy_git文件夹;
  2. 输入git config --global core.autocrlf false
  3. 然后，依次执行：
    hexo clean
    hexo g
    hexo d

博客源码

在这里，可以给个star哦