搭建个人博客全流程技术方案

经验
发布日期:   2025-11-08
更新日期:   2025-11-08
文章字数:   907
阅读时长:   3 分
阅读次数:  

本文结合我自己的博客搭建经验，记录一次完整的（Hexo）静态博客搭建过程。

准备

  1. 首先准备一个  github  账号，没有就去注册一个。
  2. 本次是基于  git  进行部署，所以首先安装一个  git，链接: https://git-scm.com/downloads，使用 GitKraken 快速操作 git 命令。
  3. 安装  node.js ，官网链接： Node.js — Download Node.js®
  4. 安装这两个，一般都会自动配置  path，配置这个目的是可以在任何路径下使用  git 和 node.js，如果没有配置环境变量，可以去配置一下并测试安装是否成功。
# win + r 调出 cmd 命令行窗口，然后按照示例输入
# 如果出现版本号，说明已经安装成功了
C:\Users\p1783>node -v
v22.14.0

C:\Users\p1783>git --version
git version 2.51.0.windows.1
  1. git  还需要配置相应的环境， 实现  git  和  github  之间的交互，如使用  git  拉取  github  项目、配置相应的密钥等等，使用 git 拉取 github 项目-CSDN 博客。

本地博客

创建一个 github 仓库，点击  Create repository

仓库名为  Github用户名.github.io  这个格式，注意记得勾选  Add a README file，为了方便后续查看 GitHub Pages 的域名和部署分支，然后点击创建，查看这个分支，这里为  main  分支，后面需要用到，然后  https://AFulcrum.github.io  就是后续我们访问的域名。

在https://github.com/AFulcrum/AFulcrum.github.io/settings/pages处，将 Build and deployment 下的 source 改为 Github Actions 并保存（会自动保存）。

克隆仓库到本地(D:\works\Project\AFulcrum.github.io>)，创建一个新的分支dev用来保存源码，main 分支用来放部署的文件，下面直接为 dev 分支下。

#将 Hexo 命令行工具安装到系统的全局环境中
D:\works\Project\AFulcrum.github.io> npm install -g hexo-cli

#创建一个新的 Hexo 项目
D:\works\Project\AFulcrum.github.io> hexo init AFulcrum.github.io

将新建的AFulcrum.github.io  文件夹内的文件全部转移放在上一级的AFulcrum.github.io  文件夹里，这样能用到 github 的 page。

删除空的AFulcrum.github.io文件夹

# 安装 Hexo 项目所需的依赖项
D:\works\Project\AFulcrum.github.io> npm install

最后会有下面的文件结构：

AFulcrum.github.io/
├── .git/
├── .github/
├── node_modules/
├── public/
├── scaffolds/
├── source/
├── themes/
├── config.landscape.yml
└── config.yml
└── README.md

输入下面命令，打开本地浏览器，访问  http://localhost:4000/，成功打开正常界面即为成功。

D:\works\Project\AFulcrum.github.io> hexo server

加入主题

使用hexo-theme-matery主题，  点击  闪烁之狐可以查看示例效果。

#安装在了themes文件夹里
D:\works\Project\AFulcrum.github.io> git clone https://github.com/blinkfox/hexo-theme-matery.git butterfly themes/matery

修改 Hexo 根目录下的  _config.yml  的  theme  的值：theme: matery

查看Hexo 博客主题之 hexo-theme-matery 的介绍 | 闪烁之狐中配置文档设计个性化的博客。

线上部署

在  _config.yml  中添加：

deploy:
  type: git
  repo: https://github.com/AFulcrum/AFulcrum.github.io.git
  branch: main

安装部署插件：

D:\works\Project\AFulcrum.github.io> npm install hexo-deployer-git --save

运行下面命令即可将生成的静态页面推送到部署仓库 main 分支并通过afulcrum.github.io访问。

hexo g && hexo d

CND 加速

放在 Github 的资源在国内加载速度比较慢，因此需要使用 CDN 加速来优化网站打开速度，jsDelivr + Github 便是免费且好用的 CDN，非常适合博客网站使用。

经验
  目录