让自己的博客使用https协议
小橘子🍊
  2019-05-07 12:16:47 2019-05-07 12:16      

前言

在构建好自己的博客系统后，就是进行博客的上线了，考虑到国内访问 GitHub 速度较慢，我这里的选择的阿里云的服务器，同时还申请了一个域名。静态资源服务器选择的是 nginx，为什么选择 nginx 呢？emmm…. 只是因为我就知道这个，整个的发布过程还算容易，只是中间有个小细节需要注意，如果你想要你的博客支持 https 协议那么在你的博客页面中，任何的资源请求都必须是 https 的， 否则在浏览器的地址栏前边就会提示不安全的页面。另外由于在 markdown 插入图片是一个非常麻烦的事情，所以在文章中提到了一种通过七牛云做图床，然后快速给 markdown 插入图片的方法。

添加 https 支持

为 nginx 添加 http_ssl_module

你能看到这篇文章，相信你已经完成了自己的博客上线了，并且是采用的自己的服务器和域名，因为通 GitHub Page 来部署自己的博客的话，默认就是支持 https 协议的。我的 nginx 是通过源码包安装的，通常在未指定其他参数的情况下，安装的 nginx 是不带 ssl（https 的实现就是基于此）模块的，如果不确定的话，你也可以通过执行 /path/to/nginx/nginx -V 指令进行确认，如果输出结果有 --with-http_ssl_module 相关内容则代码你的 nginx 是支持 https 协议的，否则你需要为已安装的 nginx 添加 http_ssl_module，方法很简单，只需要下载相应版本的 nginx 的源码包，解压后进入源码包，再依次执行下边两条指令即可：

1
2
3
4
# 添加 http_ssl_module 模块
./configure --with-http_ssl_module
# 重新编译，注意不是 make install（会覆盖现在的配置）
make

重新执行以下 /path/to/nginx/nginx -V 确认模块添加成功。

为 nginx 添加 https 证书

我的域名也是在阿里云购买的，同时可以在阿里云购买免费的认证证书，按照相应的步骤操作就行了，申请证书完成后就等待申请通过吧，通常都很快，通过后就能把你申请的证书下载下来了，解压后有两个文件，一个是证书文件，另外一个是钥匙串。你需要做的就是将这两个文件上传到你的 nginx 服务器中，随便一个位置就好，后边的 nginx 配置中需要引用这两个文件。

执行 vim /path/to/nginx.conf/nginx.conf 编辑 nginx 配置文件，修改 HTTPS Server 节点内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# HTTPS server
server {
    listen       443 ssl;
    server_name  www.aprilyolies.top;   # 自己的域名
    charset utf-8;

    ssl_certificate      /usr/local/nginx/cert/https.pem; # 自己的证书文件完整路径
    ssl_certificate_key  /usr/local/nginx/cert/https.key; # 自己的钥匙串文件完整路径

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;

    location / {
        root   /home/eva/blog/aprilyolies;  # 博客的完整路径
        index  index.html index.htm;
    }
}

修改完成后执行 nginx -s reload 重启 nginx 服务即可，通过浏览器访问一下你的博客吧，是不是那个熟悉的 https 标志回来了？

设置重定向规则

这里还有个问题，就是访问时必须要指定是 https 协议，否则还是走的 http 协议，这对于电脑小白来说或许是个安全隐患。所以在这里，我们还得为 nginx 加一点配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  www.aprilyolies.top;

    return 301 https://$server_name$request_uri;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   /home/eva/blog/aprilyolies;
        # root   html;
        index  index.html index.htm;
    }
}

没错，就是在 HTTP Server 节点下加上 return 301 https://$server_name$request_uri; 这样一句，意思就是通过 http 协议进行的请求都重定向到 https 协议之上。这样你再通过浏览器访问时，就一定是使用 https 协议了。

再提醒一句：如果你想要你的博客支持 https 协议那么在你的博客页面中，任何的资源请求都必须是 https 的。

轻松方便的为 markdown 添加图片

如果你现在文章的图片还是选择直接保存到自己的服务器，或者说是不反感现在插入图片的那一系列繁琐的过程，那么下边的内容可能就适合你了，但我还是强烈建议你将剩下的内容看完，因为你会爱上这种操作方式的。

环境说明：我这里使用的是 macOS Mojave 10.14.4 操作系统 + Alfred3 ，如果你使用的是 windows 操作系统，请移步 Windows 版本 markdown 一键贴图工具，另外 mac 用户自行安装 Alfred3 ，并需要支持 PowerPack（就是需要付（Pò）费（jiě）啦）。

申请七牛云对象存储空间

请自行前往七牛云官网注册并进行实名认证，然后你就能得到免费的 10GB 存储空间了，过程很简单，按照提示操作就行。

添加 CDN 加速域名

先介绍一下 CDN（Content Delivery Network），简单来说，CDN 就是一个缓存服务器端资源的特殊网络，这种网络尽可能的避免影响网络传输速率的节点，同时还有负责负载均衡调度的控制中心，以此来保证网络中的资源尽快的到达用户手中。就像遍布全国的零售店，如果没有这些零售店，那么你买任何东西就得去商品的原产地（这个过程有一个专业名词叫“回源”），这样的速度就很慢，而为了提高商品到达你手中的速度，遍布全国的零售店就构成了一个类似的 CDN。

因为要添加域名，所以首先你需要先得到一个域名，或许你会问我现在不是有一个域名吗，就用这一个可以吗？答案是要看你现在的这个域名是否已经被解析过了，如果没有被解析，那么直接使用就行。那如果解析过了呢？也是有办法的，你可以选择创建一个二级域名，形式如同 xxx.domain.com，如果还是不明白，那就以我的域名举例子。不过在那之前需要先说一下域名解析的两种记录方式：

  • A 记录：将域名直接映射到一个 IP 地址，由这个 IP 代表的服务器提供服务。

  • CNAME 记录：将域名映射到另外一个域名，再由这个域名所代表的服务器提供服务。

再回到正文，首先我在阿里云备案了一个叫做 www.aprilyolies.top 的域名，不妨称它为一级域名吧，我将它解析为了一条 A 记录，对应的 IP 就是我的服务器的 IP。然后我在这个一级域名下新建一个二级域名，因为主要是用来存放图片，所以取名 image.aprilyolies.top，这就是一个二级域名，注意！！不要带 www 前缀！！不要带 www 前缀！！不要带 www 前缀！！ 重要的事情说三遍。

说到这里，可能你都晕了，那就总结一下吧，在你申请过七牛云的对象存储服务后，想更进一步的往里边存储文件，那么就需要添加一个域名，当然你也可以使用它提供的那个测试域名，但是有效期只有30天，到期自动失效，所以你需要获取一个新的域名，就是上文中所说的二级域名，然后在七牛云对象存储空间的控制面板点击自定义域名：

进入到创建域名界面后，你需要设置几个参数，加速域名，就是二级域名，你自己根据现在的一级域名想一个二级域名即可（如果你现在有多余的一级域名，那也是可以用的哈）。通信协议，一定要选 https 否则你博客的 https 协议就会出问题了，这里会要求你提供证书，就选择七牛云免费为你提供的证书就好，自己有的话也可以自行上传证书。

这样七牛云这边的配置就 ok 了，创建完成后会返回一个 CNAME 值，这里我将它理解为对应七牛云自家的 CDN 中的一个域名，然后你设置的这个二级域名，就是返回的这个 CNAME 对应域名的别名，剩下你需要做的，就是将这个二级域名映射到这个 CNAME 上， 在你购买域名的平台上进行操作就行了，这里以阿里云为例：

这样添加 CDN 加速域名就完成了，怎么样？是不是很简单？但是写这么多，只是想让自己更好的理解其中一些相关概念的意思。添加后就需要等待七牛云那边 CNAME 过程完成了，只有提示完成后，才表示真的添加成功。

安装一键贴图插件

先说一下这个插件的原理，其实就是一系列脚本的集合，它借助 Alfred3 这个软件的 workflow 功能来执行这样的脚本集合，可以自定义启动的快捷键。这种脚本使用 osascript 语言编写的，我也不会，幸好有大佬已经将这样的脚本写好并发布到 GitHub 了，这是下载地址，但是其中内容有点问题，我自己改了一下，后边再说。然后因为要上传图片，所以还要借助七牛云官方的开发工具 qshell，也附上下载地址。

导入 workflow 并修改部分内容

导入很简单，将第一个下载链接的内容解压，双击 Qiniu.alfredworkflow 并选择相应分类就好了（提前安装好 Alfred3 带 PowerPack 的版本），然后就会出现一个新的 workflow，其实就是一个工作流，定义了你上传图片时那一系列的繁琐步骤。

设置相关的环境变量，点击 Qiniu 右上角第二个按钮，出现如下对话框，根据实际情况填写好保存即可。access_key 和 secret_key 请在你自己的七牛云账户中心中查询，bucket 就是一图中所标注出来的名字，bucketDomain 就是你的二级域名，不要带 www 前缀！！不要带 www 前缀！！不要带 www 前缀！！ 重要的事情再说三遍。

修改脚本内容，注意内容中的中文注释，只需要修改其中三行即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
-- config start
property bucket : (system attribute "bucket")
property bucketDomain : (system attribute "bucketDomain")
property AccessKey : (system attribute "AccessKey")
property SecretKey : (system attribute "SecretKey")
-- config end

-- md5(date) as file name
set fileName to do shell script "date \"+%Y%m%d%H%M%S\" | md5"

-- see if clipboard is a file
set filePath to ""
try
	set clipPath to the clipboard as «class furl»
	set filePath to clipPath as alias
	-- like "/Users/jverson/Pictures/igarss/IMG_20140720_221838.jpg"
	set filePath to quoted form of POSIX path of filePath
	set filePath to second item of my theSplit(filePath, "'")
	set tempArray to my theSplit(filePath, ".")
	-- like "jpg" or "png" or "gif" or "mp4"
	set fileType to last item of tempArray
end try

if filePath is not "" then
	set fileName to fileName & "." & fileType
	set markdownUrl to my upload(fileName, filePath, fileType)
	return markdownUrl --end
end if


-- see if clipboard is image data
set jpegDATA to ""
try
	set jpegDATA to the clipboard as JPEG picture
end try
if jpegDATA is not "" then
	set tempPath to "/tmp/"
	set fileName to fileName & ".jpg"
	set filePath to tempPath & fileName
	set theFile to open for access filePath with write permission
	write jpegDATA to theFile
	close access theFile
	set markdownUrl to my upload(fileName, filePath, "jpg")
    -- delete temp file
    do shell script "rm " & filePath
	return markdownUrl
end if

beep 1
display dialog ¬
	"No file or image data found on the clipboard." with icon ¬
	note buttons {"Whatever"} default button 1
return

-- string split function
-- ref: http://erikslab.com/2007/08/31/applescript-how-to-split-a-string/
on theSplit(theString, theDelimiter)
	-- save delimiters to restore old settings
	set oldDelimiters to AppleScript's text item delimiters
	-- set delimiters to delimiter to be used
	set AppleScript's text item delimiters to theDelimiter
	-- create the array
	set theArray to every text item of theString
	-- restore the old setting
	set AppleScript's text item delimiters to oldDelimiters
	-- return the result
	return theArray
end theSplit

-- upload image to qiniu
on upload(fileName, filePath, fileType)
    -- compress image todo..

    -- qiniu account set
    // 设置账户信息，原脚本缺少一个用户名参数，导致执行失败，为了简化操作，这里请按如下设置。
    set account_commond to "/usr/local/bin/qshell account "
    do shell script account_commond
    -- upload to qiniu
    -- 这里可以设置图片在七牛云的存储路径，默认是在根目录，我这里设置的是在 “static/images/common/” 目录下，可以根据你自己的需求修改。
	set upload_command to "/usr/local/bin/qshell fput " & bucket & " static/images/common/" & fileName & " " & filePath
	do shell script upload_command
    -- strcat url
    set resourceUrl to bucketDomain & fileName
    if (fileType is "png") or (fileType is "jpg") or (fileType is "gif") or (fileType is "bmp") or (fileType is "jpeg") then
        -- 设置按下快捷键后，输出内容的格式。修改之前返回的内容格式为 ![](被上传的图片链接)，但是这种语法不能很好的控制图片的大小和位置，所以我修改为了如下内容，方便控制图片大小和位置，根据自己的需求进行修改即可。
	    set markdownUrl to "<div style=\"text-align:center;\"><img src=\"" & resourceUrl & "\" width=600 /></div>" 
	    return markdownUrl
    else
        return resourceUrl
    end if

end upload

-- ref:https://discussions.apple.com/thread/2379870?start=0&tstart=0

配置 qshell 执行环境

很简单，将第二个下载链接下载的压缩包解开，然后将其中对应 mac 版本的 qshell_darwin_x64 重命名为 qshell 丢到 /usr/local/bin 路径下，并增加执行权限。

执行 qshell account -- access_key secret_key username 添加一个用户。

测试一键上传图片功能

请保证你的剪切板中有一张图片，可以选择复制一张图片，或者通过截图的方式做到。然后请在任何可以输入文本的地方按下 workflow 中设置的快捷键。是不是出现了符合 markdown 语法的图片引用了呢？然后再去七牛云空间看看，是不是剪切板中的那张图片已经被上传了呢？如果都没问题那就表示设置成功了哈，慢慢享用吧。