利用hexo+github部署属于自己的个人博客网站(2025年3月所写)

利用hexo+github部署属于自己的个人博客网站

前情提要:如果你出现了莫名其妙的报错,可能与权限有关,可以以管理员的身份运行git bash或者cmd

本篇博客仅限于利用hexo搭建博客,并且部署到github上面,让自己可以有一个访问的域名,不涉及博客的上传以及博客网站的美化。

当然笔者博客上传和网站美化以后会再写一篇博客进行说明

参考自

【基础篇】hexo博客搭建教程 - huanhao - 博客园

Hexo 博客搭建并部署到 GitHub Pages(2024最新详细版)_github pages上部署hexo-CSDN博客

这两篇博客混着看的,因为有的地方这篇不行另外一篇可以,所以我混着来的,而且有的地方可能版本太老了,就不太对了,笔者就再加上笔者自己的情况供大家参考了

文章目录


1.安装git

这个教程网上有很多,可以自己搜索,也可以看看笔者的

黑马程序员 | Git详细教程笔记 | 使用命令 | 从安装到入土_gitee开源项目《黑马课程验证指南》-CSDN博客

2.安装nodejs

【Node】node.js安装与配置(详细步骤)-CSDN博客

除了这篇文章的内容,还要安装cnpm

在git bash里面执行下面的命令

复制代码
$ npm install -g cnpm

检查cnpm是否安装成功

执行

复制代码
$ cnpm -v 

如果输出版本号就是安装成功了


3.安装hexo

在git bash或者cmd执行下面的命令安装hexo

复制代码
$ cnpm install hexo-cli -g

终端执行hexo -version出现 Hexo 版本号,说明安装成功

4.初始化博客(建立本地的网站)

创建一个文件夹myblog,但一定要保证myblog是空的,不创建也行

复制代码
$ hexo init myblog
cd myblog
npm install

初始化成功显示:

vscode 打开 myblog,项目目录如下:

_config.yml 存放的是博客配置信息, source/_posts 是存放文章的地方。

可能遇到的问题

bash 复制代码
$ hexo init myblog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
fatal: unable to access 'https://github.com/hexojs/hexo-starter.git/': SSL certificate problem: unable to get local issuer certificate
WARN  git clone failed. Copying data instead
INFO  Install dependencies
INFO  Start blogging with Hexo!

如果出现这样的报错和页面

问题核心原因

SSL证书验证失败:Git在克隆GitHub仓库时无法验证其SSL证书有效性,可能由以下原因导致

  1. 本地Git证书配置缺失或错误(尤其Windows系统)
  2. 网络环境限制(如国内访问GitHub不稳定)
  3. 系统时间/时区错误(证书验证依赖准确时间)

解决方法

我查了很多,就这个蛮好用的,可以用用

临时关闭Git的SSL验证(应急方案)

bash 复制代码
git config --global http.sslVerify false  # 关闭验证
hexo init myblog                          # 执行初始化
git config --global http.sslVerify true   # 完成后恢复验证

⚠️ 此方法存在安全风险,仅建议临时使用。

5.预览自己搭建的本地网站

打开终端,进入项目根目录执行:

bash 复制代码
hexo clean # 清除缓存文件,建议写完文章后执行一次
hexo g		# 生成 public 文件夹,写完文章执行
hexo s		# 启动 hexo 服务

生成的地址可以去访问到默认的界面,bash这会会卡着,等你按下ctrl+c才会停止,停止后网站也会不可访问

浏览器访问 http://localhost:4000/ 出现下图说明启动成功

6.更换主题

hexo的所有主题都在下面这个地址:

https://hexo.io/themes/

你可能会在这个地址看到很多好看的主题,但是我们要慢慢来,有些主题的配置难度还是很高的

我们要找一个功能齐全,配置简单的主题练练手

就是这个新手入门hexo必备的Next主题

预览效果:https://theme-next.org/

项目地址:https://github.com/theme-next/hexo-theme-next

配置文档:https://theme-next.org/docs/getting-started/

但是笔者用的是butterfly,因为觉得这个好看功能多

https://butterfly.js.org/ 大家可以去看看

如你所见,其实每个主题都会包含这个三个东西

  • 预览效果
  • 项目地址
  • 配置文档

点击主题的图片可以打开预览地址,点击主题的标题可以打开项目地址

配置文档我们需要自己去项目地址找,大多数主题的项目地址都是英文,大家可以开翻译找一下


6.1如何下载主题

方法1

打开主题的项目地址后,点击Clone or download

然后复制https开头的地址

然后在你的博客文件夹下面打开git bash

执行:

复制代码
git clone 复制的地址 themes/主题名字

如图:

现在给你解释一下这个命令

git clone 代表克隆,后面接上一串下载地址,最后面的themes/next是把文件夹下载到主题目录下,并把主题文件命名为next

方法2(推荐)

如果你觉得比较麻烦,还有第二个办法

打开主题项目地址,然后点击Clone or download,然后点击Download ZIP

这样可以下载主题文件压缩包,前提是你已经登入了github(没有账号的,请自己注册一下)

然后解压压缩包,把文件夹放在博客目录下的themes目录,并把文件夹命名为主题的名字

6.2修改配置文件

在博客目录下创建 _config.butterfly.yml,其实是创建 _config.你下载的主题名.yml

将 butterfly 主题的 _config.yml 内容复制进去(打开链接复制),就是这个页面里面的_conffig.yml

后续修改博客的配置,例如标题,头像,评论等等只需要在 _config.fluid.yml文件中配置就行


6.3预览主题

在博客目录打开git bash

执行

复制代码
hexo clean
hexo g
hexo s

还是会出现一段浏览地址,我们在浏览器打开就行了

注意:有些主题你更换之后是暂时无法预览的,因为有的主题还需要安装它需要的依赖,这一般都会在主题的文档里面提到,只有安装它的依赖之后才可以正常预览,这里暂时不做说明,会在hexo教程进阶篇说到

7.把博客部署到github上面去

现在我们的博客都是只能本地预览,如何将我们的上传到一个地方,然后通过域名访问呢?

你可能觉得需要一个服务器再买个域名绑定,我可以告诉你都不需要

下面介绍两种部署方法

先来个对比

github:

  • 国外网站,是英文
  • 访问速度较慢
  • 不需要实名认证
  • 域名形式可以自定义

coding:

  • 国内的平台,网站是中文
  • 访问速度快
  • 部署网站需要实名认证,只需要填写身份证号即可
  • 域名是随机给的,所以很长而且不能自定义

如果你有自己的域名,github和coding都可以绑定域名

笔者推荐github,因为笔者没用过coding网站

1.coding

https://coding.net/user

注册一个coding的账号,这里不做演示

然后按照图片新建一个项目

选择devops

填入相关信息,记得勾选**启用README.cd文件初始化项目**

然后完成创建


我们暂时不能直接上传,需要进行一些配置,如下:

接下来需要我们创建一个git秘钥

打开git bash(不要求在哪个目录)

执行: "这里面是你的邮箱"

不管出现什么信息,你只需要回车就可以了

复制代码
$ ssh-keygen -t rsa -C "[email protected]"

然后执行

复制代码
$ cat ~/.ssh/id_rsa.pub

会输出你的秘钥,我们复制输出信息就行了

然后点击头像,打开个人设置--选择SSH公钥--新增公钥

然后将你复制的秘钥粘贴进去,记得勾选永久有效


然后打开git bash

执行:

复制代码
$  ssh -T [email protected]

会提示你下面这个,输入yes回车就行了

复制代码
Are you sure you want to continue connecting (yes/no/[fingerprint])? 

接下来打开你的项目选择SSH,然后复制右边git开头的地址

打开站点配置文件

修改deploy信息

复制代码
deploy:
  type: git
  repo: 你复制的地址
  branch: master

例如:

在博客根目录下打开git bash

分别执行下面的命令:

yourname是你的名字

youremail是你的邮箱

复制代码
$ git config --global user.name "yourname"
$ git config --global user.email "youremail"

然后安装上传插件

复制代码
cnpm install hexo-deployer-git --save

上传

以上的配置完成之后,就可以上传了

在博客根目录下打开git bash,执行下面的命令就可以上传了

复制代码
hexo g -d

然后打开项目,打开构建与部署--静态网站--立即发布静态网站

注意:coding需要实名认证,只需要你输入身份证号就可以了,不用担心泄露隐私,因为coding现在是腾讯的

我们只要填写网站名称就行了,然后保存

因为是刚构建的网站,所以要手动部署一下,以后上传就不需要手动部署

然后访问所给的地址,那个就是我们网站的地址了

之后每次修改完博客要上传的时候,只需执行上传命令

2.github部署(推荐)

你还可以使用github部署你的博客

这里不演示如何注册账号

创建一个仓库

仓库名必须是用户名 + .github.io

然后勾选初始化README

我们暂时不能直接上传,需要进行一些配置,如下:

接下来需要我们创建一个git秘钥

打开git bash(不要求在哪个目录)

执行: "这里面是你的邮箱"

不管出现什么信息,你只需要回车就可以了

复制代码
$ ssh-keygen -t rsa -C "[email protected]"

然后执行

复制代码
$ cat ~/.ssh/id_rsa.pub

会输出你的秘钥,我们复制输出信息就行了

然后点击头像,点击Settings--SSH·····--New SSH Key

粘贴你复制的秘钥,title应该可以随便写,笔者写的myblog

然后打开git bash

执行:

复制代码
$  ssh -T [email protected]

会提示你下面这个,输入yes回车就行了

复制代码
Are you sure you want to continue connecting (yes/no/[fingerprint])? 

打开项目,点击绿色按钮,点击Use SSH

复制git开头的地址

打开站点配置文件,点击总的_config.yml,不要去你自己的那个_config.butterfly.yml

修改deploy信息

复制代码
deploy:
  type: git
  repo: 你复制的地址
  branch: master

例如:

在博客根目录下打开git bash

分别执行下面的命令:

yourname是你的名字

youremail是你的邮箱

复制代码
$ git config --global user.name "yourname"
$ git config --global user.email "youremail"

然后安装上传插件

复制代码
cnpm install hexo-deployer-git --save

部署到github上面

以上的配置完成之后,就可以部署了

在博客根目录下打开git bash,执行下面的命令就可以部署了

bash 复制代码
hexo g -d 

3.得到自己的网址

原作者的操作

然后打开项目,点击Settings

往下滑找到Github pages

点击none 选择master branch

之后你会得到一个地址,这个就是你的网站地址了

笔者的操作

笔者默认的分支就是master,所以不需要改动,执行完hexo g -d就直接有了下面的网址

先点击左侧pages

然后出现以下页面

主要是要出现这个

就是咱们自己的网址

笔者的就是https://darling-123456.github.io/

看看效果

至于美化和上传博客,等我学会了会再写一篇博客教大家,也不会太久,大概就在本周之内解决吧

教程到此结束

相关推荐
枫叶落雨2222 小时前
git checkout C1解释
git
Dontla2 小时前
git stash介绍(临时保存当前工作目录中尚未提交的修改)
git
lichenyang4533 小时前
Maestro CLI云端测试以及github cl,bitrise原生cl的测试流程
github
黎相思4 小时前
Git多人协作
git
qianmoQ4 小时前
GitHub 趋势日报 (2025年06月02日)
github
一只名叫Me的猫5 小时前
Git 常用命令 - 服务器用
git
黎相思5 小时前
Git基本操作
git
独立开阀者_FwtCoder6 小时前
如何 “正确” hook JS方法
前端·javascript·github
寻月隐君6 小时前
解锁Rust代码组织:轻松掌握Package、Crate与Module
后端·rust·github
qianmoQ8 小时前
GitHub 趋势日报 (2025年06月01日)
github