写博客必备！手把手教大家搭建免费图床，真香！

不念不忘少年蓝@ 2023-07-11 05:45 4阅读 0赞

前段时间松哥发了一篇文章，鼓励大家写博客多做积累（[如果你没写过博客，现在就是你写博客的最佳时机][Link 1]），有小伙伴告诉松哥他已经开始实践了，感觉到自己的苦口婆心总算有了一点点作用还是蛮欣慰的。

今天想和大家分享一个写博客过程中经常遇到的技术性问题，就是博客图片存到哪里。**因为松哥自己最近搞了一个免费的图床，感觉还是蛮香的，于是和大家伙分享下。**

## 蛮荒时代 ##

先说说我刚开始写博客的时候，就直接打开博客平台的后台编辑器开始写，写好之后保存发布，写的过程中可能需要上传图片，于是就做好图片上传，博客写好之后，本地啥都没剩下。过了很久，我想把曾经写的博客整理成一个系列，结果发现只能从网站上重新拷贝文档下来，down 下来的图片还都自动加上博客平台的水印，真是让人又气又恼。

后来就学乖了，博客一般我在本地用 vscode 写，需要的图片，都一一编号，按顺序摆放好，然后在 Markdown 中通过相对路径的方式引入，像下面这样：

![format_png][]

写好之后，再拷贝到博客网站发表即可。这样，我本地就有一份存档，这也是为什么大家可以看到松哥整理的 274 页离线版 Spring Boot 教程，就是这个原因。这样有一天，如果我想对文章进行二次整理或者完善就会非常方便。

用 vscode 这样写当然没问题，但是也有很多小伙伴用的是一些笔记软件，印象笔记，有道笔记等等，如果用笔记软件的话，图片的引用就不会这么方便了，此时如果我们有自己的图床就会方便很多。

对于自己的图床，我就两方面的要求：

*  稳定
 *  图片编号有序

稳定就不用多说了，图片编号有序，这个挺关键的，这关系到未来有一天你是否还能够方便的找到自己的图片，而免费图床都是用随机字符串做图片名的，这块不是很方便，所以就想着能不能自己搭建一个图床。

刚好之前听说七牛云有免费的 10G 空间可以用来搭建个人图床，一直没有机会尝试，这次就试了下，没想到整个过程还是蛮顺利的，于是记录下来和小伙伴们分享下。

## 搭建图床 ##

搭建需要大家首先做两方面的准备工作：

1.  有一个自己的**已备案**域名，早期这个不是必须的，但是现在这个是必须的。当我们在七牛云上申请好存储之后，会生成一个临时的二级域名，这个二级域名有效期 1 个月，所以我们得提前准备好一个自己的域名。
2.  准备一个七牛云账户，并且实名认证下，这个就不需要我多说了吧，网站注册+上传身份证认证，这算是基本操作了。

好了，这两样准备好之后，我们就可以开始搭建我们的图床了。

首先在七牛云网站首页点击 **管理控制台** 进入到管理控制台页面，然后选择第一个对象存储，点击立即添加。

![format_png 1][]

然后给新的存储空间取一个名字，选择合适的存储区域，由于我们是要搭建自己的图床，所以最后一项访问控制选择**公开**，切勿选错。

![format_png 2][]

创建完成后，接下来，我们再来配置域名。

首先点击左边菜单栏的 CDN，然后再点击域名管理。

![format_png 3][]

默认情况下，只有一个测试域名，我们点击上方的 **添加域名**，添加自己的域名进来，这里如果没有特殊需求，配置一下域名地址即可，其他都使用默认即可：

![format_png 4][]

其他的选项，大家可以根据实际情况配置，我就不挨个说了，至少配置一个域名，后面就可以用了。配置完成之后，保存。

保存之后，这里会给你一个 CNAME，其实就是一个临时的二级域名：

![format_png 5][]

把这个 CNAME 复制下来，然后打开自己的域名服务商控制台，添加一条 CNAME 解析记录，像下面这样：

![format_png 6][]

这里的配置大家注意：

*  由于一开始添加域名的时候，我们配置的是 img.javaboy.com，所以这里的主机记录就是 img，不要写错了
 *  记录类型就是 CNAME，这个不能改
 *  线路类型默认即可
 *  记录值就是你复制的 CNAME

其他都默认，配置完成之后，保存即可。

> 那么这个域名配置是什么含义呢？我在这里给大家稍为科普一下。我们把图片上传到七牛云之后，肯定会生成一个访问路径，例如 http://abc-javaboy.qiniu.com/111.png，这个访问路径是有域名的，默认的域名就是七牛云给我们生成的一个临时二级域名，这个二级域名有效期 1 个月，1 个月之后就会失效。所以，我们要配置自己的域名，例如 img.javaboy.com，但是当我访问 http://img.javaboy.com/111.png 时，要让这个地址指向七牛云上去，怎么做呢？这个时候就要靠一条 CNAME 解析了，它可以把域名解析到别的域名上。

OK，这些事情全部做完之后，等待一会，十分钟左右，在 **空间管理->空间概览** 里边，看到 CDN 加速域名的状态为成功时，我们的所有配置就算都 OK 了。

接下来点到 **空间管理->空间概览** ，点击文件上传，就可以上传文件了。文件上传成功后，点击右边的更多，就可以复制文件链接了。

![format_png 7][]

整个操作过程还是比较 Easy 的，没有什么难度。

## PicGo 上传 ##

每次需要上传图片的时候，都要打开七牛云后台，这显然有些麻烦，于是有人开发了不少好用的客户端工具，松哥经过各种踩坑之后，感觉 PicGo 比较好用，在 Mac/Windows 上都支持，挺方便的，所以采用这个来做文件上传。

PicGo 可以从 GitHub 上下载，根据自己的系统选择合适的版本下载：[https://github.com/Molunerfinn/PicGo/releases][https_github.com_Molunerfinn_PicGo_releases]。

下载安装，这个我就不用说了，普通软件安装。

安装好之后，在图床配置里边，配置一下七牛图床：

![format_png 8][]

AccessKey、SecretKey 都可以从你的七牛后台的个人中心页面看到，直接复制过来即可。存储空间名就是你一开始创建的存储空间，访问地址则是你自己的域名，例如 http://img.javaboy.org。存储区域根据自己一开始选择的华南/华东/华北等，根据实际情况填写，但是这里注意填写区域简称：

![format_png 9][]

配置完成后，以后就可以把图片拖拽到上传区上传了，上传成功后会返回图片访问路径，这些就比较简单了，不再赘述。

![format_png 10][]

好了，这就是今天和小伙伴们分享的免费搭建自己的图床，写博客的小伙伴，可以试试哦。真香。

[Link 1]: https://mp.weixin.qq.com/s/JKEo1WbJghm3PcK75guxzA
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8zLzQvMTcwYTM1ZGY3YjE0OWRjMg?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8zLzQvMTcwYTM1ZGY2ZWQ3Y2ZiNQ?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8zLzQvMTcwYTM1ZGY3Mzk0NjIzZg?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8zLzQvMTcwYTM1ZGY3NzY1ZTM0Ng?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8zLzQvMTcwYTM1ZGY3NzZhMzk4MA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8zLzQvMTcwYTM1ZGY3NzQ1OTIyNA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8zLzQvMTcwYTM1ZTAyZDQyNGI3Nw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8zLzQvMTcwYTM1ZTAyNTdiMDU2Nw?x-oss-process=image/format,png
[https_github.com_Molunerfinn_PicGo_releases]: https://github.com/Molunerfinn/PicGo/releases
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8zLzQvMTcwYTM1ZTAzNDM0ZmY2Nw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8zLzQvMTcwYTM1ZTA0Y2UzOGUwNw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8zLzQvMTcwYTM1ZTA2YmU3NzgwYQ?x-oss-process=image/format,png