Hexo+Github+gitee图床零成本搭建自己的专属博客

已于 2025-04-18 17:40:30 修改
阅读量1k 收藏 11
点赞数 23
文章标签： github gitee
于 2025-04-18 13:55:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69326428/article/details/147326688
版权

一个详细、完善的 Hexo 博客部署教程，不仅涵盖了基本的安装、配置、生成与部署步骤，还增加了常见问题的解决、主题设置、图片上传等
在开始之前可以看看我最终搭建出来的成果：https://liangjh.blog
在这里插入图片描述

1.安装git和nodejs

  • 在Windows上使用Git，可以从Git官网直接https://git-scm.com/downloads，然后按默认选项安装即可。安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就
    说明Git安装成功！

  • 在Git中绑定Github账号，打开“Git Bash”，在命令框中依次输入两行命令：

  • 由于 Hexo 是基于 Node.js 驱动的一款博客框架，所以安装NodeJShttps://nodejs.org/en/download/ 并配置环境变量。

  • 安装之后可以输入以下命令查看是否安装成功：

git version
node -v
npm -v

2. 安装Hexo

以上环境准备好了就可使用 npm 开始安装 Hexo 了，在命令行输入执行如下命令：

npm install -g hexo-cli

安装 Hexo 完成后，在指定文件夹下打开“Git Bash”，再执行下列命令，Hexo 将会在指定文件夹中

新建所须要的文件：

hexo init myBlog
cd myBlog
npm install

若是上面的命令都没报错的话，就恭喜了，运行 hexo s 命令，其中 s 是 server 的缩写，在浏览

器中输入 http://localhost:4000 回车就能够预览效果了。

image-20250413171627171

3. 加载主题

大家可以从官网下载自己喜欢的主题：https://hexo.io/themes/

我这里的主题是：https://github.com/fluid-dev/hexo-theme-fluid?tab=readme-ov-file

随后将下载的主题文件夹放在 myblog/themes 中，在 _config.yml 文件中修改theme 为hexo-theme-fluid-master(注意和主题文件名一致)

image-20250413172317393

修改好之后执行 hexo g 命令，然后再 hexo s ，在浏览器中输入 http://localhost:4000/回车就能够预览修改主题后的效果了。

4. 将博客部署在GitHub上

点击 Start project 或者下面的 new repository 建立一个新的仓库，注意Github 仅能使用一个同名仓库的代码托管一个静态站点，这里注意仓库名一定要是： 用户名.github.io

配置 SSH key ，要使用 git 工具首先要配置一下SSH key，为部署本地博客到 Github 作准备。

git config --global user.name "用户名"
git config --global user.email "邮箱地址"
ssh-keygen -t rsa -C '上面的邮箱'

按照提示完成三次回车，便可生成 ssh key，采用以下指令也可以查看自己的ssh：

cat ~/.ssh/id_rsa.pub

登陆 Github 上添加刚刚生成的SSH key，按如下步骤添加，右上角点击头像-> settings -> SSH and GPG keys，建立一个新的 SSH key, 标题随便，key 就填刚才生成那个，确认建立，这样在你的 SSH keys 列表里就会看到你刚刚添加的密钥。
在这里插入图片描述

首次使用还须要确认并添加主机到本机SSH可信列表。若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容，则证实添加成功。

ssh -T git@github.com

此时，本地和Github的工做作得差不了，是时候把它们两个链接起来了。你也能够查看官网的部署教程。先不着急，部署以前还须要修改配置和安装部署插件。第一：打开项目根目录下的_config.yml 配置文件配置参数。拉到文件末尾，填上以下配置。

image-20250413173100122

deploy:
  type: 'git'
  repo: git@github.com:liangjuanhua/liangjuanhua.github.io.git
  branch: master

第二要安装一个部署插件 hexo-deployer-git，输如以下指令：

npm install hexo-deployer-git --save

最后执行如下两条命令就能够部署上传啦，如下 g 是 generate 缩写，d 是 deploy 缩写

hexo g # 生成静态网站
hexo d # 部署到Github上

这时用浏览器输入 用户名.github.io 就可以访问刚才的网站啦。

5. 写文章并上传

博客搭好了，就开始写文章了，这里简单介绍一下，详细的文档能够看 hexo 官网。https://hexo.io/zh-cn/docs/front-matter

新建文章，输入如下命令便可

hexo new '文章标题'

执行完成后能够在 /source/_posts 下看到一个“文章标题.md”的文章文件啦。.md 就是 Markdown

格式的文件，具体用法能够在网上找一下，语法仍是比较简单的。

---
title: blogTest
date: 2021-08-20 18:07:21
tags: Test     
categories: blog1
---
### 1. This is a blog Test
* First
* Second
---
### 2. Show Text
* **这是加粗**
> *这是斜体*

之后依次输入以下命令：

hexo g # 生成文件
hexo s # 本地服务器查看网站
hexo d # 部署到Github 上

或者hexo clean; hexo g; hexo s; hexo d

或者hexo d -g

6.解决图片上传失效的问题

这里采用的是PicGo+Gitee+Typora实现一键上传

利用PicGo软件和Gitee搭建图床，图床是专门用来存放图片的，同时允许你把图片对外连接的网上空间。

所需工具：

  1. Picgo：下载地址
  2. Node.js：下载地址
  3. gitee-uploader【在Picgo中安装】

Picgo的安装：

image-20250413174634706

Node.js的安装：

这一步我们之前在安装hexo的时候已经安装过了。这里不多说。注意: 安装完成后需要重启电脑！！

gitee-uploader的安装:

具体操作：

  • 打开Picgo按图片所示操作

注意：安装gitee之前确保Node.js已经安装
在这里插入图片描述

Gitee仓库创建：

具体操作：

1.进入Gitee：https://gitee.com/

2.注册：

3.新建仓库：

img

  • 输入仓库名称 --> 选择开源(所有人可见) --> 勾选初始化仓库 -->勾选Readme模板 --> 完成创建
    在这里插入图片描述

生成Gitee的私人令牌

具体操作：

  • 进入设置 --> 点击私人令牌 --> 点击生成新令牌

img

在这里插入图片描述

这里只需要勾选projects即可

在这里插入图片描述

注意事项：

  • 点击提交后会生成私人令牌即下图token所需要填写的，私人令牌只会生成一次，如果忘记就需要重新设置！

进入Picgo设置gitee：

在这里插入图片描述

  • repo：用户名/仓库名 忘记用户名可以进入个人中心查看，仓库名同理

image-20250413175819727

  • token：刚才生成的私人令牌
  • customPath：选择年月

在这里插入图片描述

  • 插件设置可以看到uploader-gitee的配置信息

Typora的配置：

根据图片配置，配置完成后再在Typora导入本地图片后，图片就会自动上传到PicGo

在这里插入图片描述

img

7.hexo配置图床

如果使用图床之后依然不显示图片，不要慌，由于图床的防盗链机制，只允许本网站显示图片，外部网站加载图片就会报错。

解决办法：

  • 以fluid主题为例，根据路径themes\fluid\layout\_partial\head.ejs找到head.ejs文件，在文件中添加
<meta name="referrer" content="no-referrer">

image.png

8.主题优化

参考地址：https://fluid-dev.github.io/hexo-fluid-docs/guide/#社交页图标

https://blog.kevinchu.top/2023/07/17/hexo-theme-fluid-modify/

9.cdn加速

这一步是为了让 jsdelivr cdn 服务能够正确解析。如我本地某个图片的引用路径是 /static/img/in-post/logo.png ，因此它的唯一路径是 /img/logo.png ，将内容托送到 GitHub 仓库后，
访问路径就是 https://github.com/liangjuanhua/liangjuanhua.github.io/blob/master/img/1.png ，我的的用户名为 xheldon，仓库是 x_blog-static，因此使用 jsdelivr cdn 服务访问后的地址就
应该是https://cdn.jsdelivr.net/gh/liangjuanhua/liangjuanhua.github.io/img/1.png，不用注册 jsdelivr 服务，不用配置任何东西即可使用，很赞！

使用Gitee+PicGo搭建Hexo博客图床
LeoK77的博客
02-07 627
虽然Hexo可以设置相对路径引用存储图片，但是这样会把图片存储到Github上，而碍于国内对于Github的访问速度，博客中的图片加载起来十分的慢，而穷孩子用不起对象云存储，小型图床又怕跑路，所以把主意打到了Gitee身上 Gitee 如果没有Gitee账号的话自行注册一个，这里就不演示账号注册了。 Gitee官网：https://gitee.com/ 新建图床仓库 新建Public仓库 在Gitee主页左下角可以找到新建仓库按钮，点击之后即可新建一个开源(public)仓库，因为要制作的Hexo博.
使用 hexo 和 gitee 免费搭建个人博客
Kaiter的博客
04-05 2760
1. 前言 在开始教程之前，你可以了解一下使用gitee pages服务搭建博客有哪些好处： gitee 是国内的网站，相较于 github 访问速度更快； 全是静态文件，访问速度快； 免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台； 数据绝对安全，基于gitee的版本管理，想恢复到哪个历史版本都行； 博客内容可以轻松打包、转移、发布到其它平台； 等等。 1.1. ...
Hexo从0到1搭建博客系列04：图床的最佳实践
周三不Coding的博客
10-15 2467
采用Hexo，从0到1快速搭建一个博客。即使没有任何前后端网页开发经验，也可以快速拥有一个属于自己的博客网站~
如何将项目部署到gitee
最新发布
2401_83213163的博客
03-18 344
(3) 配置SSH密钥（避免每次输入密码）: 个人设置 → SSH公钥。文件，添加需忽略的文件（如。(5) 提交代码到本地仓库。GitHub 默认分支为。安装时保持默认选项即可。(4) 添加文件到暂存区。: 仓库页面 → 点击。(2) 获取仓库URL。(1) 本地项目初始化。，Gitee 可能为。(1) 安装 Git。(2) 配置用户信息。(6) 远程仓库操作。(2) 关联远程仓库。(4) 后续更新代码。
hexo+gitee(码云)免费搭建个人静态博客（避开所有坑）
定期分享编程干货~
10-11 1340
简介演示网站，这是我自己搭建好的，请大家参考————HexoHexo简介+gitee简介Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。大家可以进入hexo官网进行详细查看，因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。gitee是一个托管代码平台，并可以生成自己的静态网站...
Hexo + Gitee 免费部署静态博客
qq_60700961的博客
08-31 2868
Hexo + Gitee 免费部署博客
Hexo + gitee 创建个人博客网站
CodePandas
03-07 370
写在前面 当你搜索Hexo + gitee 时，想必你已经用过了 github pages，也因为不能忍受其访问速度之慢而令求他法。 前期工作与本地部署请参见基于Hexo框架搭建个人博客（windows) 相比较与github，gitee毕竟国产，访问速度自然不用多说，部署过程大致和github类似 部署到Gitee详细流程 创建新仓库（切记以账号昵称命名） 这里的三个选项建议都选了，不然可...
Hexo+Gitee 个人博客搭建
weixin_45672809的博客
10-14 648
Hexo+Gitee 个人博客搭建1. 环境搭建1.1 Git安装1.2 Node.js安装1.3 Hexo的安装2.初始化Hexo博客及美化2.1 初始化2.2 启动Hexo2.3 下载NEXT主题2.4 配置`_config.yml`文件3.部署到码云3.1 注册码云3.2 创建仓库3.3 推送文件到Gitee仓库3.3.1 只推送Hexo生成的静态文件到Gitee仓库3.3.2 将整个之前初始化的文件夹推送到Gitee仓库4.Hexo写作5.传送门6.参考资料 1. 环境搭建 1.1 Git安装 G
从零开始免费搭建自己的博客(三)——基于 Gitee pages 建站
yushuaigee的博客
01-02 1843
本文是博客搭建系列文章第二篇，其他文章链接： 从零开始免费搭建自己的博客(一)——本地搭建 Hexo 框架 从零开始免费搭建自己的博客(二)——基于 Github pages 建站 从零开始免费搭建自己的博客(三)——基于 Gitee pages 建站 从零开始免费搭建自己的博客(四)——编写 Markdown 文章并发布 从零开始免费搭建自己的博客(五)——三个站点一键发布博客 从零开始免费搭建自己的博客(六)——导出 CSDN 博客为 Markdown 格式 从零开始免费搭建自己的博客(七)——博客.
从零开始免费搭建自己的博客(二)——基于 GitHub pages 建站
yushuaigee的博客
01-02 1964
本文是博客搭建系列文章第二篇，其他文章链接： 从零开始免费搭建自己的博客(一)——本地搭建 Hexo 框架 从零开始免费搭建自己的博客(二)——基于 Github pages 建站 从零开始免费搭建自己的博客(三)——基于 Gitee pages 建站 从零开始免费搭建自己的博客(四)——编写 Markdown 文章并发布 从零开始免费搭建自己的博客(五)——三个站点一键发布博客 从零开始免费搭建自己的博客(六)——导出 CSDN 博客为 Markdown 格式 从零开始免费搭建自己的博客(七)——博客.
新手利用hexo在Gitee搭建第一个博客网站（2023巨细）
qq_62127918的博客
06-02 5679
利用hexo在Gitee搭建第一个博客网站
GIT HUB GITEE的本地部署与使用简易说明
01-24
（内含最新Git-2.20.1安装包） 接触到的git，摸索几天，发现要成功再本地部署git还是挺麻烦的，通过这两天不停的试验，收货颇丰，有幸将其稍作整理，把复杂问题简单化，我把本地部署的全套流程都实地测试了一便，自认为这应该是最简单的流程了，非常适合刚接触git的朋友。 前提：要想使用github，首先你要有一个github账号，这样的话，才能把本地的代码上传到github服务器
【个人博客的搭建】【从零开始】【零成本】Hexo + Gitee（有教程视频）
南方者的博客
10-05 281
【体验地址】 1 【程序员南方者的博客】：https://nanfangzhe.gitee.io/ 2 【南方阿怼的个人博客】：https://southern-adui.gitee.io// 【视频教学地址】：https://www.bilibili.com/video/BV1xL4y1z7UU 【B站up主】：https://space.bilibili.com/158405457 目录【项目展示】【注册、下载与安装】【1】gitee注册【2】Typora下载【3】node安装【4】git安装【本地.
Hexo+Gitee免费搭建个人博客
m0_51148715的博客
01-29 1662
一、环境准备 1、nodejs和Git安装 nodejs下载网址 32位 64位 Git下载网址 Git下载网址链接 下载好之后，打开cmd命令行（windows+r）输入cmd回车进入，分别执行以下命令 能够显示版本号就说明安装成功了。如果报错，则说明没有安装成功，可以复制一下报错内容百度搜索。 二、安装hexo框架 首先，我们先安装一个淘宝的镜像加速器，方便安装的时候速度会更快一些。 在命令行里面输入如下代码，之后回车键确认后就开始安装了。(这里可能会安装好一段时间，慢慢等) npm install
Hexo +gitee搭建博客最全教学
热门推荐
星云随风 倚码为诗
06-25 1万+
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 Hexo 是使用的比较多的博客框架了，我也尝试自己搭一下，做一些基础功能的测试。之所以没有使用 GitHub 而选择了码云，一是我有自己的 VPS 不需要使用 GitHub Pages ，所以本文也没有关于如何使用 GitHub Pages 的教程；二是 GitHub 上私有仓库是收费的，码云上面能创建免费的私有仓库。也有人选择使用 Docker 来创建博客.
hexo+gitee搭建个人博客，手把手教学包括报错解决
prprprll的博客
05-09 1176
手把手帮助搭建hexo+gitee个人博客，帮助解决报错
hexo+gitee搭建个人博客（持续更新中...）
海先生的博客
09-15 551
1.环境 nodejs gitee gitee上创建一个仓库 https://gitee.com/haibatu/blog.git 2.安装 安装hexo npm install -g hexo #通过npm安装hexo，-g代表全局安装 hexo init blog #初始化 npm install #安装相关依赖 npm install --save hexo-deployer-git hexo clean #清除所有记录 hexo g #生成静态页面 hexo s #启动服务 目录结构 页
hexo-hexo+gitee博客搭建
qq_19331985的博客
06-30 418
此blog是学习hexo博客框架安装部署学习笔记 前言 因为笔者一直想要搭建一个属于自己的博客系统，有考虑使用云服务进行搭建，并自己编写博客代码，但是考虑到时间上的问题，于是选择了开源的博客框架通过GitHub发布的方式进行部署。在网上看到好多人都是使用hexo框架来进行搭建，随主流也选择hexo来进行搭建。 1. 安装node.js node安装可以参考：https://baijiahao.baidu.com/s?id=1668673317564339449&wfr=spider&fo.
使用hexo+gitee从零搭建个人博客
我是小妖怪，逍遥又自在
04-11 792
1.Node.js：下载 | Node.js 中文网 (nodejs.cn) ，Hexo 是基于Node.js 的博客框架教程：https://blog.csdn.net/weixin_52799373/article/details/123840137。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值