Mac下Hexo+GithubPage+域名+七牛云图床+Typora+PicGo搭建博客(2)

因为各个版本可能不一致,各个网站和软件也可能会发生未知变化,所以本文只针对特定版本和特定时间,遇到问题读者最好还是以官方文档为准。

Base信息:

MacOS:12.1

Node.js: 16.13.2

npm: 8.1.2

git: 2.15.0

Hexo: 6.0.0

Typora: 1.0.5

PicGo:2.3.0

本文成稿于2022-02-12,本文假定你具有一定编程基础,买好了域名并备案,了解md语法。


七牛云部分

注册七牛云:七牛云

实名注册后会送10G储存空间,我们就用这10G空间作为我们的图床。

进入七牛云的对象储存页面 ,选择空间管理,注意访问控制要选择公开,并找出存储区域的代号(华南是z2)

空间命名没有要求

创建成功后,点击进入对应空间:

然后进入域名管理,点击绑定域名:

注意!一定一定不要用七牛提供的测试域名!!!因为测试域名只有30天有效期,后面会失效的,到时候你的图片链接就都失效了!

image-20220212213602186

在跳转的页面中,添加加速域名,例如你的网址是https://www.so.com,那么加速域名应该是cdn.so.com(此处不要前缀https://www ,cdn这三个字母可以替换成任意你喜欢的单词,比如picbed等等),其余均使用默认即可,然后点击创建

image-20220212214116639

通信协议先选择HTTP,这会带来什么问题以及怎么解决会在最后做出解释。

对CNAME进行解析,进入空间管理中的空间概览:

image-20220212214654146

复制下图中的CNAME:

image-20220212214737927

参考上图中七牛云 请配置CNAME中的提示进行配置,笔者使用的是阿里云的万网域名进行解析的,其他网站也是类似处理:

添加一条记录,记录类型是CNAME,主机记录就是上面提到的七牛云中的加速域名(笔者用的cdn,也可以换成picbed等),记录值就填写七牛云中的CNAME,然后保存即可,一般需要三五分钟才能生效;生效后七牛云页面会显示已配置

image-20220212215048326

image-20220213132732425


PicGo.app部分

下载PicGo ,支持windows,macos(intel),最新测试版2.3.1-beta.2版本支持macos(arm64),注意版本。如果下载速度过慢,可以考虑这个网址(如果链接失效请提醒我,谢谢。)

然后进行傻瓜式安装,安装成功后双击打开软件。

macos下,双击PicGo在状态栏上面的图标,然后选择打开详细,选择图床设置中的七牛图床,按照如下设置即可:

  • AccessKey/SecretKey从七牛云的右上角我的头像–个人中心–密钥管理中获取
  • 储存空间名应该和七牛云中的保持一致
  • 访问网址为你在七牛云中设置的加速域名,比如你在七牛云中设置的是cdn.so.com,那么此处就填写http://cdn.so.com
  • 存储区域就是空间管理中的存储区域的代号。
  • 然后点击确定即可,软件中会有其他的设置项,按照个人习惯使用就好了。

image-20220213134813274


Typora部分

打开Typora,选择偏好设置–图像,按照如下设置即可:

image-20220213134959623

然后点击验证图片上传选项测试即可。


使用图床

在打开PicGo的前提下,任何复制到Typora中的图片都会自动上传到七牛云上,无需任何人工介入。

Enjoy!😊


HTTP和HTTPS问题

通过上述方法上传到七牛云的图片,访问只支持HTTP协议,HTTPS协议不在免费容量内。而GithubPage现在默认是HTTPS协议,所以会出现你本地能够查看图片,但是线上图片裂开的情况。解决方法有两种:

  • 不想花钱:那就全站切换到HTTP协议,操作方式为在github仓库的settings下点击pages选项,取消勾选Enforce HTTPS,然后清除浏览器缓存,重新进入,即可使用http协议访问图片了。需要注意的是,如果访问者依然使用https协议访问,那么还是看不到图片的。

    image-20220215103351074

  • 花钱,去七牛云购买https套餐即可,其余不用修改,注意七牛云处设置为HTTPS/HTTP兼容模式。

  • 截止2022-02-15,七牛云/又拍云/阿里云/腾讯云 本人均未发现免费的HTTPS免费图床,如果你有更好的选择,欢迎给我发邮件,谢谢。

如果觉得写的还行,赞助瓶脉动~
0%