个人网站的组成部分：
1、域名：通过一个域名访问网站（如果没有域名，只能通过ip地址访问）
2、网站代码：网页、文字、图片
3、服务器：代码运行、数据保存等

个人网站的维护：
1、域名和服务器费用：国内域名需要备案才可以访问
2、更新文章：利用markdown写文章，直接更新到个人网站上
3、网络安全：？

搭建个人网站的诉求：
1、个人学习和积累：尽量免费、少花钱
2、搭建简单、维护简单，避免很多工具花里胡哨

资源部分：
1、单独购买云服务器、域名
2、利用一站式工具，打包进行网页开发、云服务器购买、域名购买等，比如WordPress工具
3、利用可以托管的免费平台，比如github

网站代码：
1、完全自己开发
2、直接使用模版 、拖拽式开发 or 少量代码修改
3、AI工具生成

部署代码：
1、宝塔
2、hexo

搭建步骤

1、安装Hexo

Hexo官网

Hexo 是一个快速、简洁且高效的博客框架。 Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。可以根据官网文档中的安装步骤进行。

要求：

1.1 安装Node.js
1.2 安装git

安装

  • 使用npm命令直接下载安装，先替换成国内的源下载更快
1
npm config set registry https://registry.npmmirror.com
  • install hexo
1
npm install -g hexo-cli

2、新建博客项目

  • 选择一个文件夹，在该文件夹下打开终端，运行命令来新建博客
1
hexo init hello-claire
  • 进入博客项目，安装依赖包
1
2
cd hello-claire
npm install
  • 运行
1
2
hexo generate
hexo server

到这里一个本地的初始博客已经诞生了，现在需要进行美化，以及发布到服务器上，让别人访问

3、将博客托管到GitHub Pages

github除了帮我们管理代码，gitbug也可以帮我们部署播客，所以就可以省去租用云服务器的钱

1 将我们代码托管到github

  • 现在github上创建一个项目
    helloclaire2025.github.io
  • 将我们的播客项目暂存到github仓库
    github提交
1
2
3
4
5
6
7
echo "# helloclaire2025.github.io" >> README.md
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/helloclaire2025/helloclaire2025.github.io.git
git push -u origin main

为了不上传node_modules中文件，增加了.gitignore文件，配置不上传的文件名

1
2
cat .gitignore
node_modules/

push代码遇到报错：

1
2
3
PS D:\Blogs\hello-claire> git push
fatal: unable to access 'https://github.com/helloclaire2025/helloclaire2025.github.io.git/': Failed to connect to github.com port 443 after 21088 ms: Could not connect to server

使用Clash vpn代理，但是push代码没有使用vpn，解决办法,端口号是Clash的端口

1
2
PS D:\Blogs\hello-claire> git config --global http.proxy 127.0.0.1:7890
PS D:\Blogs\hello-claire> git config --global https.proxy 127.0.0.1:7890

代码已经可以在github上看到了。

  • 新增一篇文章
1
hexo new post

2 使用Github Pages部署博客

  • 增加部署配置 到 _config.yml
1
2
3
4
5
6
7
deploy:

  type: git

  repository: https://github.com/helloclaire2025/helloclaire2025.github.io.git

  branch: main
  • 安装hexo部署插件
1
npm install hexo-deployer-git --save

到这里已经完成了，部署试一下

1
hexo clean && hexo generate && hexo deploy

把配置中的repo换成ssh链接的，部署遇到报错，替换成https就没有报错了

1
2
3
4
5
Error: Spawn failed
    at ChildProcess.<anonymous> (D:\Blogs\helloclaie2025\node_modules\hexo-deployer-git\node_modules\hexo-util\lib\spawn.js:51:21)
    at ChildProcess.emit (node:events:518:28)
    at cp.emit (D:\Blogs\helloclaie2025\node_modules\cross-spawn\lib\enoent.js:34:29)
    at ChildProcess._handle.onexit (node:internal/child_process:293:12)

3 打开浏览器查看博客

https://helloclaire2025.github.io

4、使用Cloudflare加速访问【可选】

github的一个问题就是国内访问不稳定，所以使用免费的Cloudflare代理一层，加速博客访问速度

  • 打开Cloudflare并登录
  • worker & pages > pages, 选择链接git，选择博客的仓库授权
  • 开始设置->开始部署->完成
  • 在部署tab,可以看到Cloudflare给我们分配的子域名，访问即可
  • 使用自定义域名，点击自定义域名，填进去自己的域名，点击激活，激活成功就可以了

5、博客页面美化

当前的博客只是一个最原始的页面，需要替换好看的主题，hexo有很多开源免费的主题，可以自行选择。

  • 选择一个主题，这里以chic为例
  • 查看README文件的安装办法
    • clone主题仓库
    • 修改配置文件_config.yml 的theme改为chic
      重新部署就可以了~~~

6、结合markdown编辑器，实现播客本地编辑

直接在source/_post/文件夹 下新增md文件
在文件开头增加属性

1
2
3
4
5
6
7
8
9
---

title: 博客文章的标题

date: 2025-04-10 20:55:32

tags:

---

运行部署

1
hexo clean; hexo g; hexo d

7、iconfont替换

在chic主题中使用了很多国外的社交媒体的icon，如果需要换成国内的，需要自己替换。
替换方法：
从iconfont.cn网站重新新件项目，添加需要的icon，下载Unicode模式的代码，在项目配置中可以勾选上eto和svg格式。
下载之后替换iconfont文件夹下面全部文件
然后从iconfont.css中找到引用icon的类名，也就是_config.yml中用来配置links的关键字。是icon-后面的字母，保持大小写一致，比如icon-bilibili, 在配置中的links也要配置成bilibili: https://xxxxxxx
一般这样就可以了。如果有问题可以找cursor排查，我遇到的一个问题是引用的icon文件找不到，在浏览器中报资源404，cursor帮我排查后修改了引用的文件地址，font_face中修改了字体的路径