基于Typora和七牛云配置文章图床

前言

前段时间csdn做了一次改变,使得图片防盗链导致笔者网站的文章图片变成这样子。

基于Typora和七牛云配置文章图床_第1张图片

查阅网上的方案经过比对发现七牛云有免费的额度,所以最终选择七牛云作为图床,所以借着这篇文章来记录一下部署图床部署过程。

注意:这篇文章并不适用于所有读者,请确保你具备以下几个条件:

  1. 有个人服务器,且网站部署在个人服务器上。
  2. 文章是用Typora编写。
  3. 有HTTPS证书。

配置步骤

注册并实名制七牛云

首先自然是到七牛云网站完成注册和实名制了,只有完成实名制才能免费送10G的空间和下行流量。

网站地址如下:

七牛云

完成后你的个人通知中就会看到这样一条消息

基于Typora和七牛云配置文章图床_第2张图片

创建存储空间

完成基础认证工作之后就可以创建存储空间了,如下图所示,点击空间管理,新建一个自定义的存储空间,以笔者为例,笔者这里名字就设置为java-docs,存储区域随意挑选一个。然后是访问控制设置,由于个人网站对外公开,所以这里访问权限也选择公开,最后点击确定,自此空间就创造完毕了。

基于Typora和七牛云配置文章图床_第3张图片

配置HTTPS域名(基于CDN加速的方式,收费)

由于七牛云自带的图床域名只能维持30天,所以我们必须配置一下自己的域名。首先点击空间管理选择自定义域名。

基于Typora和七牛云配置文章图床_第4张图片

见下图,首先输入域名,因为笔者是从阿里云那边获得域名,所以选择泛域名,便于后续配置具体域名。
通信协议我们选择HTTPS,将我们将自己拥有的HTTPS公私钥的值粘贴进去。这里推荐的一个免费的HTTPS获取的网站。ohttps:https://ohttps.com/monitor/dashboard

其余选项默认即可,完成后点击创建即可。

基于Typora和七牛云配置文章图床_第5张图片

域名配置完成之后需要等待生效,在此期间我们还需要确保域名是我们的,所以我们要根据七牛云的提示到域名列表中配置TXT解析。

如下图,我们按照提示将七牛云给予的主机记录和记录值添加到域名解析设置中。然后回到七牛云中点击检测即可。

基于Typora和七牛云配置文章图床_第6张图片

完成这些步骤之后,就需要进行最后一步了,自定义域名配置,我们拿着七牛云基于的CNAME配置到我们的域名解析中。

基于Typora和七牛云配置文章图床_第7张图片

见下图,添加一条解析记录,将记录类型选择CNAME,然后将CNAME的值添加到记录值中,主机记录就是自定义即可,例如笔者设置为qiniu,那么最后图片的地址就是qiniu.域名/图片

在这里插入图片描述

配置HTTPS域名(自定义源站域名,免费)

上面的方式配置域名是需要收费的,所以为了节约成本的读者建议配置HTTPS域名时采取自定义源站域名,配置方式也很简单。

在七牛云管理页面点击空间管理选择绑定域名。

基于Typora和七牛云配置文章图床_第8张图片

然后输入你要作为图片地址的域名,以笔者为例,就是qiniuyun.xxx.com

基于Typora和七牛云配置文章图床_第9张图片

如果需要配置HTTPS的同学可以点击这里配置HTTPS,步骤和上文配置CDN的方式是一样的,这里不多做赘述了。

基于Typora和七牛云配置文章图床_第10张图片

最关键的一步,我们上文配置的域名还没有生效,所以我们要拿着七牛云给的CNAME的值到域名管理界面配置解析,是这个域名生效。

基于Typora和七牛云配置文章图床_第11张图片

以笔者为例,域名是通过阿里云申请备案的,所以我们到阿里云管理界面,将主机记录设置为上文设置的域名前缀,即qiniuyun,然后记录类型选择CNAME,记录值即上一步复制的值。

基于Typora和七牛云配置文章图床_第12张图片

自此我们免费的图片上传配置也完成了,为了保证http的域名可用,我们还需将对应https的证书扔到nginx中。以笔者为例笔者的https是基于OHHTTPS配置的,所以我们回到OHTTPS获取下载最新证书。

基于Typora和七牛云配置文章图床_第13张图片

如下图所示,笔者在nginx下创建一个certificates专门存放证书。

基于Typora和七牛云配置文章图床_第14张图片

然后在nginx的server配置中增加这两条配置,指定证书文件的路径

 ssl_certificate     /etc/nginx/certificates/fullchain.cer;
        ssl_certificate_key /etc/nginx/certificates/cert.key;

文件如下图所示

基于Typora和七牛云配置文章图床_第15张图片

测试图片上传

完成上述步骤即可在网站进行图片上传测试了。点击空间管理选择文件选项,进入文件上传界面开始测试图片是否可以正常上传。

基于Typora和七牛云配置文章图床_第16张图片

选择文件上传,选择本地的图片文件,准备上传。

基于Typora和七牛云配置文章图床_第17张图片

选择本地资源完成后,点击上传,此时就会将本地图片上传到七牛云。

基于Typora和七牛云配置文章图床_第18张图片

完成后点击任务中心。点击复制链接

基于Typora和七牛云配置文章图床_第19张图片

可以看到笔者的图片确实上传到七牛云中了,自此七牛云的配置算是完成了。

基于Typora和七牛云配置文章图床_第20张图片

配置Typora

接下来就到关键一步了,将Typora的图片设置为传到七牛云中。点击文件选择偏好设置进行图像设置。

基于Typora和七牛云配置文章图床_第21张图片

点击图像,选择上传图片,并勾选下图配置,安装PicGo客户端,选择PicGo的安装路径(如果没有安装读者可以根据Typora提示完成安装)。

基于Typora和七牛云配置文章图床_第22张图片

打开PicGo点击这个签名配置七牛云图床。

基于Typora和七牛云配置文章图床_第23张图片

然后我们就会看到这样一个页面,要配置好多选项,别急,笔者一个个带你完成配置。

基于Typora和七牛云配置文章图床_第24张图片

首先是AccessKey和SecretKey,这两个选项点击七牛云左上方密钥管理即可看到,我们将其复制粘贴过来即可。

基于Typora和七牛云配置文章图床_第25张图片

基于Typora和七牛云配置文章图床_第26张图片

接下来是bucket,我们点击空间管理,将下图这段文本复制过去即可。

基于Typora和七牛云配置文章图床_第27张图片

然后是访问网址了,还记我们在配置CNAME时配置的主机记录嘛?我们只需将主机记录+自己的域名复制过去即可。

例如笔者域名是aa.com,那么配置的访问地址就是http://qiniu.aa.com

在这里插入图片描述

设定存储区域,这个配置比较麻烦笔者下午也是猜了好半天,最终打算到官方文档中找到答案,果然黄天不负有心人。点击文档选择常见问题。

基于Typora和七牛云配置文章图床_第28张图片

点击搜索存储区域,最终看到了答案。

基于Typora和七牛云配置文章图床_第29张图片

可以看到答案都原原本本都在下方了,以笔者为例华东-浙江2,所以存储区域配置为cn-east-2即可。需要的读者也可以打开这个地址查看主机的region-id:https://developer.qiniu.com/kodo/1671/region-endpoint-fq

基于Typora和七牛云配置文章图床_第30张图片

最后是存储路径了,笔者希望将这些图片存到图床的img目录中,所以存储路径就配置为img。

这里补充一个设置,为了保证上传的图片唯一,我们建议上传的图片选择用时间戳作为命名。配置步骤也很简单,点击PicGo设置勾选时间戳重命名即可。

基于Typora和七牛云配置文章图床_第31张图片

自此我们的七牛云图床配置就算完成了。我们不妨回到Typora点击测试一下

基于Typora和七牛云配置文章图床_第32张图片

如果出现下图所示的样子,就说明配置成功了,我们的Typora+七牛云图床就算大功告成了。

基于Typora和七牛云配置文章图床_第33张图片

然后你就可以如下图所示点击上传图片,默默的将因为csdn防盗链设置,导致网站无法显示的图片一张张传到七牛云上了。

基于Typora和七牛云配置文章图床_第34张图片

参考文献

Typora + Gitee(码云) + PicGo 部署图床

Typora + 七牛云图床快速配置,告别手动上传图片!

设置自定义源站域名

你可能感兴趣的:(BUG修复,typora,个人网站,图床)