使用 Hexo、GitHub 和 Cloudflare Pages 搭建个人博客
原文地址:https://itxiaozhang.com/building-personal-blog-with-hexo-github-cloudflare-pages/
一、安装 Node.js
- 下载 Node.js 安装包 - 前往 Node.js 官网 https://nodejs.org/,点击“LTS”按钮下载最新的 LTS 版本。
 
- 安装 Node.js - 双击下载的安装包,按照提示进行安装。默认选择即可。安装完成后,会自动安装 Node.js 和 npm(Node.js 的包管理工具)。 
- 安装完成后,打开命令提示符(可以通过按 - Win + R,输入- cmd,然后按回车键打开),输入以下命令检查 Node.js 和 npm 是否安装成功:- 1 
 2- node -v
 npm -v
- 你应该会看到 Node.js 和 npm 的版本号。 
 
二、安装和配置 Hexo
- 安装 Hexo CLI - 在命令提示符中输入以下命令安装 Hexo CLI: - 1 - npm install -g hexo-cli
 
- 初始化 Hexo 项目 - 在命令提示符中,切换到你想要存放博客文件的目录,例如 - D:\Blogs:- 1 - cd /d D:\Blogs
- 初始化 Hexo 项目: - 1 
 2
 3- hexo init my-blog
 cd my-blog
 npm install
 
- 生成静态文件并测试 - 在命令提示符中输入以下命令生成静态文件: - 1 - hexo generate
- 启动本地服务器进行测试: - 1 - hexo server
- 打开浏览器,访问 http://localhost:4000/ 以查看生成的博客页面。 
 
- 取消忽略 - public目录- 打开 D:\Blogs\my-blog目录,找到并编辑.gitignore文件,删除public/这一行,使public目录不再被忽略。
 
- 打开 
三、使用 SSH 链接 GitHub
- 生成 SSH 密钥对 - 打开 Git Bash(如果没有请自行安装),输入以下命令生成 SSH 密钥对: - 1 - ssh-keygen -t rsa -b 4096 -C "xiaozhang@example.com"
- 按照提示操作,默认路径即可(按 3 次回车),生成的密钥对通常保存在 - C:\Users\YourUsername\.ssh目录中。
 
- 将公钥添加到 GitHub - 打开文件资源管理器,导航到 C:\Users\YourUsername\.ssh,用记事本打开id_rsa.pub文件,复制文件内容。
- 登录 GitHub,进入 Settings>SSH and GPG keys,点击New SSH key,将公钥粘贴进去并保存。
 
- 打开文件资源管理器,导航到 
- 验证 SSH 链接成功 - 在 Git Bash 中输入以下命令验证与 GitHub 的连接: - 1 - ssh -T git@github.com
- 如果连接成功,你将看到类似以下的输出: - 1 - Hi xiaozhang! You've successfully authenticated, but GitHub does not provide shell access.
- 如果看到这条信息,说明 SSH 连接配置成功。 
 
四、创建 GitHub 仓库
- 登录 GitHub 并创建一个新的仓库 - 登录 GitHub,点击右上角的“+”,选择 New repository,创建一个新的仓库。
- 仓库名(随便起):xiaozhang.github.io
- 仓库类型:Public
 
- 登录 GitHub,点击右上角的“+”,选择 
- 在本地仓库中添加 GitHub 远程仓库 - 打开命令提示符,导航到 Hexo 项目目录: - 1 - cd /d D:\Blogs\my-blog
- 初始化 Git 并添加远程仓库: - 1 
 2- git init
 git remote add origin git@github.com:xiaozhang/xiaozhang.github.io.git
 
- 将整个项目文件夹推送到 GitHub 的 - main分支- 首先,确保 - .gitignore文件已经配置好,以便包括- public目录中的内容。然后,执行以下命令:- 1 
 2
 3
 4- git add .
 git commit -m "Initial commit"
 git branch -M main
 git push -u origin main
 
五、配置 Cloudflare Pages
- 登录 Cloudflare 并创建一个 Pages 项目 - 登录 Cloudflare,进入 Dashboard,点击 Pages,然后点击Create a project。
- 选择 Connect to Git,并连接到你在 GitHub 上的仓库xiaozhang.github.io。
- 选择 main分支作为构建分支。
 
- 登录 Cloudflare,进入 Dashboard,点击 
- 配置 Cloudflare Pages - 在设置页面中,将 “Output Directory” 设为 public。其他设置保持默认即可。
 
- 在设置页面中,将 “Output Directory” 设为 
六、配置自定义域名
- 在 Cloudflare 上添加域名 - 登录 Cloudflare,进入 Dashboard,点击 Add a Site,添加域名。
 
- 登录 Cloudflare,进入 Dashboard,点击 
- 配置 DNS 记录 - 在 Cloudflare 的 DNS 管理页面中,添加一条 CNAME 记录,指向 Cloudflare Pages 的默认域名(如 xiaozhang.github.io)。
 
- 在 Cloudflare 的 DNS 管理页面中,添加一条 CNAME 记录,指向 Cloudflare Pages 的默认域名(如 
- 在 Cloudflare Pages 上配置自定义域名 - 进入 Cloudflare Pages 项目的设置页面,找到 Custom Domains,添加自定义域名。
 
- 进入 Cloudflare Pages 项目的设置页面,找到 
备注:
sticky: true # 添加这一行来置顶文章,有些主题可能需要特定的格式或数值
▶ 如果您需要远程电脑维修或者编程开发,请加我微信咨询。
▶ 本网站的部分内容可能来源于网络,仅供大家学习与参考,如有侵权请联系我核实删除。
▶ 我是小章,目前全职提供电脑维修和IT咨询服务。如果您有任何电脑相关的问题,都可以问我噢。