-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
301 lines (195 loc) · 14.1 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
<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.8.0">
<meta charset="utf-8">
<title>梦缘清斋</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="梦缘清斋">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="梦缘清斋">
<meta property="og:locale" content="zh-cn">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="梦缘清斋">
<link rel="alternate" href="/atom.xml" title="梦缘清斋" 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>
</html>
<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">梦缘清斋</a>
</h1>
<h2 id="subtitle-wrap">
<a href="/" id="subtitle">醉里秋波，梦中朝雨.</a>
</h2>
</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="/">主页</a>
<a class="main-nav-link" href="/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-Hexo基础教程" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/05/28/Hexo基础教程/" class="article-date">
<time datetime="2019-05-28T14:23:24.566Z" itemprop="datePublished">2019-05-28</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/05/28/Hexo基础教程/">Hexo基础教程（一）</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>Blog这种记录生活的载体如今看来好像已经过时了，如今人们更喜欢适宜快节奏，碎片化生活方便快捷MiniBlog或更新颖，表现形式更多样的Vlog来传递与记录生活。当然仍有一些人仍然坚持着写Blog。市面上Blog平台有很多，各有各的优点，但也存在着:收费，广告，可定制化程度不高等问题。那么我们可不可以自己搭建Blog网站呢？</p>
<p>说到搭建网站，大多数人可能觉得这是一件很专业的事情。即使是一名专业人士，可以自己编写网站程序，自己搭建站点。也可能会因为建站耗时颇多同时还需要购买域名和服务器等原因而放弃这个想法。所以今天要给诸位介绍一个比较简单便捷，易上手，以维护低成本的建站方案——使用Hexo博客框架搭建站点并部署到免费代码托管平台上。</p>
<h1 id="Hexo简介"><a href="#Hexo简介" class="headerlink" title="Hexo简介"></a>Hexo简介</h1><p>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。它基于Node.js技术，易于安装使用。可以很方便的生成静态网页托管在代码托管平台上。同时Hexo的主题也非常丰富，对多种语言支持的都非常好。</p>
<p><img src="../img/hexo/home.png" alt="Home"></p>
<h1 id="Hexo安装"><a href="#Hexo安装" class="headerlink" title="Hexo安装"></a>Hexo安装</h1><h2 id="第一步安装Node-js"><a href="#第一步安装Node-js" class="headerlink" title="第一步安装Node.js"></a>第一步安装Node.js</h2><p>Hexo是基于node.js编写的，所以需要安装node.js运行时与node的包管理工具npm。下面仅针对windows平台进行说明。Mac OS 与Linux用户可以查看官网相关文档进行安装。</p>
<p>打开node.js官方网站：<a href="https://nodejs.org/zh-cn/" target="_blank" rel="noopener">https://nodejs.org/zh-cn/</a> 点击首页长期支持版进行下载安装。</p>
<p><img src="../img/hexo/node.jsHome.png" alt="node.jsHome"></p>
<p>下载完成后，双击安装，一直下一步到完成即可。这里需要注意的是安装完成后需要重启。检验是否安装成功只需要重启后在cmd 或者powershell等命令行工具中使用node -v 及 npm -v 命令，如果可以正确查看到相应的版本号即表示安装成功。</p>
<h2 id="第二步安装Git"><a href="#第二步安装Git" class="headerlink" title="第二步安装Git"></a>第二步安装Git</h2><p>因为我们需要借助代码托管平台来部署代码。所以需要下载安装Git。同样下面仅对Windows平台下的安装进行说明。</p>
<p>打开git 官网：<a href="https://git-scm.com/" target="_blank" rel="noopener">https://git-scm.com/</a> 点击页面右侧显示器内Download 2.21.0 for Windows (这里2.21.0是当前的git版本)进行下载。</p>
<p><img src="../img/hexo/gitHome.png" alt="GitHome"></p>
<p>下载完成后，双击安装，一直下一步到完成即可。同样使用 git –version 命令能够正确查看到相应的版本号即表示安装成功</p>
<h2 id="第三步安装Hexo"><a href="#第三步安装Hexo" class="headerlink" title="第三步安装Hexo"></a>第三步安装Hexo</h2><p>准备前面两步安装Hexo 就十分简单了。只需要执行 npm install -g hexo-cli 命令即可实现安装。这里同样可以通过查看版本号的方式Hexo -v 来检查是否安装成功。</p>
<p><img src="../img/hexo/hexoVersion.png" alt="hexoVersion"></p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2019/05/28/Hexo基础教程/" data-id="cjw7z8cj70001ncuukmqyw71r" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-VSCode——宇宙第一编辑器" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/05/28/VSCode——宇宙第一编辑器/" class="article-date">
<time datetime="2019-05-28T13:58:07.151Z" itemprop="datePublished">2019-05-28</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/05/28/VSCode——宇宙第一编辑器/">VSCode——宇宙第一编辑器</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>第一次活动以外，原创投稿。想投稿很久了，但是一直没想好写些什么。加入众测大半年，看各路大神们评测各种软件，硬件产品。今天下班早，就献丑简单介绍一下，我每天使用频率的一款应用软件——Visual Studio Code。</p>
<h1 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h1><p>Visual Studio Code是一个轻量级但功能强大的源代码编辑器，可在桌面上运行，适用于Windows，macOS和Linux。它内置了对JavaScript，TypeScript和Node.js的支持，并具有丰富的其他语言（如C ++，C＃，Java，Python，PHP，Go）和运行时（如.NET和Unity）的扩展生态系统。它具有很多优点如：</p>
<ol>
<li>免费并且开源的</li>
<li>占用内存低</li>
<li>AI智能补全代码</li>
<li>加载大型工程文件迅速</li>
<li>完美支持git等版本控制工具</li>
<li>插件扩展丰富</li>
</ol>
<p>当然Visual Studio Code不仅仅可以在软件开发专业领域使用，它的功能特别强大。比如本篇文章就是在Visual Studio Code 使用markdown语法编辑。（Markdown是一种纯文本格式的标记语言。通过简单的标记语法，可以让作者快速编辑文档，摆脱对排版的困扰。篇幅有限，不在此过多介绍。）推荐其他朋友也使用markdown进行文字工作，真的方便快捷。<del>这里也希望众测的投稿富文本编辑器能够支持markdown语法。</del><br><img src="/../img/vscode/markdown.jpg" alt="vscode编辑markdown文件"></p>
<center>vscode编辑markdown文件</center>
<h1 id="下载安装"><a href="#下载安装" class="headerlink" title="下载安装"></a>下载安装</h1><p>打开 <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">visual studio code 官网：</a><a href="https://code.visualstudio.com/" target="_blank" rel="noopener">https://code.visualstudio.com/</a> 选择对应自己系统的版本下载。<br><img src="/../img/vscode/down.jpg" alt="首页下载"></p>
<center>下载页面</center><br>安装这里没有那么繁琐是傻瓜式安装，软件安装文件具有安装引导。点击执行后，一直下一步就好。我本机上已经安装过了，就不再重复演示一遍了。如果安装过程有朋友有疑问的，可以在文章下方留言我会提供指导。<br><br># 界面简介<br><img src="/../img/vscode/简介.jpg" alt="界面简介"><br><center>界面简介</center>
<h1 id="设置中文界面"><a href="#设置中文界面" class="headerlink" title="设置中文界面"></a>设置中文界面</h1><p>Visual Studio Code支持多语言显示，但默认显示是英文。可以打开扩展管理数据Chinese下载中文语言包。然后按一下步骤修改配置文件来更改语言设置：</p>
<ol>
<li>打开vscode工具；</li>
<li>使用快捷键组合【Ctrl+Shift+p】，在搜索框中输入“configure display language”，点击确定后;</li>
<li>修改locale.json文件下的属性“locale”为“zh-CN”;</li>
<li>重启vscode工具；</li>
</ol>
<p><img src="/../img/vscode/中文包.jpg" alt="中文包"></p>
<center>中文包</center>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2019/05/28/VSCode——宇宙第一编辑器/" data-id="cjw7z8cis0000ncuuz6t0ra2c" 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/05/27/hello-world/" class="article-date">
<time datetime="2019-05-27T13:29:18.338Z" itemprop="datePublished">2019-05-27</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/05/27/hello-world/">Hello World</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>欢迎来到我使用Hexo搭建，部署在GitHub上的第一篇Blog，国际惯例“Hello World”致敬。目前站点部署在GitHub，如果你们访问卡顿的话，欢迎给我反馈。我会将把它迁移到Gitee。</p>
<p><img src="/../img/hello-world/Smile.jpg" alt="Smile"></p>
<p>之前也有听说过Hexo,但今晚是第一正式接触Hexo。Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。目前我对他的印象比WordPress这种CMS建站系统要好上许多。主要有两个原因：1.Hexo更容易上手，只需要简单的配置及掌握Markdown语法即可完成站点的搭建和内容的编写。2.相对于PHP，我更熟悉Node。(这也是我没有使用Hugo的原因，即便Hugo是基于Go开发的效率更高一些)。Hexo的缺点也很明显，生成站点的速度相比较Hugo的速度的确要慢上许多。目前这个速度还是可以接受的，不知道当文件多了之后是什么情况。</p>
<p>后续我如果有空还会继续研究一下它。当我觉得我足够熟练的使用它时，可能会给大家出一期教程。</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2019/05/27/hello-world/" data-id="cjw7z8cj70002ncuud7itj3k9" 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/05/">五月 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/05/28/Hexo基础教程/">Hexo基础教程（一）</a>
</li>
<li>
<a href="/2019/05/28/VSCode——宇宙第一编辑器/">VSCode——宇宙第一编辑器</a>
</li>
<li>
<a href="/2019/05/27/hello-world/">Hello World</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2019 初晗<br>
Powered by <a href="#" target="_blank">初晗</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">主页</a>
<a href="/archives" class="mobile-nav-link">关于我</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>