-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
310 lines (178 loc) · 14.4 KB
/
index.html
File metadata and controls
310 lines (178 loc) · 14.4 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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hexo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
<link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
<link rel="shortcut icon" href="/favicon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">
<meta name="generator" content="Hexo 6.1.0"></head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">Hexo</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="Search"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://example.com"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-利用GitHub-jsDeliver-PicGo搭建图床" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<div class="article-meta">
<a href="/2022/04/03/%E5%88%A9%E7%94%A8GitHub-jsDeliver-PicGo%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A/" class="article-date">
<time class="dt-published" datetime="2022-04-03T13:25:43.000Z" itemprop="datePublished">2022-04-03</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="p-name article-title" href="/2022/04/03/%E5%88%A9%E7%94%A8GitHub-jsDeliver-PicGo%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A/">利用GitHub+jsDeliver+PicGo搭建图床</a>
</h1>
</header>
<div class="e-content article-entry" itemprop="articleBody">
<h1 id="利用GitHub-jsDeliver-PicGo搭建图床"><a href="#利用GitHub-jsDeliver-PicGo搭建图床" class="headerlink" title="利用GitHub+jsDeliver+PicGo搭建图床"></a>利用GitHub+jsDeliver+PicGo搭建图床</h1><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近突然开始想把自己折腾的东西都记录一下，之前虽然搞过很多东西，但现在让我在搞一遍我还是要去各种搜索。因此打算利用Markdown来记录，而要使用markdown图片问题就必须要解决。如果是本地存储还好，直接插入图片就可以，但如果图片的路径发生改变或者搭建博客，这时候就要利用图床来解决。</p>
<h2 id="准备知识"><a href="#准备知识" class="headerlink" title="准备知识"></a>准备知识</h2><h3 id="1、什么是图床？"><a href="#1、什么是图床？" class="headerlink" title="1、什么是图床？"></a>1、什么是图床？</h3><p>图床就是存储图片的服务器，现在市面上有很多收费的不收费的图床。收费的如<a target="_blank" rel="noopener" href="https://www.qiniu.com/">七牛云</a>、<a target="_blank" rel="noopener" href="https://www.aliyun.com/">阿里云</a>等，免费的大都不稳定。而<strong>GitHub</strong>作为一个稳定的代码托管平台，那么理论上也可以利用他存储我们的图片，免费而且稳定，唯一的问题就是图片会被公开，所有人都可以看，但既然是要写博客本来就是给别人看的，而且也不会有人闲着看吧。</p>
<h3 id="2、什么是jsDeliver？为什么使用？"><a href="#2、什么是jsDeliver？为什么使用？" class="headerlink" title="2、什么是jsDeliver？为什么使用？"></a>2、什么是jsDeliver？为什么使用？</h3><p><a target="_blank" rel="noopener" href="https://www.jsdelivr.com/">jsDeliver</a>为开发者提供免费公共 CDN 加速服务（<a target="_blank" rel="noopener" href="https://baike.baidu.com/item/CDN/420951?fr=aladdin">什么是CDN</a>），他有个很好的特性就是不受墙的影响，因此可以用他链接国外的某些资源，同时恰好他提供了针对GitHub的服务，因此在网站或者博客中使用GitHub中的图片时使用jsDeliver可以提高加载速度。</p>
<h2 id="操作步骤"><a href="#操作步骤" class="headerlink" title="操作步骤"></a>操作步骤</h2><h3 id="1、新建GitHub仓库"><a href="#1、新建GitHub仓库" class="headerlink" title="1、新建GitHub仓库"></a>1、新建GitHub仓库</h3><p>注册/登录<a target="_blank" rel="noopener" href="https://github.com/">GitHub</a>，新建仓库。</p>
<p><img src="https://cdn.jsdelivr.net/gh/Max-cvv/imagehosting/img/image-20211128143545109.png" alt="image-20211128143545109"></p>
<p>设置仓库的名称等属性。</p>
<p><img src="https://cdn.jsdelivr.net/gh/Max-cvv/imagehosting/img/image-20211128143524433.png" alt="image-20211128143524433"></p>
<h3 id="2、生成token"><a href="#2、生成token" class="headerlink" title="2、生成token"></a>2、生成token</h3><p>生成token为PicGo提供访问权限，具体在设置中选择【Developer Settings】</p>
<p><img src="https://cdn.jsdelivr.net/gh/Max-cvv/imagehosting/img/image-20211128143516687.png" alt="image-20211128143516687"></p>
<p><img src="https://cdn.jsdelivr.net/gh/Max-cvv/imagehosting/img/image-20211128143502537.png" alt="image-20211128143502537"></p>
<p>选择【Personal access tokens】，设置属性，选中repo</p>
<p><img src="https://cdn.jsdelivr.net/gh/Max-cvv/imagehosting/img/image-20211128143453423.png" alt="image-20211128143453423"></p>
<p>将生成tokens复制备用</p>
<p><img src="https://cdn.jsdelivr.net/gh/Max-cvv/imagehosting/img/image-20211128143442750.png" alt="image-20211128143442750"></p>
<h3 id="3、配置PicGo"><a href="#3、配置PicGo" class="headerlink" title="3、配置PicGo"></a>3、配置PicGo</h3><p>下载<a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/picgo/releases">PicGo</a>，安装后进行配置。此时自定义域名要按图中配置，这样才能使用jsDeliver的CDN的服务-><a target="_blank" rel="noopener" href="https://cdn.jsdelivr.net/gh/+%E4%BB%93%E5%BA%93%E5%90%8D%EF%BC%8C%E5%85%B6%E4%B8%AD%E4%BB%93%E5%BA%93%E5%90%8D%E4%B8%BAGitHub%E7%94%A8%E6%88%B7%E5%90%8D/%E5%9B%BE%E5%BA%8A%E4%BB%93%E5%BA%93%E5%90%8D%E3%80%82">https://cdn.jsdelivr.net/gh/+仓库名，其中仓库名为GitHub用户名/图床仓库名。</a></p>
<p><img src="https://cdn.jsdelivr.net/gh/Max-cvv/imagehosting/img/image-20211128143429036.png" alt="image-20211128143429036"></p>
<h3 id="4、Typora-PicGO自动上传"><a href="#4、Typora-PicGO自动上传" class="headerlink" title="4、Typora+PicGO自动上传"></a>4、Typora+PicGO自动上传</h3><p>Typora是一款markdown编写软件，虽然更新之后开始收费了，但是可以用之前免费的版本。通过配置Typora可以实现当插入图片时利用PicGo将图片自动上传到Github仓库，首先打开Typora的偏好设置，具体设置如下图：</p>
<p><img src="https://cdn.jsdelivr.net/gh/Max-cvv/imagehosting/img/image-20211128143134550.png" alt="image-20211128143134550"></p>
<p>这样在当使用截图软件（qq截图或windows自带的shift+win+s）截图完成后，直接粘贴到Typora中，图片自动上传并且url自动换成图床的url。</p>
</div>
<footer class="article-footer">
<a data-url="http://example.com/2022/04/03/%E5%88%A9%E7%94%A8GitHub-jsDeliver-PicGo%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A/" data-id="cl1jbhpaz0000a4t7f1ejgn5w" data-title="利用GitHub+jsDeliver+PicGo搭建图床" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-test-my-site" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<div class="article-meta">
<a href="/2022/04/03/test-my-site/" class="article-date">
<time class="dt-published" datetime="2022-04-03T13:04:34.000Z" itemprop="datePublished">2022-04-03</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="p-name article-title" href="/2022/04/03/test-my-site/">test_my_site</a>
</h1>
</header>
<div class="e-content article-entry" itemprop="articleBody">
</div>
<footer class="article-footer">
<a data-url="http://example.com/2022/04/03/test-my-site/" data-id="cl1jb0dlk0001jct7f84l6jrb" data-title="test_my_site" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-hello-world" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<div class="article-meta">
<a href="/2022/04/03/hello-world/" class="article-date">
<time class="dt-published" datetime="2022-04-03T13:01:52.308Z" itemprop="datePublished">2022-04-03</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="p-name article-title" href="/2022/04/03/hello-world/">Hello World</a>
</h1>
</header>
<div class="e-content article-entry" itemprop="articleBody">
<p>Welcome to <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a target="_blank" rel="noopener" href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a target="_blank" rel="noopener" href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>
</div>
<footer class="article-footer">
<a data-url="http://example.com/2022/04/03/hello-world/" data-id="cl1jb0dld0000jct7csf5512p" data-title="Hello World" class="article-share-link">Share</a>
</footer>
</div>
</article>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">Archives</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/04/">April 2022</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Recent Posts</h3>
<div class="widget">
<ul>
<li>
<a href="/2022/04/03/%E5%88%A9%E7%94%A8GitHub-jsDeliver-PicGo%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A/">利用GitHub+jsDeliver+PicGo搭建图床</a>
</li>
<li>
<a href="/2022/04/03/test-my-site/">test_my_site</a>
</li>
<li>
<a href="/2022/04/03/hello-world/">Hello World</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2022 John Doe<br>
Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/fancybox/jquery.fancybox.min.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>