免费构建个人博客:HEXO + GitHub + Cloudflare
免费构建个人博客:HEXO + GitHub + Cloudflare

免费构建个人博客:HEXO + GitHub + Cloudflare

准备

Cloudfalre Free Hostia Git GitHub Hexo Node.js 个人建站 为你写诗 互联网大善人

us.kg:用于注册免费域名或者在各大厂商购买域名,新用户首年非常便宜,可以先折腾一下。

除了us.kg还有很多免费的域名,但是有一部分需要和Cloudflare添加双向解析才能使用

Cloudflare:用于域名加速和解析

Node.js:用于运行Hexo

Git:用于版本控制

Github:代码托管、静态站点部署

安装Hexo

1.下载安装Node.js,除了自定义安装目录一直点击下一步,傻瓜式安装

Win + R,输入CMD打开命令行,输入node -v,如果出现版本号,则说明安装成功

将npm源修改为阿里云镜像源,在CMD窗口运行下面命令:

npm install -g cnpm --registry=https://registry.npmmirror.com

2.安装Git

3.SSH连接到GitHub

4.创建GiuHub仓库

创建一个和自己用户名相同的仓库,可见性选择public,方便第一次部署排除问题

5.初始化Hexo博客

创建一个文件夹保存博客源码,在文件夹内右键鼠标,选择Open Git Bash here

npm install -g hexo-cli && hexo -v

安装完成后输入 hexo -v 验证是否成功

初始化Hexo 项目并且安装依赖

hexo init blog-demo
cd blog-demo
npm i

输入 hexo cl && hexo s 启动项目

打开浏览器,访问localhost:4000 ,看到下面

6.将静态博客挂载到Github Pages

修改 _config.yml 文件,在 Blog-demo 目录下的 _config.yml,这是 Hexo 框架的配置文件,可以修改大部分配置,可参考官方wiki

修改最后一行的配置,将 repository 修改为自己的 GitHub 项目地址,branch 要改为 main 代表主分支(注意缩进)。

deploy:
type: git
repository: [email protected]:你的用户名/你的用户名.github.io.git
branch: main

安装 hexo-deployer-git:

npm install hexo-deployer-git --save

部署到 GitHub,输入命令:
hexo clean && hexo generate && hexo deploy

如果出现 Deploy done,则说明部署成功了。

  • hexo clean:删除之前生成的文件,可以用 hexo cl 缩写。
  • hexo generate:生成静态文章,可以用 hexo g 缩写。
  • hexo deploy:部署文章,可以用 hexo d 缩写。

稍等两分钟,打开浏览器访问:https://<用户名>.github.io/,就可以看到博客内容了。

7.配置Cloudflare pages

打开 Cloudflare ,在workers和pages中选择创建项目,选择pages的连接到Git

保存并部署,点击继续处理项目,在Cloudflare中,自定义我们注册的域名

把GitHub中的仓库设置为私有

本地启动

本地预览

hexo cl; hexo g; hexo s

推送上线

hexo cl; hexo g; hexo d

常用命令

hexo new [layout] <title>创建一篇新的文章
hexo generate 或 hexo g生成静态文件
hexo server 或 hexo s启动本地服务器
hexo deploy 或 hexo d部署网站
hexo clean清除缓存文件和已生成的静态文件
hexo clean; hexo server清除缓存并启动本地服务器查看最新效果
hexo clean; hexo generate; hexo deploy清除缓存后生成新文件并把内容发布到自己的服务器

参考

CM零成本搭建个人博客

免费搭建个人博客

Hexo系列合辑

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注