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

news2025/4/24 3:01:15

一个详细、完善的 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 免费加速 GitHub Pages 博客的静态资源
  • 参考地址：https://www.xheldon.com/tech/optimize-of-this-site
  • 官网：https://www.jsdelivr.com/?docs=gh

这一步是为了让 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 服务，不用配置任何东西即可使用，很赞！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2341171.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数字信号处理技术架构与功能演进

数字信号处理技术架构与功能演进

数字信号处理&#xff08;DSP&#xff09;是通过数字运算实现信号分析、变换、滤波及调制解调的技术领域&#xff0c;其发展过程与技术应用如下&#xff1a; 一、定义与核心功能 技术定义&#xff1a;通过算法将模拟信号转换为数字形式进行处理&#xff0c;具有高精度、可编程…
阅读更多...
深入理解 Android Handler

深入理解 Android Handler

一、引言 Handler 在安卓中的地位是不言而喻的&#xff0c;几乎维系着整个安卓程序运行的生命周期&#xff0c;但是这么重要的一个东西&#xff0c;我们真的了解它吗&#xff1f;下面跟随着我的脚步&#xff0c;慢慢揭开Hanler的神秘面纱吧&#xff01; 本文将介绍Handler 的运…
阅读更多...
C++ 什么是隐式类型转换，什么是显式类型转换

C++ 什么是隐式类型转换，什么是显式类型转换

在 C 中&#xff0c;​​类型转换​​是将一种数据类型的值转换为另一种数据类型的过程&#xff0c;分为 ​​隐式类型转换​​&#xff08;由编译器自动完成&#xff09;和 ​​显式类型转换​​&#xff08;由程序员手动指定&#xff09;。以下是它们的区别和示例&#xff1a…
阅读更多...
NVIDIA 自动驾驶技术见解

NVIDIA 自动驾驶技术见解

前言 参与 NVIDIA自动驾驶开发者实验室 活动&#xff0c;以及解读了 NVIDIA 安全报告 自动驾驶 白皮书&#xff0c;本文是我的一些思考和见解。自动驾驶技术的目标是为了改善道理安全、减少交通堵塞&#xff0c;重塑更安全、高效、包容的交通生态。在这一领域&#xff0c;NVI…
阅读更多...
【Flask】Explore-Flask：早期 Flask 生态的实用指南

【Flask】Explore-Flask：早期 Flask 生态的实用指南

开源项目&#xff1a;explore-flask/README.rst at master rpicard/explore-flask (github.com) 一、Coding conventions Summary Try to follow the coding style conventions laid out in PEP 8. Try to document your app with docstrings as defined in PEP 257. def…
阅读更多...
【论文阅读21】-PSOSVM-CNN-GRU-Attention-滑坡预测（2024-12）

【论文阅读21】-PSOSVM-CNN-GRU-Attention-滑坡预测（2024-12）

这篇论文主要提出并验证了一种新型的混合智能模型&#xff08;PSOSVM-CNN-GRU-Attention&#xff09;&#xff0c;用于准确预测滑坡的点位移&#xff0c;并构建可靠的位移预测区间。通过对Baishuihe滑坡和Shuping滑坡的案例分析&#xff0c;展示了该模型的出色性能。 [1] Zai D…
阅读更多...
蓝牙 6.0 发布，解锁无线科技新可能

蓝牙 6.0 发布，解锁无线科技新可能

在5G和Wi-Fi 7高速发展的时代&#xff0c;蓝牙技术始终以独特优势深度融入日常生活。从无线耳机到智能家居&#xff0c;它凭借低功耗、高兼容的特性&#xff0c;悄然连接各类智能设备&#xff0c;打造无缝的数字生活体验。无论是聆听音乐、智能门禁还是健康监测&#xff0c;蓝牙…
阅读更多...
EasyCVR视频智能分析平台助力智慧园区：全场景视频监控摄像头融合解决方案

EasyCVR视频智能分析平台助力智慧园区：全场景视频监控摄像头融合解决方案

一、方案背景 在智慧园区建设的浪潮下&#xff0c;设备融合、数据整合与智能联动已成为核心诉求。视频监控作为智慧园区的“视觉中枢”&#xff0c;其高效整合直接影响园区的管理效能与安全水平。然而&#xff0c;园区内繁杂的视频监控设备生态——不同品牌、型号、制式的摄像…
阅读更多...
为您的照片提供本地 AI 视觉：使用 Llama Vision 和 ChromaDB 构建 AI 图像标记器

为您的照片提供本地 AI 视觉：使用 Llama Vision 和 ChromaDB 构建 AI 图像标记器

有没有花 20 分钟浏览您的文件夹以找到心中的特定图像或屏幕截图&#xff1f;您并不孤单。 作为工作中的产品经理&#xff0c;我总是淹没在竞争对手产品的屏幕截图、UI 灵感以及白板会议或草图的照片的海洋中。在我的个人生活中&#xff0c;我总是捕捉我在生活中遇到的事物&am…
阅读更多...
K8S节点出现Evicted状态“被驱逐”

K8S节点出现Evicted状态“被驱逐”

在Kubernetes集群中&#xff0c;Pod状态为“被驱逐&#xff08;evicted&#xff09;”表示Pod无法在当前节点上继续运行&#xff0c;已被集群从节点上移除。 问题分析&#xff1a; 节点磁盘空间不足 &#xff0c;使用df -h查看磁盘使用情况 可以看到根目录 / 已100%满&#x…
阅读更多...
重学React（一）：描述UI

重学React（一）：描述UI

背景&#xff1a;React现在已经更新到19了&#xff0c;文档地址也做了全面的更新&#xff0c;上一次系统性的学习还是在16-17的大版本更新。所以&#xff0c;现在就开始重新学习吧&#xff5e; 学习内容&#xff1a; React官网教程&#xff1a;https://zh-hans.react.dev/lea…
阅读更多...
遨游通讯发布国产化旗舰三防手机AORO AU1：以自主可控重塑工业安全

遨游通讯发布国产化旗舰三防手机AORO AU1：以自主可控重塑工业安全

在全球产业链加速重构的背景下&#xff0c;国产化技术突破已成为工业领域高质量发展的核心驱动力。作为专精特新中小企业&#xff0c;遨游通讯始终以“让世界更安全、更高效、更简单”为使命&#xff0c;深耕“危、急、特”场景智能通信设备的研发。近日&#xff0c;遨游通讯正…
阅读更多...
【Python】Selenium切换网页的标签页的写法（全！！！）

【Python】Selenium切换网页的标签页的写法（全！！！）

在使用selenium做网站爬取测试的时候&#xff0c;我们经常会遇到一些需要点击的元素&#xff0c;才能点击到我们想要进入的页面&#xff0c; 于是我们就要模拟 不断地 点点点击 鼠标的样子。 这个时候网页上就会有很多的标签页&#xff0c;你的浏览器网页标签栏 be like: 那…
阅读更多...
DeepSeek和Excel结合生成动态图表

DeepSeek和Excel结合生成动态图表

文章目录 一、前言二、3D柱状图案例2.1、pyecharts可视化官网2.2、Bar3d-Bar3d_puch_card2.3、Deepseek2.4、WPS2.5、动态调整数据 一、前言 最近在找一些比较炫酷的动态图表&#xff0c;用于日常汇报&#xff0c;于是找到了 DeepseekExcel王牌组合&#xff0c;其等同于动态图…
阅读更多...
Ubuntu20.04 部署llama-factory问题集

Ubuntu20.04 部署llama-factory问题集

llama3 微调教程之 llama factory 的 安装部署与模型微调过程&#xff0c;模型量化和gguf转换。_llamafactory 部署-CSDN博客 1.跟着教程 llama-factory下载不下来 来&#xff0c;试着换源&#xff0c;多试几次&#xff0c;就可以成功了。。。 2.跟着教程&#xff0c;发现无法…
阅读更多...
大语言模型助力 Support Case 分析，提升云服务效率

大语言模型助力 Support Case 分析，提升云服务效率

1. 背景 技术工单&#xff08;Support Case&#xff09;是企业在进行云平台操作的时候通常会用到的一种技术支持类型&#xff0c;提供的技术支持通常包括所有的云服务的使用问题、账单问题、限制额度提升等等。对于云平台的管理者而言&#xff0c;对各个 BU 所提的工单进行统计…
阅读更多...
ubuntu磁盘挂载

ubuntu磁盘挂载

1、‌查看磁盘设备及分区‌ 命令‌&#xff1a;列出所有块设备&#xff08;磁盘及分区&#xff09; lsblk 0表示此块未挂载 2、格式化分区 sudo mkfs.ext4 /dev/sdb 注意sdb换成自己的块名称 3、创建挂载点目录‌ sudo mkdir -p /mnt/data4、永久挂载 sudo blkid /dev…
阅读更多...
chili3d调试笔记8 打印零件属性 浏览器元素展开

chili3d调试笔记8 打印零件属性 浏览器元素展开

无效&#xff0c; 返回的是节点不是坐标啥的&#xff0c; 找他的属性 把document和selectednote&#xff08;空集&#xff09;传给handleshowproperty方法 怎么获得selectnotes和selectnotes的property值 有selectnotes运行这段就行了 明天再搞 ----------------------------…
阅读更多...
新书速览|DeepSeek移动端AI应用开发：基于Android与iOS

新书速览|DeepSeek移动端AI应用开发：基于Android与iOS

《DeepSeek移动端AI应用开发&#xff1a;基于Android与iOS》 1 本书内容 《DeepSeek移动端AI应用开发:基于Android与iOS》深入剖析了DeepSeek平台的架构原理、API调用及开发实践等核心内容&#xff0c;助力读者在Android与iOS移动端高效集成DeepSeek API&#xff0c;打造出契…
阅读更多...
Android调用springboot接口上传大字段，偶现接口超时的优化

Android调用springboot接口上传大字段，偶现接口超时的优化

介绍 最近有个功能&#xff0c;Android通过okhttp上传实体类&#xff0c;实体类包含一个大字段&#xff0c;上传的字符串长度达到300k&#xff0c;偶现接口超时的情况&#xff0c;大概100次有5次&#xff0c;看日志发现数据并没有到达接口&#xff0c;可能在网络传输中就超时了…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023