如何搭建个人博客

本文将详细介绍如何使用Hexo框架搭建个人博客并且无任何费用，并将其部署到GitHub Pages和Cloudflare Pages上。本教程的内容包括：

环境准备：安装Node.js和Git
配置Git和GitHub：设置SSH密钥，创建GitHub仓库
初始化Hexo项目：安装Hexo，创建新博客
部署到GitHub Pages：配置部署设置，推送静态文件
部署到Cloudflare Pages：连接GitHub仓库，自动部署，配置自定义域名。
基本使用方法：创建新文章，本地预览，发布更新

本教程适合那些想要快速搭建个人博客，但又不想花钱的用户。通过使用Hexo、GitHub和Cloudflare的免费服务，您可以轻松创建一个高效、简洁的博客网站。并且绑定一个免费的域名。获取免费域名us.kg。先附上我搭建好的hexo博客：nirv.us.kg

1. 事前准备

域名（可选）

你可以选择使用免费的域名，如us.kg或使用GitHub.io或Pages.dev提供的域名，甚至自己购买域名。

必要服务

GitHub（必须）：注册一个GitHub账户，用于存储博客代码。
Cloudflare（可选）：注册一个Cloudflare账户，使用其CDN加速博客的访问。也可以选择直接使用GitHub提供的域名。

需要安装的工具

Node.js：安装Node.js，Hexo需要该环境运行。
Git：用于版本控制和部署。
VSCode（可选）：一款轻量的代码编辑器，帮助你提高编程效率。

环境配置-配置 Git 密钥并连接至 GitHub

配置用户名和邮箱：

在命令行中执行以下命令：

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

其中用户名为你GitHub账户用户名、邮箱同样为GitHub账户邮箱

执行git config -l确认配置是否成功。

配置SSH密钥连接GitHub

生成SSH密钥：

   ssh-keygen -t rsa -C "你的邮箱"

其中邮箱为GitHub账户邮箱

默认保存密钥位置后，会生成两个文件：

id_rsa（私钥）
id_rsa.pub（公钥）

可以看到密钥位置在C:\Users\28129\.ssh目录下

将公钥添加到GitHub：

进入GitHub设置，选择SSH and GPG keys，点击右上角New SSH key，设置个名称然后右键用记事本打开id_rsa.pub并将将文件中的内容粘贴到Key栏中保存即可。

测试连接：

   ssh -T git@github.com

如果连接成功，显示GitHub的欢迎信息，说明配置完成。

至此相关环境就配置完了

2.部署hexo博客

创建GitHub仓库

在GitHub上创建一个新的仓库，命名为<仓库名>.github.io（如myusername.github.io）。
确保选择Public（公开），然后点击Create repository。

这个页面可以先不动，等下还要来到这个仓库

至此用来存储博客的仓库就创建完毕

安装 Hexo-cli

在终端中执行以下命令安装Hexo：

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

执行hexo -v验证安装是否成功。

可以看到出现了相关版本号，这表示已经安装成功了

创建新Hexo博客项目

在文件夹中打开，执行以下命令：

hexo init blog-demo

此时创建hexo目录下就多了个blog-demo博客目录了

移动目录命令：项目结构如下：项目结构如下：cd /c/Users/28129/Downloads/hexo/blog-demo

cd blog-demo #前提还在hexo目录下否则请采用绝对路径
cd /c/Users/28129/Downloads/hexo/blog-demo

初始化项目

npm install

正常情况不会出现以下错误，但这错误问题不是很大、大、大。没有轮子照样飞、没有螺旋桨照样飞。

初始化完成后，项目结构如下：

node_modules：依赖包
scaffolds：文章模板
source：存放文章
themes：博客主题
config.yml：博客配置文件

启动本地博客

在终端中执行以下命令启动本地博客：

hexo clean && hexo s

然后在浏览器中访问 http://localhost:4000/ 查看效果，确保博客已成功构建。

至此hexo已经安装成功

3. 部署到 GitHub 仓库

安装 Hexo Git部署插件

执行以下命令安装Hexo部署插件：

npm install hexo-deployer-git --save

不出意外的话就出意外了，我安装失败了。我遇到了以下问题，如果你也是这样请根据下面的步骤进行解决

出现 npm error Cannot read properties of null (reading 'matches') 这样的错误提示，表明在执行 npm install hexo-deployer-git --save 命令时，npm 内部在处理相关逻辑时遇到了问题，它试图去读取某个值为 null 的对象的 matches 属性，而在 JavaScript 中，对 null 进行属性读取操作是不允许的，所以就抛出了这个错误。

我们先执行rd /s node_modules删除博客项目bolg-demo目录下的node_modules目录，也可以手动删除。接着在次执行刚才的npm install hexo-deployer-git --save安装命令来安装Hexo Git部署插件。不出意外的话应该根图中类似。这就表明成功安装了。

修改配置文件

我们需要修改配置文件使其链接到我们之前创建的GitHub仓库

打开_config.yml，修改deploy部分，填写你自己的GitHub仓库地址：

deploy:
  type: git
  repository: git@github.com:<用户名>/<用户名>.github.io.git
  branch: main

其中用户名为GitHub账户用户名、这部分（<用户名>.github.io）为刚才创建的仓库地址，可以看到我的为git@github.com:qyxhjoyb/xhblog.github.io.git。注意后面的git要有。

部署到GitHub

执行以下命令进行部署：

hexo clean && hexo generate && hexo deploy

如果出现Deploy done提示，说明部署成功。

访问 https://github.com/用户名/仓库名.github.io （https://github.com/qyxhjoyb/xhjoyb.github.io）可以看到hexo相关文件已经部署到刚才创建的xhjoyb仓库了。这时我们可以通过 GitHub Pages 提供的默认域名访问。

操作步骤：
- 登录到 GitHub 账号，进入对应的仓库页面（即 qyxhjoyb/xhblog.github.io 这个仓库）。
- 在仓库的 “Settings”（设置）页面中，找到 “Pages”（页面）选项卡（一般在左侧菜单中）。
- 在 “Pages” 页面里，查看 “Source”（来源）设置处，如果部署成功，应该能看到对应的分支（你配置的 main 分支）被选中作为页面来源，并且在上方会显示出一个类似 https://用户名.github.io/仓库地址.github.io/ 的网址（实际网址根据你的 GitHub 用户名和仓库名而定）。那么我的就是这个。https://qyxhjoyb.github.io/xhblog.github.io/
- 直接在浏览器中输入这个显示出来的网址，就可以访问到你部署好的 Hexo 博客了。

小技巧：如果你创建仓库时使用的名称是你GitHub的用户名那么地址就会是https://qyxhjoyb.github.io。如果你是跟我上面的步骤来，但现在想改成这样只需在当前创建的仓库的设置中重命名仓库即可。

至此我们就完成了hexo的部署，其实到此我们已经可以正式开始写文章了。如果你觉得域名太长且访问速度慢等问题，那么你可以继续跟着下面的操作来解决这些小问题。

关于自定义域名，我们可以在GitHub自定义域名，但我推荐在Cloudflare Pages自定义域名，下方的步骤将会讲解如何在Cloudflare Pages自定义域名。至于GitHub自定义域名可以自行百度。

4. 部署到 Cloudflare Pages

创建Pages页面

登录Cloudflare，进入Pages。
连接GitHub仓库，选择你的Hexo项目。
点击Save and Deploy，等待部署完成。

如果你是第一次使用这个，会提示你绑定GitHub账户，你根据指引绑定即可。如果没有显示出你的GitHub仓库那就是你设置了不允许访问。你只需要点击去设置下就行。

保存完后会自动跳转回原页面，如果跳转时提示错误就手动返回并重新点击创建页面即可，这时应该会像图中一样显示GitHub创建的hexo博客仓库了。最后点击保存，等待它自动部署就完事了，完成后点击继续就会来到下图的界面。大概等个几分钟的时间我们就可以通过图中域名访问了.可以看到我的是blog-xhjoyb-github-io.pages.dev

至此我们就成功的把hexo部署到Cloudflare，也不算是部署到Cloudflare。至此我们就成功给hexo博客套上了CDN了。Cloudflare会默认上CDN的。但是我们会发现访问地址还是太长，别着急，跟着下面的步骤继续走。

如果有自定义域名，可以在Cloudflare page中绑定域名进行访问。关于如何注册免费域名us.kg，可以查看这篇文章。

点击创建自定义域，输入想绑定的域名。

最后点击激活

等待生效，通常几分钟内就能生效

5.创建和发布新文章

创建新文章：

   hexo new "文章标题"

使用文本编辑器编辑source/_posts/文章标题.md，按照Markdown格式写作。

可以看到我使用的vscode工具写的，推荐这个工具。

本地预览文章：

   hexo clean && hexo s

部署到GitHub：

   hexo clean && hexo generate && hexo deploy

可以看到我们的文章已经在GitHub仓库了。

当我们将文章部署到GitHub的仓库时，Cloudflare page那边会自动重新部署，这时我们用域名访问时就能看到我们刚写的文章了。

6. 结语

通过上述步骤，您已经成功搭建并部署了个人博客，接下来可以开始创作内容，优化博客样式，探索更多Hexo的进阶功能，如主题美化等。

下期内容将讲解如何进行Hexo主题美化及进阶设置，敬请关注。

文章版权声明 1、本网站名称：开心宝
2、本站永久网址：https://joyb.cc
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

从零开始搭建个人博客 - 零成本搭建平时记录
# 博客搭建