hexo+github+leancloud纯前端全栈搭建免费个人博客2022(一)

🙂前言

小波原计划用vuePress+github来搭建一个免费个人博客，但是后来发现hexo+github+leancloud搭建免费个人博客也挺香，遂下定决心完成 廿壴(GANXB2) - 小波个人分享圈子 的第三次改版，也终于实现了纯前端全栈，和wordpress说再见了…

😍廿壴博客成品效果

🙂版本环境

操作系统：win11 21H2 22000.675

node：v18.0.0

git：git version 2.36.1.windows.1

hexo：^5.0.0

hexo-theme-fluid：^1.9.0

1. 知乎参考链接^[1]
2. csdn参考链接^[2]
3. hexo官网 ^[3]
4. fluid主题官网 ^[4]
5. github官网^[5]
6. leancloud官网^[6]
7. node官网^[7]
8. git官网^[8]
9. 国内镜像官网^[9]

😦第一步：安装node和git

• 有梯子的童鞋就直接去上面版本环境中小波已经准备好的各自官网下载 ☝☝

• 无梯子的童鞋就去上面的官网链接最后一个 “国内镜像官网” 下载即可

  (全程一路下一步即可，如需更详尽的软件安装中英对照图则给小波留言…)

安装成功后在终端中查看，如图：

🧐第二步：安装hexo

1
2
3
4
5
6
7
8
9

# 1. 全局安装脚手架
npm install -g hexo-cli 
# 2. 当前指向的文件夹blog初始hexo博客
hexo init blog
# 3. 终端切到上面的文件夹中，然后构建，热启动
cd blog
hexo new siteName
hexo g
hexo s

终端最终提示 Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. 表示成功！

复制链接到浏览器地址栏中打开即可预览

🤔第三步：github建空仓库和token

• 3.1 注册好github帐号后，点击your repositories(你的仓库)

• 3.2 然后点击按钮New(新建)

• 3.3 完善仓库信息后点击create repository(创建仓库)

repository name(仓库名字)需要和你的帐号用户名一致，格式必须如此：yourname.github.io

原因说明：

因为github的page功能非免费，相当于发挥了点小技巧利用自己主页域名绑定给当前仓库使用

• 3.4 点击网页右上角头像下拉菜单中的settings(配置)，再点击左边菜单最后的Developer settings(开发配置)

• 3.5 点击按钮Generate new token(生成新token)

• 3.6 配置token相关权限

点击generate token(生成token)后，记得要先把页面生成的token复制到其他文档中保存，因为页面刷新后则看不见了(为hexo博客发布插件deployer使用)

注意：

勾选上repo和delete_repo，token过期时间根据自己情况改长一点也可以，因为发布插件token过期即使更新也会弹框登录，必须更换新token

🤔第四步：leancloud创建应用和绑定域名

登录小波上面提供的leancloud官网，注册帐号 ，创建应用。（备用未来可能开启主题的扩展功能：例如统计，评论，点赞等）

• 国际版 提示：如果没有购买域名或者买的不需要备案的域名，则选择国际版

• 国内版 提示：如果是国内备案的域名则进入应用后点击左侧菜单–> 设置–>域名绑定

注意：

(这步操作主要为后面用waline评论插件使用)
国内版需要参考leancloud文档^[10]去自己主机商的域名管理页面，把leancloud给的CNAME解析别名一下，同时leancloud网站内再提交一次api域名备案
建议初次玩用的免费域名或者域名备案资料不全推荐使用国际版，则不需要做域名绑定

😚第五步：安装主题fluid和发布插件deployer

思路说明：

参考fluid官网的文档^[4]，直接安装后，把mode_modules/hexo-theme-fluid/文件夹里的_config.yml复制一份出来到博客文件夹的根目录，改名为_config.fluid.yml，然后修改博客名称，导航菜单等常用基础配置

提示：如果要后期魔改主题，小波建议用下载文件包copy到theme中的方式。

• 5.1 终端切到博客文件夹，然后安装fluid主题和git发布插件deployer

1
2
3

cd blog
npm install --save hexo-theme-fluid
npm install --save hexo-deployer-git 

• 5.2 博客文件夹的根目录_config.yml在代码末尾修改主题配置

1
2

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

• 5.3 博客文件夹的根目录_config.yml在代码末尾修改git发布插件配置，然后终端执行hexo d发布推送

1
2
3
4
5
6

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://xxxxtokenxxxx@github.com/yourname/yourname.github.io.git
  branch: master

注意：

1. branch(分支)改成了master，所以要回github把默认分支也改成master
   
2. repo必须改成token+用户名格式，因为最新安全问题，github无法再继续直连，token是上面步骤3.5创建所得

到此，即初步完成用hexo+github+leancloud+fluid主题搭建免费个人博客。

总结：hexo的操作命令

1
2
3
4
5
6
7
8

# 清空
hexo clean
# 构建
hexo g
# 热启动本地预览
hexo s
# 发布推送github
hexo d

😫搭建过程中小波遇见的问题

1. hexo d发布时经常容易连接github失败，报错ssl超时OpenSSL SSL_connect: Connection was reset in connection to github.com:443，不用管直接再来一次 hexo d

😊来自小波的bilibili视频教程

🙂搭建过程中小波用到的相关链接

『旅行者』，帮小波关注一波公众号吧。

小波需要100位关注者才能申请红包封面设计资格，万分感谢！

关注后可微信小波，前66的童鞋可以申请专属红包封面设计。