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


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


😍先上廿壴(ganxb2)博客 -小波个人分享圈子纯前端全栈hexo个人博客最终成品效果

廿壴(ganxb2)博客 -小波个人分享圈子


🙂版本环境

操作系统: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

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

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

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


安装成功后在终端中查看,如图:

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(你的仓库)

注册 github 帐号

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

github创建仓库

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

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

原因说明:

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

github创建仓库

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

github的settings

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

github的token

  • 3.6 配置token相关权限

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

注意:

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

github的token


🤔第四步:leancloud注册帐号,创建应用和绑定域名

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

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

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

leancloud创建应用

leancloud绑定域名

注意:

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


😚第五步:安装主题fluid和git发布插件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

😫hexo搭建免费个人博客过程中小波遇见的问题

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

😊来自小波的bilibili视频教程


🙂hexo搭建免费个人博客小波用到的相关链接

THE END
hexo+github+leancloud纯前端全栈搭建免费个人博客2022(一)
https://blog.ganxb2.com/23535.html
作者
chopin gump chopin gump
许可协议
小尾巴
Stay Hungry, Stay Foolish「求知若饥, 虚心若愚」 — 廿壴(ganxb2)
微信

微信

支付宝

支付宝

🕐如果评论显示“刷新”无法加载,过一会再来康康~🕢 _(≧∇≦」∠)_ (填写常用邮箱即可快速收到回复通知~)