Hexo+PicGo+GitHub/Gitee Page 搭建静态博客带免费图床入门教程(手摸手带你构建免费博客)

最新推荐文章于 2024-01-05 20:51:55 发布
最新推荐文章于 2024-01-05 20:51:55 发布
阅读量986 收藏 9
点赞数
文章标签： Hexo PicGo jsdelivr github 博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/prefectjava/article/details/111192741
版权

Hexo+PicGo+GitHub/Gitee Page 搭建静态博客带免费图床入门教程

一、前言

  • 博客有第三方平台，也可以自建，比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。

  • 一说到自建博客很多人就头大 域名 服务器 数据库 …各种都需自己准备，耗时不说每年还需要不少银子。

  • 有没有那种白嫖的 自建博客？答案是YES。那就是【Github/Gitee Page + Hexo +PicGo 搭建个人博客+免费图床】 互联网上的开源是真的香。

  • Github/Gitee Page 是 Github/Gitee 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源，这次我们的主角就是 Hexo 了。

  • 同时写博客需要上传图片，那么这时候你需要一个图床了，图床也有很多本次使用的依然是picGo + Github/Gitee免费图床服务 具体的内容下面在文章内介绍。

二、准备环境

1、node环境

  • 首先，安装 nodejs， 因为Hexo是基于 Node.js 驱动的一款博客框架，相 Jekyll 框架更快更简洁。
    参考这篇博客：nodejs安装图文教程

2、git 环境

  • 然后，安装git, 一个分布式版本控制系统，用于项目的版本控制管理，作者是 Linux 之父。
    参考这篇博客 ：Git安装图文教程

两个工具不同的平台安装方法有所不一样，可自行按步骤。安装成功后打开git bash（Windowns）或者终端（Mac），下方中将统一称为命令行。

git version
node -v
npm -v

在这里插入图片描述

三、安装Hexo

安装Hexo参考博客：Hexo编译静态资源生成博客图文教程

此时，本地博客就已经搭建完成了，接下来部署到GitHub Page 就可以了。

四、创建GitHub账户开通博客仓库

1、注册GitHub账户

打开github网站进行注册 官网地址

以下图来源于网络，我github地址静态博客仓库为 csvf 图片中为webw3c 注意替换成你自己的。
在这里插入图片描述
点击 Start project 或者下面的 new repository 创建一个新的仓库
在这里插入图片描述

2、github仓库分支main改回master

  • 2020.10.1之后新创建博客静态页仓库的时候默认分支变为main了 。
    那是由于github官方 在2020.10.1之后统一修改执行的，据说因为master这个词让人联想到奴隶制~ o(╯□╰)o ,哎 那 主从机制 master - slave 是不是也要改 扯远了。
    在这里插入图片描述
  • 在settings->Repositories 设置创建仓库默认的branch 分支。
    或者直接点击 ： github设置
    在这里插入图片描述

3、创建静态博客唯一仓库

注意点来了，Github 仅能使用一个同名仓库的代码托管一个静态站点，这个网上很多教程没说到的。
在这里插入图片描述
然后打开仓库创建一个 index.html 文件，并随意先写点内容，比如 Hello World.
在这里插入图片描述

4、github page 博客地址预览

五、配置SSH KEY

要使用 git 工具首先要配置一下SSH key，为部署本地博客到 Github 做准备。
打开命令行输入 cd ~/.ssh 如果没报错或者提示什么的说明就是以前生成过的，直接使用 cat ~/.ssh/id_rsa.pub 命令就是可以查看本机上的 SSH key 了。

cat ~/.ssh/id_rsa.pub

在这里插入图片描述

1、本地生成 SSH key

如果之前没有创建，
在这里插入图片描述

则执行以下命令全局配置一下本地账户：

git config --global user.name "用户名"

git config --global user.email "邮箱账号"

然后开始生成密钥 SSH key

ssh-keygen -t rsa -C '上面的邮箱'

按照提示完成三次回车，即可生成 ssh key。通过查看 ~/.ssh/id_rsa.pub 文件内容，获取到你的 SSH key
在这里插入图片描述
首次使用还需要确认并添加主机到本机SSH可信列表。Are you sure you want to continue connecting(yes/no/[fingerprint])? 输入yes
若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容，则证明添加成功。

ssh -T git@github.com

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020121514424220.png

2、GitHub配置SSH key

登录github 上添加刚刚生成的SSH key，按以下步骤添加：
在这里插入图片描述
创建一个新的 SSH key, 标题随便，key 就填刚才生成那个，确认创建，搞定！！这样在你的 SSH keys 列表里就会看到你刚刚添加的密钥。
在这里插入图片描述

六、博客部署到GitHub

此时，本地和Github的工作做得差不了，是时候把它们两个连接起来了。
先不着急，部署之前还需要修改配置和安装部署插件。

1、配置博客仓库地址

打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置（也可同时部署到多个仓库，后面再说）：

deploy:
  type: git
  repo:
    github: git@github.com:/csvf/csvf.github.io.git
#    github: https://github.com/csvf/csvf.github.io.git
  branch: master

效果如下：
在这里插入图片描述

2、安装hexo-deployer-git插件

安装一个部署插件 hexo-deployer-git 。

npm install hexo-deployer-git --save

最后执行以下命令就可以部署上传啦，以下 g 是 generate 缩写，d 是 deploy 缩写：

hexo g -d

稍等一会，在浏览器访问网址： https://你的用户名.github.io 就会看到你的博客啦！

七、开始写作

1、写新文章

hexo new '文章标题'

执行完成后可以在 /source/_posts 下看到一个“文章标题.md”的文章文件啦。.md 就是 Markdown 格式的文件，具体用法可以在网上找一下，语法还是比较简单的。

在 Markdown 文章里面输入你的文章内容 ，Typora是不错的markdown写作软件。
下载地址： Typora 工具
在这里插入图片描述

2、本地运行查看效果

再执行一下以下命令

hexo g

hexo s

本地运行之后 打开文章 查看修改的效果
在这里插入图片描述

3、发布到github

最后，只要部署到你的 Github 上就可以了！

hexo clean

hexo g -d

部署前最好能先执行一下 hexo clean 命令，清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

4、创建草稿文章和发布

另外，如果你的文章暂时不发布可以先保存在草稿里面。生成草稿的方法和文章差不多，

 hexo new draft "文章标题"

生成后会在 /source/_drafts 里看到你的草稿文章。当你想发布时只要执行 publish 命令即可发布到博客。

hexo publish [layout]  <filename>

到此为止就可以在本地使用markdown软件写博客，同时推送到自己的github page博客了。
上文提到过写博客不仅会有文字，还会有图片。这里就需要用到图床了

八、图床

图床这是个老生常谈的问题了，流行过不少的图床但是基本都凉凉了。

1、背景

图床是个啥东西就不用过多介绍了，先来对比一下各路图床：

  • 微博图床：以前用的人比较多，从2019年4月开始开启了防盗链，凉凉
  • SM.MS：运营四年多了，也变得越来越慢了，到了晚上直接打不开图片，速度堪忧
  • 其他小众图床：随时有挂掉的风险
  • Imgur等国外图床：国内访问速度太慢，随时有被墙的风险
  • - 语雀图床，语雀用的oss本来挺好用，也开启防盗链了
  • 大厂储存服务：例如七牛云、又拍云、腾讯云COS、阿里云OSS等，容量限制，操作繁琐，又是实名认证又是域名备案的，麻烦，而且还要花钱（有钱又不怕麻烦的当我没说）
  • Github图床
  • Gitee 图床

如果舍得花钱可以选择大厂存储服务，定期交流量费即可。略过第2步直接往下看
如果喜欢稳定且免费的图床可以继续往下看
gitee 就是github在国内的一个翻版，操作基本一致，github有时候访问会有抽风现象，原因你懂的 毕竟方校长的GFW不是吃素的。

因此，GitHub 图床是个不错的选择，利用 jsDelivr CDN 加速访问（jsDelivr 是一个免费开源的 CDN 解决方案），PicGo 工具一键上传，操作简单高效，GitHub 和 jsDelivr 都是大厂，不用担心跑路问题，不用担心速度和容量问题，而且完全免费，可以说是目前免费图床的最佳解决方案！

2、搭建github仓库图床

  • 登录/注册GitHub，新建一个仓库，填写好仓库名，仓库描述，根据需求选择是否为仓库初始化一个README.md描述文件
    在这里插入图片描述
    在这里插入图片描述
  • 生成一个Token
    在主页依次选择【Settings】-【Developer settings】-【Personal access tokens】-【Generate new token】，填写好描述，勾选【repo】，然后点击【Generate token】生成一个Token，注意这个Token只会显示一次，自己先保存下来，或者等后面配置好PicGo后再关闭此网页
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

3、配置PicGo

前往下载PicGo，安装好后开始配置图床

在这里插入图片描述
设定仓库名：按照【用户名/图床仓库名】的格式填写

设定分支名：【master】

设定Token：粘贴之前生成的【Token】

指定存储路径：填写想要储存的路径，如【ITRHX-PIC/】，这样就会在仓库下创建一个名为 ITRHX-PIC 的文件夹，图片将会储存在此文件夹中

设定自定义域名：它的作用是，在图片上传后，PicGo 会按照【自定义域名+储存路径+上传的图片名】的方式生成访问链接，并放到粘贴板上，因为我们要使用 jsDelivr 加速访问，所以可以设置为【https://cdn.jsdelivr.net/gh/用户名/图床仓库名 】，上传完毕后，我们就可以通过【https://cdn.jsdelivr.net/gh/用户名/图床仓库名/图片路径 】加速访问我们的图片了，比如上图的图片链接为：https://cdn.jsdelivr.net/gh/TRHX/ImageHosting/ITRHX-PIC/A27/08.jpg

参考上面创建了一个仓库如下图
在这里插入图片描述
picGo 设置图床如下
在这里插入图片描述
上传一张测试图
在这里插入图片描述
图片地址 ：https://cdn.jsdelivr.net/gh/csvf/imagehost/imgs/微信截图_20201030182729.jpg

至此免费图床搭建完成。可以使用PicGo 工具 愉快的上传图片了，直接粘贴在markdown博客编写工具中就可以了。

图片不能重复上传，因为都会在同一个目录下，重复上传会有重名错误。

4、进行图片上传

配置好PicGo后，我们就可以进行高效创作了，将图片拖拽到上传区，将会自动上传并复制访问链接，将链接粘贴到博文中就行了，访问速度杠杠的，此外PicGo还有相册功能，可以对已上传的图片进行删除，修改链接等快捷操作，PicGo还可以生成不同格式的链接、支持批量上传、快捷键上传、自定义链接格式、上传前重命名等，更多功能自己去探索吧！

九、博客更换主题

1、前言

  • 更换博客主题 不回影响文章，可以尽情更换自己喜欢的主题
  • 这里推荐 一个热门 Hexo 主题网站 hexo-theme-fluid
    里面有各种hexo的热门主题，可以随意切换 我自己选择的是hexo-theme-fluid 这款主题
    hexo-theme-fluid 主题 更详细的玩法 点击此处

2、更换hexo-theme-fluid主题步骤

  • 1、获取主题最新版本
    请优先下载 最新 release 版本，master 分支无法保证稳定。
    下载后解压到 themes 目录下并重命名为 fluid
  • 2、指定主题
    如下修改 Hexo 博客目录中的 _config.yml ：
theme: fluid  # 指定主题

language: zh-CN  # 指定语言，可不改
  • 3、创建「关于页」
    自 v1.7.0 开始，「关于页」需要手动创建：
$ hexo new page about

创建成功后修改 /source/about/index.md ，添加 layout 属性。
修改后的文件示例如下：

title: about
date: 2020-02-23 19:20:33
layout: about
---

# 这里可以写正文
支持 Markdown, HTML

在这里插入图片描述

十、参考资料

搭建过程参考了网上一些资料

Github+jsDelivr+PicGo 打造稳定快速、高效免费图床
超详细Hexo+Github Page搭建技术博客教程【持续更新】

prefectjava
关注
使用Gitee+PicGo搭建Hexo博客图床
LeoK77的博客
02-07 592
虽然Hexo可以设置相对路径引用存储图片，但是这样会把图片存储到Github上，而碍于国内对于Github的访问速度，博客中的图片加载起来十分的慢，而穷孩子用不起对象云存储，小型图床又怕跑路，所以把主意打到了Gitee身上 Gitee 如果没有Gitee账号的话自行注册一个，这里就不演示账号注册了。 Gitee官网：https://gitee.com/ 新建图床仓库 新建Public仓库 在Gitee主页左下角可以找到新建仓库按钮，点击之后即可新建一个开源(public)仓库，因为要制作的Hexo博.
从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub/Gitee图床
yushuaigee的博客
01-14 1428
​ 本文是博客搭建系列文章第四篇，其他文章链接： 从零开始免费搭建自己的博客(一)——本地搭建 Hexo 框架 从零开始免费搭建自己的博客(二)——基于 GitHub pages 建站 从零开始免费搭建自己的博客(三)——基于 Gitee pages 建站 从零开始免费搭建自己的博客(四)——编写Markdown文章利器 Typora 从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub/Gitee图床** 从零开始免费搭建自己的博客(六)——三个站点一键发布博客 从.
【Hexo】PicGo+Gitee实现markdown图床
Fosu_Chenai的博客
12-16 285
01 建立Gitee仓库 然后下一步 02 安装PicGo 打开PicGo官网按照提示下载PicGo 安装好以后下载插件 在插件设置中搜索gitee 然后安装gitee-uploader1.1.2 03 配置PicGo和Gitee 打开PicGo——>图床设置——>gitee 然后如下配置 repo: 用户名/仓库名，我这里是bao_xian_hong/Album branch: master token: 私人令牌 path: 路径，一般image 剩下的就不用填了
【浅谈】基于github托管，利用hexo+picgo+gitnote构筑一套带图床的完整个人博客生态
m0_46299825的博客
08-08 420
目录前言成本维护性hexo安装安装Node.js安装git安装hexo连接github和域名解析git秘钥配置绑定域名matery主题安装官方文档传送门Gitnote文章编写发布及储存方案Gitnote下载Gitnote使用Picgo图床Picgo下载Picgo使用Picgo设置picgo水印 前言 先展示一下部署在github上的hexo博客界面 这是半年前部署在腾讯云上的wordpresss 要说谁更好看。。。见仁见智吧 wordpress是动态站点，功能强大，可以整很多好活，其次是可以做到快速部
利用github+hexo搭建个人博客并创建图床【带视频教程】
Purse的博客
02-17 1149
Git+hexo 搭建个人博客的步骤和要点 步骤： 1、 安装nodejs+git+tortoisegit 2、 注册github账号，并创建个人独立主页仓库，就是那个username.github.io仓库; 3、 安装和初始化hexo博客脚手架; 4、 去hexo选择适合自己的博客主题; 5、 发布本地博客到github； 6、 创建github图床【有自己图片服务器的可以不用，建议不要使用七...
使用Github 当作自己个人博客的图床
weixin_30843605的博客
08-28 495
使用Github 当作自己个人博客的图床 前提 本文前提: 我个人博客的草稿是存放在 github上的一个仓库 diarynote 截图存放的图片或者需要放在文章中图片，会固定存放在对应的文件夹中，我个人是使用日期文件夹，如: uploads/190828/test.jpg 本文中提到的这个仓库，都是指我自己的 diarynote 仓库 使用GitHub作为图床 从上面的描述可以知道...
【源码开放】Hexo+Github+Coding 博客butterfly 和 matery 主题 搭建完全教程【整理】
01-08
注意，本篇博客并不是从零手把手教你去搭博客，那样会很花费时间去写一篇文档，况且从零搭建的博客一搜也是一大把，太多重复的内容就没必要继续写了。因此，对于不知道怎么搭建的伙伴，我会提供我搭建时用到的学习...
Hexo+GitHub+Gitee搭建静态博客
qq_44573890的博客
07-31 724
Hexo+GitHub搭建静态博客 hexo 官网：https://hexo.io/zh-cn/ 官网首页，这几个字贼大——快速、简洁且高效的博客框架 打开官方文档，可以看到hexo的相关介绍 Hexo 是一个快速、简洁且高效的博客框架。 Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页 本文主要讲如何通过github，将hexo生成的博客托管在它上面，部署到gitee上也可以，步骤基本一致 安装Git 有用过GitHub的同学应该可以跳过这一
Hexo + github page 实现搭建博客.pdf
08-20
总结来说，Hexo+Github Page搭建博客的流程包括：安装Node.js和Git，配置Github Page，安装Hexo框架，配置主题，添加SSH密钥，以及进行文章撰写、生成和部署。这个过程不仅涉及到了前端静态页面的生成，还包括了后端...
Hexo+Github/Gitee搭建网站
mttao的博客
01-28 177
文章目录使用Hexo+Github/Gitee搭建网站环境：Windows 10准备:1.安装好node.js和Git2.安装淘宝的cnpm一、使用Hexo搭建博客1.安装Hexo2.手动新建一个文件夹3.启动服务器4.新建一篇博客5.清除缓存文件6.生成静态文件7.再次启动服务器8.把博客部署到Github/Gitee9.进入博客页面至此Hexo+Github/Gitee搭建网站完毕 使用Hexo+Github/Gitee搭建网站 本文以Github为例，Gitee差不多，请自行更改 环境：Windows
图片：Hexo博客的Github图床
03-02
图片 Hexo博客的Github图床
Hexo从0到1搭建博客系列04：图床的最佳实践
周三不Coding的博客
10-15 1916
采用Hexo，从0到1快速搭建一个博客。即使没有任何前后端网页开发经验，也可以快速拥有一个属于自己的博客网站~
【hexo+PicGo+阿里云构成图床】
weixin_61646798的博客
11-20 116
hexo+PicGo+阿里云构成图床
用hexo搭建GitHub博客（+图床）
xfx's blog
06-20 8152
一、配置GitHub 注册GitHub 注册GitHub，并登陆 github.com username将要用到，先记住 创建仓库 点击Create a new repository reposository name填写 username.github.io这个是固定的，usename是注册时的用户名，否则则无法以 username.github.io 访问博客 设置仓库 进入到...
个人博客如何选择图床
小康博客
10-24 1566
前言 自2020年8月9日jsdelivr发表了“新规则”后，便引起QQ群、v2ex、知乎等各大平台的议论。小康 新规则中有一条是这样说的： running an image hosting website and using jsDelivr as a storage for all uploaded images 大概意思就是不允许作为图站使用。于是便有了歧义。要多少的图片才能算是图站？博客里面图片放里面算吗？上传的图片怎样才不行？ 虽然到目前为止，我的曾使用的还没有被和谐，但为了长久，只能考虑其他图
借助 github 仓库来作为 gitpages 博客图床
最新发布
哦豁灬
01-05 500
在平时写文档的时候，尤其是在类似Markdown这种纯文本的文档中，使用图片常常很麻烦。如果使用网络上的图片，可能出现以后链接不可用的状况；或者把图片上传到网络上再使用图片链接，往往图片链接千奇百怪，并且图片分散在网络上，不方便管理；使用云对象存储来自己搭建图床，还需要考虑对象存储续费或者几年后图床搬家的问题。借助 github 来作为图床仓库，生成图片的引用链接。
Hexo博客搭建之PicGo+Github免费图床使用指南
StevenX5
06-08 1742
Hexo 博客站点搭建完成之后，需要考虑如何在文章中添加图片或视频。创建图床的目的是为本地图片等资源生成一个超链，然后将此连接嵌入到 编写的博客文章中，以此来解决博客中图片等资源的显示问题。本文介绍一种 PicGo + Github 搭建的免费图床。PicGo 是一款图片上传的工具，目前支持 SM.SM图床、微博图床，七牛图床，腾讯云COS，阿里云OSS，又拍云，Github 等图床，未来将支持更多图床。点击 这里 下载 PicGo 工具。根据操作系统选择对应的版本，安装到指定目录。在新建仓库页面，填入仓
搭建博客必看——超级简单的利用码云搭建图床
PCGuo999的博客
06-26 564
图床一般是指储存图片的服务器。因为自建博客需要图片服务器,考虑到用本机的图片服务器需要考虑数据备份链接路径等一系列问题,还是推荐使用第三方的服务。这里讲解的是用Gitee搭建图床，从而让博客添加图片。 一、配置环境 需要一个码云账户（没有的注册一个） 新建一个仓库，配置SSH码 本地安装Git，用来提交本地代码到远程仓库 具体可跳转至Hexo搭建博客 二、方式一 新建文件方式上传 在码云上搭建一个空的远程仓库,然后建一个文件夹 注意：不要轻易修改仓库的名字和文件夹的名字 然后点击上传文件,进
picgo处理hexo博客图片问题
weixin_45417211的博客
01-13 298
picgo处理hexo博客图片问题 欢迎各位来我的博客看看 前提: 免费！速度快！简单！ 之前写博客都是先写好，发表到csdn，然后再发表到自己的博客地址，因为csdn大家都懂，所以今天解决下一直没处理的图片存储问题。 效果 技术上因为用的是hexo，所以盯上了picgo，typor自己就支持所以配置起来很方便 可以看到下图粘贴图片的一瞬间就上传图片完成了，速度极快 方法 首先需要你下载 picgo ， typora 应该做开发的都知道吧，一款很好用的md编辑器,然后需要你建一个码云仓库，当然你可
hexo+github搭建个人博客
12-08
以下是使用Hexo和GitHub Pages搭建个人博客的步骤： 1.安装Node.js和Git 2.安装Hexo ```shell npm install -g hexo-cli ``` 3.初始化Hexo shell hexo init blog cd blog npm install ``` 4.配置Hexo 打开根...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

prefectjava

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值