跳到主要内容
极客日志极客日志
首页博客AI提示词GitHub精选代理工具
搜索
|注册
博客列表
JavaScriptNode.js大前端

使用 Github 与 Hexo 搭建在线个人博客

在无服务器环境下,使用 Git 和 Node.js 配合 Hexo 静态博客生成器,结合 GitHub Pages 搭建个人博客的完整流程。内容包括环境配置(Git、Node.js)、Hexo 初始化与主题安装、GitHub 仓库创建与 SSH 密钥配置、以及最终的项目部署与访问设置。通过此方案可实现博客内容的本地编写与互联网发布。

PgDevote发布于 2026/3/21更新于 2026/5/417 浏览
使用 Github 与 Hexo 搭建在线个人博客

需求背景

自己没有任何可用的在线服务器,但是平时使用 Markdown 编写博客内容,想要将这些博客内容分享到互联网上,让大家都可以查看自己写好的博客内容;同时也方便自己在线访问查阅。 没有在线服务器则可以借助 GitHub 这个最大的全球在线平台;使用 Markdown 编写博客则可以使用静态博客 Hexo。

文章配图

搭建步骤

环境准备

安装 Git

Git

文章配图 文章配图 文章配图

在 Git 安装完成之后点击鼠标右键选择【Git Bash Here】或者直接打开解压后的 Git 目录下的【git-bash.exe】查看 Git 的版本信息 git --version 如下图所示:

文章配图 文章配图 文章配图

至此本机 Git 安装完成。

安装 Node.js

Node.js — Download Node.js®

文章配图

文章配图
文章配图
文章配图
文章配图
文章配图
文章配图
文章配图
文章配图
文章配图

配置 Node.js 在 Windows 的环境变量:选择【此电脑】-->点击鼠标右键【属性】-->【高级系统设置】-->【环境变量】-->在【系统变量】点击【新建】输入变量名【node】,变量值输入 Node.js 的路径(如:E:\AllSoftWare\DevelopSoftWare\NodeJs)-->【确定】后再 Git Bash 中输入 node -v 显示版本信息则表示安装 Node.js 成功。如下图所示:

文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图

至此输入 node -v 显示版本信息,表示已经安装 Node.js 成功了。

安装 Hexo

安装 cnpm

npm(Node Package Manager),而 cnpm 是国内版的 npm,在国内直接使用淘宝提供的下载会更快。

# 在 Git 中安装 cnpm 命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 验证 cnpm 是否安装完成(显示对应的版本信息则表示安装成功)
cnpm -v

文章配图

注意:如果在安装 cnpm 命令后,使用 cnpm -v 提示'bash: cnpm: command not found'时是因为我们的 cnpm 被安装到了其他目录,一般情况下是安装在 C:\Users\自己用户名\AppData\Roaming\npm(如 C:\Users\CoffeeMilk\AppData\Roaming\npm);也可以通过【Everything】工具来查找 cnpm 的路径(如:F:\SoftWareResources\AiBox\ai\pic-smaller\pic-smaller\.ai\node-v18.19.0-win-x64\node_global),然后将这个查找到的路径添加到【XXX 用户变量】的【Path】中后再次输入 cnpm -v 即可看到。

文章配图 文章配图 文章配图 文章配图 文章配图 文章配图

至此显示 cnpm 的版本信息内容表示安装完成。

安装 Hexo

# 使用 cnpm 下载安装 Hexo
cnpm install hexo-cli -g
# 查看 hexo 版本信息 (显示对应的版本信息则表示安装成功)
hexo -v

文章配图

创建指定名称的 Hexo 项目

# 进入指定路径 (比如我想要将博客内容都放置在 F 盘的 MyBlog 目录中,则先进入该目录下)
cd F:\MyBlog
# 创建一个名为 ckblogs 的 Hexo 新项目
hexo init ckblogs
# 进入该内容目录中
cd ckblogs
# 安装 Hexo 项目所需的依赖内容
npm install
# 安装 Hexo 项目所需的依赖内容并保存
npm install hexo-deployer-git --save
# 启动 Hexo 项目(启动后不要立即按下 Ctrl+C 停止服务)
hexo server
# 可以直接在浏览器输入 localhost:4000 即可访问到项目页面(表示项目安装配置完成)
http://localhost:4000/

文章配图 文章配图

至此创建的名为 ckblogs 的 Hexo 项目完成。

文章配图

预览 Hexo 的主题并配置到自己项目中

  1. 到 Hexo 主题官网 浏览主题,挑选自己喜欢的(如:Kratos-Rebirth、Amazing、Reimu)

Kratos-Rebirth 主题加入自己 Hexo 项目【blog】的操作:

# 给使用 Hexo 创建的项目【blog】添加主题【Kratos-Rebirth】
cd F:\MyBlog
cd blog
git clone https://github.com/Candinya/Kratos-Rebirth/archive/refs/tags/v2.2.0.zip themes/amazing
# 将下载好的 Kratos-Rebirth-2.2.0.zip 解压到 F:\MyBlog\blog\themes 目录中且名称修改为 Kratos-Rebirth
# 编辑 F:\MyBlog\blog 目录下的 _config.yml 文件中的 theme: landscape 修改为 theme: Kratos-Rebirth 保存
# 进入创建好的 blog 项目中
cd F:\MyBlog
cd blog
# 安装 blog 项目所需的依赖内容
npm install
# 清除缓存
hexo clean
# 编译
hexo g
# 启动服务
hexo s

文章配图 文章配图 文章配图 文章配图 文章配图

Amazing 主题的加入到自己 Hexo 项目【ckblogs】中的操作:

# 进入 Hexo 项目目录
cd F:\MyBlog
cd ckblogs/
# 在需要使用这个主题的项目中克隆主机
git clone https://github.com/removeif/hexo-theme-amazing.git themes/amazing
# 修改所在项目目录下的 _config.yml 文件中倒数第二主题内容为 theme: amazing
# 安装该主题的依赖包(即主题文件 package.json 最后面的 dependencies 内容)
# 注意:主题文件 package.json 里面最后没有 dependencies 内容的就不用安装
npm install --save [email protected] deepmerge@^4.3.1 hexo@^7.1.1 hexo-component-inferno@^3.1.2 hexo-log@^4.1.0 hexo-pagination@^3.0.0 hexo-renderer-inferno@^1.0.2 hexo-renderer-stylus@^3.0.1 hexo-util@^3.2.0 inferno@^8.2.3 inferno-create-element@^8.2.3 moment@^2.30.1 semver@^7.5.4
# 清除缓存
hexo clean
# 编译
hexo g
# 启动服务
hexo s
# 浏览器访问 http://localhost:4000/ 查看效果

文章配图 文章配图 文章配图 文章配图 文章配图 文章配图

其余的主题配置也是类似的操作。

查看并强制删除 4000 端口进程

# 查看 windows 系统的 4000 端口的进程
netstat -ano | findstr 4000
# 强制杀死指定进程(如:1652 进程)
taskkill /f /pid 1652

文章配图

部署到 Github

注意:若没有 GitHub 账号则需要先注册一个,GitHub 官网地址是 https://github.com/

配置免密登录 GitHub

# 先在本机指定路径下生成一对密钥(一般生成的路径是:C:\Users\电脑当前的用户名\.ssh)
ssh-keygen -t ed25519 -C"[email protected]"

文章配图 文章配图

将本地生成的 SSH 公钥内容复制到 GitHub 中

将本地生成的 ssh 密钥对中的文件结尾带有.pub 的公钥文件内容复制一份到 GitHub 中【登录自己的 GitHub 账号,然后点击右上角的头像】-->【Settings】-->【SSH and GPG keys】-->【New SSH key】-->【输入 Title 内容 (随便填写)、选择 Key type 是(Authentication key)、将本地生成的 ssh 密钥对中的文件结尾带有.pub 的公钥文件内容全选后粘贴到 Key 输入框中】-->【Add SSH key】,相信操作如下图所示:

文章配图 文章配图 文章配图

在 Github 上创建所属博客的仓库

在 GitHub 界面上选择右上角的加号【+】-->【New repository】-->【根据自己情况填写仓库名称 (如:blog)】-->【Create repository】;然后该 GitHub 上的仓库就创建完成了,在这个仓库界面选择右边的【code】-->【local】-->【ssh】-->点击复制图标即可获取到该仓库的 SSH 链接。详细操作如下图所示:

文章配图 文章配图 文章配图

# 在正式执行 hexo d 命令将本地的 Hexo 项目部署到 github 上前,还需要给上传的项目(如 F:\MyBlog\blog\_config.yml 文件最后添加如下内容才可实现上传到 github 指定仓库)
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: [email protected]:自己在 github 上的用户名称/仓库名称.git
  branch: main
  name: 自己在 github 上的用户名称
  email: 自己在 github 上的用户对应的邮箱

文章配图

# 进入本地 Hexo 创建的 blog 项目中
cd F:\MyBlog
cd blog
# 安装部署项目到 github 所需的包
npm install hexo-deployer-git --save
# 清除缓存
hexo clean
# 编译 blog 项目
hexo g
# 部署 blog 项目到 github 上
hexo d

文章配图 文章配图

注意:在部署 blog 项目到 GitHub 上时若提示:'error: GH013: Repository rule violations found for refs/heads/main. ! [remote rejected] HEAD -> main (push declined due to repository rule violations) error: failed to push some refs to '[email protected]:xxx/blog.git''时,是因为我们推送的当前项目中包含了密钥内容,导致 GitHub 的密钥扫描发现了就禁止推送了。我们根据提示的消息将类似【Tencent Cloud Secret ID】下面给出的 remote 链接【https://github.com/xxx/blog/security/secret-scanning/unblock-secret/xxx】复制到浏览器上授予允许后再来重新执行 hexo d 命令重试即可解决,相信操作如下图所示:

文章配图 文章配图 文章配图

至此你已经将本地的 Hexo 创建的 blog 项目部署到 GitHub 的仓库中了。

文章配图

开启部署到 Github 的博客网址

选择自己的博客仓库的【Settings】-->【Pages】-->【Branch 项下选择(main)-->(/root)】-->【Save】-->【Source 下面选择 Deploy from branch】即可获取到博客的网址(如:https://kafeiweimei.github.io/blog/)在浏览器中输入这个网址即可查看到我们部署的网站内容(注意:若我们看到的网站是排版混乱的,此时可以在浏览器界面打开 F12 后选择网络后按下 F5 键刷新仔细看资源加载,一般情况下都是这些资源的路径不对【即:我们需要重新配置一下该博客仓库的网站根目录】及其 _config.yml 文件内的 url 后面添加上自己网站的地址)如下图所示:

文章配图 文章配图 文章配图 文章配图 文章配图

新增博客内容

只用在自己博客的【source】-->【_posts】目录下创建以.md 结尾的文档即可;然后将项目编译部署到 GitHub 即可看到效果了。

注意:

  1. 新创建的 markdown 文件开头需要先插入如下内容用作右侧的标签与目录内容展示:
---
title: hello world
date: 2025-11-03 11:31:36
categories: 教程文档
tags:
  - markdown 快速入门
  - 编写一个 markdown 文件
  - markdown 的常用方法
sticky: 100
pic:
comments: true
toc: true
expire: true
only:
  - home
  - category
  - tag
---

文章配图

# 进入本地 Hexo 创建的 blog 项目中
cd F:\MyBlog
cd blog
# 安装部署项目到 github 所需的包(已经安装过就不用安装了)
npm install hexo-deployer-git --save
# 清除缓存
hexo clean
# 编译 blog 项目
hexo g
# 部署 blog 项目到 github 上
hexo d

目录

  1. 需求背景
  2. 搭建步骤
  3. 环境准备
  4. 安装 Git
  5. 安装 Node.js
  6. 安装 Hexo
  7. 安装 cnpm
  8. 在 Git 中安装 cnpm 命令
  9. 验证 cnpm 是否安装完成(显示对应的版本信息则表示安装成功)
  10. 安装 Hexo
  11. 使用 cnpm 下载安装 Hexo
  12. 查看 hexo 版本信息 (显示对应的版本信息则表示安装成功)
  13. 创建指定名称的 Hexo 项目
  14. 进入指定路径 (比如我想要将博客内容都放置在 F 盘的 MyBlog 目录中,则先进入该目录下)
  15. 创建一个名为 ckblogs 的 Hexo 新项目
  16. 进入该内容目录中
  17. 安装 Hexo 项目所需的依赖内容
  18. 安装 Hexo 项目所需的依赖内容并保存
  19. 启动 Hexo 项目(启动后不要立即按下 Ctrl+C 停止服务)
  20. 可以直接在浏览器输入 localhost:4000 即可访问到项目页面(表示项目安装配置完成)
  21. 预览 Hexo 的主题并配置到自己项目中
  22. 给使用 Hexo 创建的项目【blog】添加主题【Kratos-Rebirth】
  23. 将下载好的 Kratos-Rebirth-2.2.0.zip 解压到 F:\MyBlog\blog\themes 目录中且名称修改为 Kratos-Rebirth
  24. 编辑 F:\MyBlog\blog 目录下的 _config.yml 文件中的 theme: landscape 修改为 theme: Kratos-Rebirth 保存
  25. 进入创建好的 blog 项目中
  26. 安装 blog 项目所需的依赖内容
  27. 清除缓存
  28. 编译
  29. 启动服务
  30. 进入 Hexo 项目目录
  31. 在需要使用这个主题的项目中克隆主机
  32. 修改所在项目目录下的 _config.yml 文件中倒数第二主题内容为 theme: amazing
  33. 安装该主题的依赖包(即主题文件 package.json 最后面的 dependencies 内容)
  34. 注意:主题文件 package.json 里面最后没有 dependencies 内容的就不用安装
  35. 清除缓存
  36. 编译
  37. 启动服务
  38. 浏览器访问 http://localhost:4000/ 查看效果
  39. 查看并强制删除 4000 端口进程
  40. 查看 windows 系统的 4000 端口的进程
  41. 强制杀死指定进程(如:1652 进程)
  42. 部署到 Github
  43. 配置免密登录 GitHub
  44. 先在本机指定路径下生成一对密钥(一般生成的路径是:C:\Users\电脑当前的用户名\.ssh)
  45. 将本地生成的 SSH 公钥内容复制到 GitHub 中
  46. 在 Github 上创建所属博客的仓库
  47. 在正式执行 hexo d 命令将本地的 Hexo 项目部署到 github 上前,还需要给上传的项目(如 F:\MyBlog\blog\_config.yml 文件最后添加如下内容才可实现上传到 github 指定仓库)
  48. Deployment
  49. Docs: https://hexo.io/docs/one-command-deployment
  50. 进入本地 Hexo 创建的 blog 项目中
  51. 安装部署项目到 github 所需的包
  52. 清除缓存
  53. 编译 blog 项目
  54. 部署 blog 项目到 github 上
  55. 开启部署到 Github 的博客网址
  56. 新增博客内容
  57. 进入本地 Hexo 创建的 blog 项目中
  58. 安装部署项目到 github 所需的包(已经安装过就不用安装了)
  59. 清除缓存
  60. 编译 blog 项目
  61. 部署 blog 项目到 github 上
  • 💰 8折买阿里云服务器限时8折了解详情
  • GPT-5.5 超高智商模型1元抵1刀ChatGPT中转购买
  • 代充Chatgpt Plus/pro 帐号了解详情
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • 视觉 Transformer (ViT) 技术原理及三篇经典论文解析
  • FARS 全自动科研系统:从多智能体架构到工业化科研范式
  • 基于 Whisper 的日语自动字幕生成工具实践
  • 基于 ROS2 与 EKF 的四轮差速机器人里程计精度优化:解决建图漂移与重影问题
  • ClawdBot 本地部署指南与核心功能解析
  • Python 数据分析:Pandas 核心之 Series
  • Python 异步编程与协程详解
  • Node.js 与 npm 的安装与配置
  • 前端性能优化:主流防抖节流库实战与避坑指南
  • 易语言子程序高级应用:递归、回调与参数设计实战
  • C++ 模板编程基础:泛型编程入门与实践
  • 字典与哈希:高效索引与去重
  • OpenClaw 龙虾机器人本地部署与配置实战
  • SWE-CI: 基于持续集成评估智能体在代码库维护中的能力
  • 豆包 AI 视频去水印方法及工具推荐
  • 2025 年十大开源 RISC-V 处理器项目盘点
  • Stable Diffusion 底模 VAE 推荐:提升生成质量的关键技术解析
  • MySQL 详细安装与配置完整教程
  • OpenClaw 开源 AI Agent 框架技术解析与实践指南
  • Python 实现 2025 中秋月相计算与月球数据可视化

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online