无云服务器零成本个人博客搭建
博客搭建方案
Hexo + Github + zeabur
选择理由
-
不需要专门购买云服务器或云主机,靠github就能推送到远端
-
Github不死,网站不倒(不是
前置工作
必要工具
检查是否安装成功
1 | node -v |
如果返回是版本号,说明安装成功
如果git返回是”不是内部或外部命令“,需要重新配置环境变量
这里给出解决方案,点击跳转添加环境变量
官方文档
开始搭建
安装hexo
1 | npm install -g hexo-cli |
国内直接安装如果遇到问题,可以先使用npm镜像站
1 | npm install -g cnpm --registry=https://registry.npmmirror.com |
大概等待20s左右,之后再运行一次,不过npm
要改成cnpm
在此以后的所有命令都默认改成cnpm
如下
1 | cnpm install -g hexo-cli |
vscode内终端操作
-
用vscode新建git bash终端如图
bash -
初始化,新建heo文件夹
1
hexo init heo
识别不到命令的话重启电脑,然后切换到新建文件夹
1
cd heo
下载依赖
1
cnpm install
-
生成静态文件,启动服务器就行了
1
hexo generate;hexo server
之后都可简写成以下命令,记得先cd到heo文件夹再使用命令
1
hexo g;hexo s
配置主题
hexo有丰富的主题可以使用,官网都可以找到Themes | Hexo
我这里以butterfly主题演示Butterfly源文件
-
git克隆butterfly主题,再bash中输入
1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
如果不开魔法下载不动,开魔法过不了ssl验证,建议关掉ssl验证,再bash输入
1
git config --global http.sslVerify false
想再次打开就把
false
改成true
如果连接不到github443端口,我是参考这篇文章解决的
解决Git连接失败:Failed to connect to github.com port 443 after 21090 ms: Couldn‘t connect to server
-
安装渲染器
1
cnpm install hexo-renderer-pug hexo-renderer-stylus
-
配置文件
找到
_config.yml
文件,翻到代码最下面,将主题改成butterfly
-
安装必要组件
1
cnpm install hexo-util --save
-
使用经典命令
1
hexo cl;hexo generate;hexo s
-
ctrl
+鼠标点击生成的 http://localhost:4000/ 可以查看效果 -
為了減少升級主題後帶來的不便,請使用以下方法(建議,可以不做)。
在 hexo 的根目錄創建一個文件
_config.butterfly.yml
,並把主題目錄的_config.yml
內容复制到_config.butterfly.yml
去。( 注意: 複製的是主題的
_config.yml
,而不是 hexo 的_config.yml
)具体可参考butterfly主题作者的官方文档
部署到公网
-
新建github仓库
create a new repository
,选择public
即可
-
配置
_config.yml
文件在文件内加上如下面格式的代码
1
2
3
4deploy:
type: 'git'
repo: 'https://ToKens@github.com/github用户名/仓库名' # 后半段是你的仓库地址,前半段是你在github申请到的ToKens
branch: main -
使用经典命令
1
hexo cl;hexo g;hexo d
hexo d
用于上传github -
其他
在github开发者设置中可申请到ToKens
-
zeabur免费获取域名
进入Zeabur,用github账户登录,新建项目随意选择一个免费的计划,然后授权github仓库,点击部署之后,生成一个免费的域名即可
每次操作的基本流程
生成静态文件 $\rightarrow$ 在本地预览 $\rightarrow$ 推送到github
即 hexo g
$\rightarrow$ hexo s
$\rightarrow$ hexo d
配置中能够帮忙解决问题的网址和视频
hexo官方文档:https://hexo.io/zh-cn/docs/
butterfly中文文档:https://butterfly.js.org/posts/21cfbf15/#安裝插件
我参考的b站视频: