-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
376 lines (258 loc) · 17.7 KB
/
index.html
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
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hexo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en">
<meta name="twitter:card" content="summary">
<link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
</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://yoursite.com"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-搭建个人博客" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/10/20/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" class="article-date">
<time datetime="2019-10-20T02:20:44.000Z" itemprop="datePublished">2019-10-20</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/10/20/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/">搭建个人博客</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><hr>
<p> 一个不懂程序的程序猿，个人博客开张了。参考大佬们的搭建经验，此处也做出个人总结，作为开张的第一步。</p>
<p> 本博客采用的是Github Page + Hexo搭建的，通过Hexo生成个人博客的静态网页，然后托管至GitHub服务器，通过GitHub提供的访问域名便可以实现屌丝版的个人博客。下面，就跟着我一起开始屌丝版博客的搭建。</p>
<h3 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h3><hr>
<p> 基于Github Page + Hexo的个人博客搭建，所需的准备软件有两个：</p>
<ul>
<li>node环境</li>
</ul>
<p> Hexo是一款基于node.js驱动的博客框架，自然离不开node的支持。</p>
<ul>
<li><p>git环境</p>
<p> git是一个分布式版本控制系统，可以实现对我们博客版本的控制。此处，由于我们使用的是windows版本的git，推荐使用国内的源进行下载：<code>https://github.com/waylau/git-for-win</code></p>
</li>
<li><p>验证</p>
<p> 完成node和git的环境变量配置后</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">D:\Program Files\nodejs\</span><br><span class="line">D:\Program Files\Git\cmd</span><br></pre></td></tr></table></figure>
<p> 在命令行输入命令验证NodeJs和Git的安装是否成功：</p>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git version</span><br><span class="line">node -v</span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="安装Hexo"><a href="#安装Hexo" class="headerlink" title="安装Hexo"></a>安装Hexo</h3><hr>
<p>在完成准备软件的安装后，便可以使用npm进行Hexo的安装了，在命令行输入如下语句：</p>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>
<h3 id="构建博客"><a href="#构建博客" class="headerlink" title="构建博客"></a>构建博客</h3><p>完成Hexo的安装后，执行如下命令，构建博客文件夹：</p>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init myBlog</span><br></pre></td></tr></table></figure>
<h3 id="预览博客"><a href="#预览博客" class="headerlink" title="预览博客"></a>预览博客</h3><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">cd myBlog</span><br><span class="line">npm install <span class="comment">#首次初始化需要npm install安装hexo依赖</span></span><br><span class="line"></span><br><span class="line">hexo server <span class="comment">#启动本地服务</span></span><br></pre></td></tr></table></figure>
<p>服务启动成功后，访问<code>http://localhost:4000</code>就可预览博客首页。默认展示明文Hello World的文章，这个文章就存放在/source/_posts文件夹下，文件全称为Hello World.md。可以发现，Hexo是使用markdown语法写文章的。</p>
<p>至此，本地博客的创建就已大功告成。下面，我们一起将本地创建的博客托管至GitHub。</p>
<h3 id="部署至GitHub"><a href="#部署至GitHub" class="headerlink" title="部署至GitHub"></a>部署至GitHub</h3><p>在部署之前，需完成以下准备工作：</p>
<ol>
<li><p>GitHub账号的注册；</p>
<p> 创建账户；</p>
<p> 点击Start Project或者下面的new repository创建一个新的仓库；</p>
<p> <img src="http://ww1.sinaimg.cn/large/006bE6aYly1g84r886l5tj30l50ic3zn.jpg" alt="GitHub创建仓库.png"></p>
<p> 然后打开仓库新建一个index.html文件，随意写点内容，例如：Hello World</p>
<p> 然后打开<code>http://lpf-hub.github.io</code>，就可以看到站点index.html的页面内容。</p>
<p> <img src="http://ww1.sinaimg.cn/large/006bE6aYly1g84r8yeplgj30jy039mx5.jpg" alt="index-html页面.png"></p>
</li>
<li><p>本地配置GitHub账户</p>
<p> 要使用git工具，首先需要配置SSH key，为部署本地博客到GitHub做准备。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.name "用户名"</span><br><span class="line">git config --global user.email "邮箱地址"</span><br></pre></td></tr></table></figure>
</li>
<li><p>生成SSH key</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C "上面邮箱地址"</span><br></pre></td></tr></table></figure>
</li>
<li><p>在GitHub上添加生成的SSH key</p>
<p> <img src="http://ww1.sinaimg.cn/large/006bE6aYly1g84racmf1hj30sj0g23zj.jpg" alt="创建SSH_key.png"></p>
</li>
</ol>
<p>然后，需要将本地博客与GitHub关联起来：</p>
<ol>
<li><p>修改本地博客配置文件</p>
<p> 打开本地项目根目录下的_config.yml配置文件，添加如下内容：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line"><span class="attr"> type:</span> <span class="string">git</span></span><br><span class="line"><span class="attr"> repo:</span> <span class="attr">https://github.com/lpf-hub/lpf-hub.github.io</span></span><br><span class="line"><span class="attr"> branch:</span> <span class="string">master</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>安装部署插件</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>
</li>
<li><p>执行部署命令，将本地博客部署到GitHub上</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo generate</span><br><span class="line">hexo deploy</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="发布文件丢失问题"><a href="#发布文件丢失问题" class="headerlink" title="发布文件丢失问题"></a>发布文件丢失问题</h3><hr>
<p>问题描述：Hexo发布到GitHub丢失readme.md和CNAME的问题</p>
<p>解决方法：安装插件实现永久保留</p>
<ul>
<li><p>安装插件</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-cname --save</span><br></pre></td></tr></table></figure>
</li>
<li><p>添加配置</p>
<p> 在_config.yml中添加配置：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Plugins: </span><br><span class="line"> hexo-generator-cname</span><br></pre></td></tr></table></figure>
</li>
<li><p>空格个数</p>
<ul>
<li>: 后，一个空格</li>
<li>type, repo, branch前面是两个空格</li>
</ul>
</li>
</ul>
<h3 id="开始写作"><a href="#开始写作" class="headerlink" title="开始写作"></a>开始写作</h3><hr>
<ul>
<li><p>部署前，最好先执行<code>hexo clean</code>，清理缓存文件(db.json)和已生成的静态文件(public)。</p>
</li>
<li><p>生成草稿的方法：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo new draft "文章标题"</span><br><span class="line"><span class="meta">#</span><span class="bash">生成草稿后，可以在/<span class="built_in">source</span>/_drafts里看到草稿文件</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>发布草稿</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo publish [layout] <filename></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="静态图床"><a href="#静态图床" class="headerlink" title="静态图床"></a>静态图床</h3><hr>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2019/10/20/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" data-id="ck1yqwl24000124un1uwqfgrp" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-welcome" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/10/20/welcome/" class="article-date">
<time datetime="2019-10-20T02:14:26.000Z" itemprop="datePublished">2019-10-20</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/10/20/welcome/">welcome</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3>Welcome to my blog. </h3>
<h5>This is the welcome page for all people who came here.</h5>
<blockquote>
<p align="left">个人宣言：</p>
</blockquote>
<blockquote>
<p align="left">我是一个不懂程序的程序员！</p>
</blockquote>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2019/10/20/welcome/" data-id="ck1yqwl28000224un43cecp15" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/10/20/hello-world/" class="article-date">
<time datetime="2019-10-20T02:09:05.861Z" itemprop="datePublished">2019-10-20</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/10/20/hello-world/">Hello World</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">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 href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">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 href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">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 href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">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 href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2019/10/20/hello-world/" data-id="ck1yqwl1t000024un1zwh71oz" 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/2019/10/">October 2019</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Recent Posts</h3>
<div class="widget">
<ul>
<li>
<a href="/2019/10/20/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/">搭建个人博客</a>
</li>
<li>
<a href="/2019/10/20/welcome/">welcome</a>
</li>
<li>
<a href="/2019/10/20/hello-world/">Hello World</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2019 John Doe<br>
Powered by <a href="http://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="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>