-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathhttps_your_blog.html
More file actions
221 lines (195 loc) · 14.6 KB
/
Copy pathhttps_your_blog.html
File metadata and controls
221 lines (195 loc) · 14.6 KB
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!doctype html>
<html lang="zh-CN" class="night">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=0" name="viewport">
<title>Ede's Blog</title>
<meta name="description" content="Try to be a qualified programmer">
<meta property="og:type" content="website">
<meta property="og:description" content="Try to be a qualified programmer">
<meta property="og:title" content="Ede's Blog">
<meta property="og:site_name" content="Ede's Blog">
<meta property="og:url" content="https://ede.ink">
<meta property="og:image" content="https://edeity.oss-cn-shenzhen.aliyuncs.com/public/edeity_o.png">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="mainfest" href="/mainfest.json">
<link rel="stylesheet" href="/public/css/common.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_707055_4b9og9sc5lx.css">
<script>
// 是否需要切换黑夜模式（此JS应在CSS加载前执行，否则会造成页面闪烁）
(function toggleNightOrDay() {
var isForceNightTheme = window.location.search.indexOf('theme=night') !== -1
|| window.localStorage.getItem('edeity-theme_theme') === 'night';
var isForceLightTheme = window.location.search.indexOf('theme=light') !== -1
|| window.localStorage.getItem('edeity-theme_theme') === 'light';
var hours = new Date().getHours();
hours = 22;
var html = document.querySelector('html')
if (isForceNightTheme) {
html.classList.add('night');
} else if (isForceLightTheme) {
html.classList.remove('night');
} else {
// 没有强制开关，用时间计算
if (hours < 8 || hours >= 20) {
html.classList.add('night');
} else {
html.classList.remove('night');
}
}
})();
// 切换暗夜模式，需要在CSS渲染前调整，否则重绘时会闪烁
document.addEventListener('DOMContentLoaded', function () {
// 是否需要隐藏左侧导航栏
if (document.querySelector('ol.toc') !== null) {
var bar = document.querySelector('#nav-bar')
bar.style.cssText = 'display: block'
}
});
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M3J9QSEE2Z"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-M3J9QSEE2Z');
</script>
<meta name="generator" content="Hexo 7.3.0"></head>
<body>
<div class="loading"></div>
<div id="switch" data-switch="{"toc":true,"use_pwa":false}"></div>
<header class="fullscreen">
<div class="toolbar">
<i class="iconfont icon-menu"></i>
</div>
<h1>
<a href="/">Ede's Blog</a>
</h1>
<div class="head-link">
<a class="btn waves" href="/">
<span>
<i class="iconfont icon-home">
Home
</i>
</span>
</a>
<a class="btn waves" href="/about/index.html">
<span>
<i class="iconfont icon-me">
About
</i>
</span>
</a>
<a class="btn waves" target="_blank" rel="noopener" href="https://github.com/edeink">
<span>
<i class="iconfont icon-github">
Github
</i>
</span>
</a>
</div>
</header>
<div class="some-link">
<a class="btn" id="light-or-not">
<i class="iconfont icon-light"></i>
</a>
<a style="display: none;" class="btn" id="up-to-top">
<i class="iconfont icon-up"></i>
</a>
</div>
<div id="nav-bar" style="display: none">
<div class="toc">
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%9F%E5%90%8DHttps%E5%8C%96"><span class="toc-number">1.</span> <span class="toc-text">域名Https化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%9A%E5%AA%92%E4%BD%93Https%E5%8C%96"><span class="toc-number">2.</span> <span class="toc-text">多媒体Https化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%EF%BC%9APWA%EF%BC%81"><span class="toc-number">3.</span> <span class="toc-text">其他：PWA！</span></a></li></ol>
</div>
</div>
<main id="content-main" class="section">
<div class="list-item">
<h1 class="post-title">
<a id="Https你的博客" class="article-link" href="">
Https你的博客
</a>
</h1>
<div class="post-meta">
<time class="meta published">
Jan 25, 2018
</time>
</div>
<!-- 文章声明 -->
<div class="article">
<div class="post-excerpt markdown-body">
<p>前不久想在自己的博客上尝试<code>PWA</code>（Progressive Web App）功能，而<code>PWA</code>的前置条件是<code>Https</code>。因本域名没有在国内备案，故寻找服务商花费了几天的时间，特将结果记录于此。大致可分为两步：</p>
<ol>
<li><code>域名Https</code>（含前端源文件，如HTML、CSS、JS等）</li>
<li><code>多媒体Https</code>（含前端多媒体资源，如png、jpg、gif等，即图床）</li>
</ol>
<h2 id="域名Https化"><a href="#域名Https化" class="headerlink" title="域名Https化"></a>域名Https化</h2><p><a target="_blank" rel="noopener" href="https://www.cloudflare.com/">CloudFlare</a>提供了免费的Https服务，因为联合了百度CDN，即使在国内，也能提供不错的访问速度。</p>
<p>步骤如下：</p>
<ol>
<li><p>在<a target="_blank" rel="noopener" href="https://www.cloudflare.com/">CloudFlare</a>中<code>Add New Website</code>，按照提示填写自己的域名，eg：<code>edeity.me</code></p>
</li>
<li><p>更改域名记录，将记录类型更改为<code>NS</code>类型，并指向CloudFlareDNS服务解析器，<code>anirban.ns.cloudflare.com</code>、<code>gail.ns.cloudflare.com</code>，配置如下：</p>
<p><img src="https://edeity.oss-cn-shenzhen.aliyuncs.com/2018/domain_config.png" alt="阿里云DNS配置"></p>
</li>
<li><p>CloudFlare添加成功后，等待片刻，即可通过Https访问网站。</p>
<ul>
<li>推荐总是启用Https，步骤：<code>域名面板</code>-><code>SSL</code>-><code>Always use HTTPS</code>-><code>ON</code>，后续访问Http时，也会跳转到Https上。</li>
</ul>
</li>
</ol>
<h2 id="多媒体Https化"><a href="#多媒体Https化" class="headerlink" title="多媒体Https化"></a>多媒体Https化</h2><p>因七牛存储不再提供https二级域名，而自定义域名又需要繁琐的备案，只好放弃。</p>
<p>考虑博客流量不大，大方地使用了<a target="_blank" rel="noopener" href="https://oss.console.aliyun.com/">OSS</a>（阿里云旗下的服务，收费）。</p>
<p>不注重访问速度，或国外的用户可考虑Yahoo的<a target="_blank" rel="noopener" href="https://www.flickr.com/">flickr</a>，有1T的<strong>免费</strong>存储空间。</p>
<p>注：默认配置中，OSS的资源是是私有的（无法外网访问），需要在<code>基础设置</code>中，把<code>读写权限</code>更改为<code>公共读</code>。</p>
<h2 id="其他：PWA！"><a href="#其他：PWA！" class="headerlink" title="其他：PWA！"></a>其他：PWA！</h2><p>假如没有定制化需求，建议使用Workbox3，参考：<a href="/learn_workbox.html">Workbox3初探：让离线缓存变得简单</a></p>
<hr>
<p><strong>以下为原纪录（不推荐）：</strong></p>
<p>网站升级为Https后，尝试<code>PWA</code>的功能，在此仅列举一项功能：<code>离线缓存</code>。</p>
<p>参考google给出的<a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/">范文</a>。</p>
<ol>
<li><p>引入<code>Manifest.json</code>，用于描述你的PWA：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"manifest"</span> <span class="attr">href</span>=<span class="string">"/manifest.json"</span>></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>告知<code>PWA</code>配置文件名称，并启动：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">if</span> (navigator.<span class="property">serviceWorker</span> != <span class="literal">null</span>) {</span><br><span class="line"> navigator.<span class="property">serviceWorker</span>.<span class="title function_">register</span>(<span class="string">'/service-worker.js'</span>)</span><br><span class="line"> .<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">registration</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'PWA regist success'</span>);</span><br><span class="line"> });</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>在配置文件<code>service-worker.js</code>运行离线脚本</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> filesToCace = [<span class="string">'在此书写需要缓存的资源，如/index.html'</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 激活缓存</span></span><br><span class="line">self.<span class="title function_">addEventListener</span>(<span class="string">'activate'</span>, <span class="keyword">function</span>(<span class="params">e</span>) {</span><br><span class="line"> e.<span class="title function_">waitUntil</span>(</span><br><span class="line"> caches.<span class="title function_">keys</span>().<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">keyList</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">all</span>(keyList.<span class="title function_">map</span>(<span class="keyword">function</span>(<span class="params">key</span>) {</span><br><span class="line"> <span class="keyword">if</span> (key !== cacheName) {</span><br><span class="line"> <span class="keyword">return</span> caches.<span class="title function_">delete</span>(key);</span><br><span class="line"> }</span><br><span class="line"> }));</span><br><span class="line"> })</span><br><span class="line"> );</span><br><span class="line"> <span class="keyword">return</span> self.<span class="property">clients</span>.<span class="title function_">claim</span>();</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="comment">// 拦截，判断是否可从缓存中读取资源</span></span><br><span class="line">self.<span class="title function_">addEventListener</span>(<span class="string">'fetch'</span>, <span class="keyword">function</span>(<span class="params">e</span>) {</span><br><span class="line"> e.<span class="title function_">respondWith</span>(</span><br><span class="line"> caches.<span class="title function_">match</span>(e.<span class="property">request</span>).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">response</span>) {</span><br><span class="line"> <span class="keyword">return</span> response || <span class="title function_">fetch</span>(e.<span class="property">request</span>);</span><br><span class="line"> })</span><br><span class="line"> );</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
</li>
<li><p>由于Hexo的Url路径均是动态生成的，将所有的url都写入<code>Service-worker.js</code>的<code>filesToCace</code>中是件苦力活，可采用<a target="_blank" rel="noopener" href="https://github.com/JLHwung/hexo-offline">hexo-offline</a>可以自动完成这份工作。</p>
<ul>
<li><p><code>yarn install hexo-offline --dev</code></p>
</li>
<li><p>由于不知名的缘故，采用<code>hexo-offline</code>后，文件的权限变更了。回顾<code>chown</code>的用法：</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 755 for 文件夹、可执行文件</span></span><br><span class="line"><span class="comment"># 644 fro 普通文件</span></span><br><span class="line"><span class="comment"># 400 for 证书</span></span><br><span class="line"><span class="built_in">chmod</span> 755 -R <span class="built_in">dir</span> </span><br><span class="line"><span class="comment"># 更改目录所有者</span></span><br><span class="line"><span class="built_in">chown</span> -R user</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ol>
</div>
</div>
</div>
<div class="more section">
<div class="pre">
<a class="article-link" href="/code_react_redux.html">
<i class="iconfont icon-right"></i>
<span>react-redux实现原理</span>
</a>
</div>
<div class="next">
<a class="article-link" href="/my_enterprise_application.html">
我所认知的企业级ERP应用
<i class="iconfont icon-right"></i>
</a>
</div>
</div>
</main>
</body>
<footer class="section fullscreen">
<div class="footer-desc">
Edeink © 2015-2025 · Powered by Hexo
</div>
</footer>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!--<script src="https://lab.hakim.se/zoom-js/js/zoom.js"></script>-->
<script src="/public/js/init.js"></script>
</html>