小波原计划用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复制到其他文档中保存,因为页面刷新后则看不见了(为博客发布插件deployer使用)

github的token


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


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

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

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

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

leancloud创建应用
leancloud绑定域名


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


🤔第五步:安装hexo主题fluid和git发布插件deployer,配置参数然后发布推送

思路说明:

参考fluid官网的文档,直接安装后,把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搭建免费个人博客小波用到的参考网址


微信

微信

支付宝

支付宝

hexo+github+leancloud纯前端全栈搭建免费个人博客2022(一)
https://blog.ganxb2.com/23535.html
作者
chopin gump
许可协议
小尾巴
Stay Hungry, Stay Foolish「求知若饥, 虚心若愚」 — 廿壴(ganxb2)
好好说话,咱们还能做盆友!(填写QQ邮箱即可快速收到回复通知~)🦐_(≧∇≦」∠)_