@@ -10,7 +10,7 @@ Hexo是一个快速、简洁且高效的博客框架,它能够将[Markdown格
10
10
11
11
> 说明:** Markdown** 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,同时也对图片、图表、数学公式提供了支持,可以用来书写电子书、软件文档等,同时也可以非常方便的转换为HTML页面或者是PDF文档。
12
12
13
- 要使用Hexo,首先得确保计算机上已经安装了[ node.js] ( < https://nodejs.org/en/ > ) 环境和[ git] ( < https://git-scm.com/ > ) 环境,前者是一个能够在服务器端运行JavaScript代码的环境,后者是版本控制工具。如果没有安装node.js和git的经验,建议参考官方文档上的讲解 ,安装完成后,我们可以通过下面的命令来确认node.js环境以及它的包管理工具是否安装成功。
13
+ 要使用Hexo,首先得确保计算机上已经安装了[ node.js] ( < https://nodejs.org/en/ > ) 环境和[ git] ( < https://git-scm.com/ > ) 环境,前者是一个能够在服务器端运行JavaScript代码的环境,后者是版本控制工具。如果没有安装node.js和git的经验,建议参考官方文档上的讲解或者是我写的 [ 《Git上手指南》 ] ( ./Git上手指南.md ) ,安装完成后,我们可以通过下面的命令来确认node.js环境以及它的包管理工具是否安装成功。
14
14
15
15
``` Shell
16
16
node --version
@@ -35,4 +35,322 @@ npm config set registry https://registry.npm.taobao.org
35
35
npm install -g hexo-cli
36
36
```
37
37
38
- 安装成功后,就可以使用Hexo来创建一个博客文件夹。
38
+ 安装成功后,就可以使用Hexo来创建属于自己的博客啦。
39
+
40
+ ### 搭建博客
41
+
42
+ > 说明:以下内容基本上来自于Hexo的官方文档,推荐大家阅读官方文档。
43
+
44
+ 我们先通过下面的命令来创建一个专门保存博客项目的文件夹,该命令会从github上克隆博客项目和默认的主题。
45
+
46
+ ``` Shell
47
+ hexo init blog
48
+ ```
49
+
50
+ 接下来我们进入这个文件夹并查看目录结构。
51
+
52
+ ``` Shell
53
+ cd blog
54
+ ls -lR
55
+ ```
56
+
57
+ ```
58
+ total 232
59
+ -rw-r--r-- 1 Hao staff 1768 8 8 01:15 _config.yml
60
+ drwxr-xr-x 274 Hao staff 8768 8 8 01:19 node_modules
61
+ -rw-r--r-- 1 Hao staff 109972 8 8 01:19 package-lock.json
62
+ -rw-r--r-- 1 Hao staff 443 8 8 01:15 package.json
63
+ drwxr-xr-x 5 Hao staff 160 8 8 01:15 scaffolds
64
+ drwxr-xr-x 3 Hao staff 96 8 8 01:15 source
65
+ drwxr-xr-x 3 Hao staff 96 8 8 01:15 themes
66
+ ```
67
+
68
+ > 说明:Windows环境命令行提示符中可以使用dir命令查看目录结构。需要说明的是:` _config.yml ` 是博客项目的配置文件;` package.json ` 是项目的依赖项文件;` scaffolds ` 保存了Markdown文件的模板,也就是向新添加的Markdown文件中默认填充的内容;` source ` 目录下有一个名为` _post ` 的目录,我们稍后可以将编写好的Markdown文件放到该目录,这样就可以利用Hexo将Markdown文件处理成博客的静态页面,生成的静态页面将置于` public ` 目录下;` themes ` 文件夹保存了博客使用的主题。
69
+
70
+ 然后我们通过下面的命令来安装项目所需的依赖项(` package.json ` 文件指明了这些依赖项)。
71
+
72
+ ``` Shell
73
+ npm install
74
+ ```
75
+
76
+ 做完上述的操作以后,我们已经可以直接通过下面的命令来生成博客。
77
+
78
+ ``` Shell
79
+ hexo generate
80
+ ```
81
+
82
+ 该命令也可以缩写为:
83
+
84
+ ``` Shell
85
+ hexo g
86
+ ```
87
+
88
+ 之前我们在安装依赖项的时候包括了一个名为` hexo-server ` 的依赖项,该依赖项可以帮助我们启动一个基于node.js的服务器来运行我们的博客项目,使用下面的命令即可启动服务器。
89
+
90
+ ``` Shell
91
+ hexo server
92
+ ```
93
+
94
+ 该命令也可以缩写为:
95
+
96
+ ``` Shell
97
+ hexo s
98
+ ```
99
+
100
+ ```
101
+ INFO Start processing
102
+ INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
103
+ ```
104
+
105
+ 从运行命令的提示信息可以看到,服务器已经运转起并使用了4000端口,可以通过` Ctrl+C ` 来终止服务器的运行。如果要修改服务器使用的端口,可以在启动服务器的时候加上` -p ` 参数;如果希望服务器启动后,自动打开默认的浏览器访问服务器,可以使用` -o ` 参数,如下所示。
106
+
107
+ ``` Shell
108
+ hexo s -p 8000 -o
109
+ ```
110
+
111
+ 至此,我们已经可以看到Hexo在没有配置也没有加入自己的Markdown文件下生成的首页,如下图所示。
112
+
113
+ ![ ] ( ./res/hexo-default-index.png )
114
+
115
+ 接下来我们修改博客的配置文件。
116
+
117
+ ``` Shell
118
+ vim _config.yml
119
+ ```
120
+
121
+ ``` YAML
122
+ # Hexo Configuration
123
+ # # Docs: https://hexo.io/docs/configuration.html
124
+ # # Source: https://github.com/hexojs/hexo/
125
+
126
+ # Site
127
+ title : 骆昊的技术专栏
128
+ subtitle : 传道、授业、解惑,分享知识带来的快乐
129
+ description :
130
+ keywords :
131
+ author : 骆昊
132
+ language : zh
133
+ timezone :
134
+
135
+ # URL
136
+ # # If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
137
+ url : http://jackfrued.top
138
+ root : /
139
+ permalink : :year/:month/:day/:title/
140
+ permalink_defaults :
141
+
142
+ # Directory
143
+ source_dir : source
144
+ public_dir : public
145
+ tag_dir : tags
146
+ archive_dir : archives
147
+ category_dir : categories
148
+ code_dir : downloads/code
149
+ i18n_dir : :lang
150
+ skip_render :
151
+
152
+ # Writing
153
+ new_post_name : :title.md # File name of new posts
154
+ default_layout : post
155
+ titlecase : false # Transform title into titlecase
156
+ external_link : true # Open external links in new tab
157
+ filename_case : 0
158
+ render_drafts : false
159
+ post_asset_folder : false
160
+ relative_link : false
161
+ future : true
162
+ highlight :
163
+ enable : true
164
+ line_number : true
165
+ auto_detect : false
166
+ tab_replace :
167
+
168
+ # Home page setting
169
+ # path: Root path for your blogs index page. (default = '')
170
+ # per_page: Posts displayed per page. (0 = disable pagination)
171
+ # order_by: Posts order. (Order by date descending by default)
172
+ index_generator :
173
+ path : ' '
174
+ per_page : 10
175
+ order_by : -date
176
+
177
+ # Category & Tag
178
+ default_category : uncategorized
179
+ category_map :
180
+ tag_map :
181
+
182
+ # Date / Time format
183
+ # # Hexo uses Moment.js to parse and display date
184
+ # # You can customize the date format as defined in
185
+ # # http://momentjs.com/docs/#/displaying/format/
186
+ date_format : YYYY-MM-DD
187
+ time_format : HH:mm:ss
188
+
189
+ # Pagination
190
+ # # Set per_page to 0 to disable pagination
191
+ per_page : 10
192
+ pagination_dir : page
193
+
194
+ # Extensions
195
+ # # Plugins: https://hexo.io/plugins/
196
+ # # Themes: https://hexo.io/themes/
197
+ theme : landscape
198
+
199
+ # Deployment
200
+ # # Docs: https://hexo.io/docs/deployment.html
201
+ deploy :
202
+ type :
203
+ ` ` `
204
+
205
+ 下面是YAML文件中相关选项的说明。
206
+
207
+ | 参数 | 描述 |
208
+ | ------------------ | ------------------------------------------------------------ |
209
+ | ` title` | 网站的标题 |
210
+ | `subtitle` | 网站的副标题 |
211
+ | `description` | 网站的描述 |
212
+ | `keywords` | 网站的关键词,可以用逗号分隔多个关键词 |
213
+ | `author` | 自己的名字 |
214
+ | `language` | 网站使用的语言 |
215
+ | `timezone` | 网站使用时区,默认使用电脑上设置的时区 |
216
+ | `url` | 网址 |
217
+ | `root` | 网站根目录 |
218
+ | `source_dir` | 资源文件夹,这个文件夹用来存放内容,默认source目录 |
219
+ | `public_dir` | 公共文件夹,这个文件夹用于存放生成的站点文件,默认public目录 |
220
+ | `tag_dir` | 标签文件夹,默认tags目录 |
221
+ | `archive_dir` | 归档文件夹,默认archives目录 |
222
+ | `category_dir` | 分类文件夹,默认categories目录 |
223
+ | `auto_spacing` | 在中文和英文之间加入空格,默认false |
224
+ | `titlecase` | 把标题转换为首字母大写,默认false |
225
+ | `external_link` | 在新标签中打开链接,默认true |
226
+ | `relative_link` | 把链接改为与根目录的相对位址,默认false |
227
+ | `default_category` | 默认分类 |
228
+ | `date_format` | 日期格式,默认YYYY-MM-DD |
229
+ | `time_format` | 时间格式,默认HH:mm:ss |
230
+ | `per_page` | 每页显示的文章数量 ,默认值10,0表示不使用分页 |
231
+ | `pagination_dir` | 分页目录,默认为page目录 |
232
+ | `theme` | 当前主题名称 |
233
+ | `deploy` | 部署部分的设置 |
234
+
235
+ 我们将编写好的Markdown文件可以拷贝到`source/_posts`目录,我们可以在每个Markdown文件的上方添加Front-matter来对文件的布局、标题、分类、标签、发布日期等信息加以说明。所谓Front-matter,就是每个Markdown文件最上方以`---`分隔的区域,可以在Front-matter中设置以下内容。
236
+
237
+ | 参数 | 描述 | 默认值 |
238
+ | ------------ | -------------------- | ------------ |
239
+ | `layout` | 布局 | |
240
+ | `title` | 标题 | |
241
+ | `date` | 建立日期 | 文件建立日期 |
242
+ | `updated` | 更新日期 | 文件更新日期 |
243
+ | `comments` | 开启文章的评论功能 | true |
244
+ | `tags` | 标签(不适用于分页) | |
245
+ | `categories` | 分类(不适用于分页) | |
246
+ | `permalink` | 覆盖文章网址 | |
247
+
248
+ 例如:
249
+
250
+ ` ` ` Markdown
251
+ ---
252
+ title: Python编程惯例
253
+ category: Python基础
254
+ date: 2019-8-1
255
+ ---
256
+ ## Python惯例
257
+
258
+ “惯例”这个词指的是“习惯的做法,常规的办法,一贯的做法”,与这个词对应的英文单词叫“idiom”。由于Python跟其他很多编程语言在语法和使用上还是有比较显著的差别,因此作为一个Python开发者如果不能掌握这些惯例,就无法写出“Pythonic”的代码。下面我们总结了一些在Python开发中的惯用的代码。
259
+
260
+ 1. 让代码既可以被导入又可以被执行。
261
+
262
+ ` ` ` Python
263
+ if __name__ == '__main__' :
264
+ ` ` `
265
+
266
+
267
+ 2. 用下面的方式判断逻辑“真”或“假”。
268
+
269
+ ` ` ` Python
270
+ if x :
271
+ if not x :
272
+ ` ` `
273
+ ` ` `
274
+
275
+ 在完成上述工作后,我们可以通过下面的命令先清理之前生成的内容。
276
+
277
+ ` ` ` Shell
278
+ hexo clean
279
+ ` ` `
280
+
281
+ 接下来我们就可以用之前讲过的命令重新生成并运行博客项目。
282
+
283
+ ` ` ` Shell
284
+ hexo generate
285
+ hexo server -p 8000 -o
286
+ ` ` `
287
+
288
+ # ## 将博客托管到GitHub
289
+
290
+ 我们可以利用GitHub网站提供的[Pages服务](<https://pages.github.com/>)来托管我们的博客。在GitHub Pages的首页上就有一个教程指导我们如何托管自己的网站,当然第一步得在GitHub上注册一个属于自己的账号,登录成功之后才能进行后续的操作。
291
+
292
+ 1. 根据自己的用户名创建一个仓库,仓库**一定**要取名为“用户名.github.io”。例如:我在GitHub上的用户名是jackfrued,那么我的托管博客项目的仓库一定要命名为jackfrued.github.io。
293
+
294
+ 
295
+
296
+ 2. 修改博客项目的配置文件`_config.yml`,配置使用GitHub来部署该博客项目。
297
+
298
+ ` ` ` Shell
299
+ vim _config.yml
300
+ ` ` `
301
+
302
+ ` ` ` YAML
303
+ # 省略上面的内容
304
+ # Deployment
305
+ ## Docs: https://hexo.io/docs/deployment.html
306
+ deploy:
307
+ type: git
308
+ repo: https://github.com/jackfrued/jackfrued.github.io.git
309
+ branch: master
310
+ ` ` `
311
+
312
+ 上面的配置中,type指定了使用git进行项目部署,repo指定了部署项目的git仓库的URL,我们这里使用的是HTTPS的地址,如果之前配置过密钥对也可以使用SSH的地址,branch指定了将代码同步到仓库中的哪一个分支,通常master分支就是发布项目最终工作成果的分支,也称为项目的主分支。
313
+
314
+ 3. 安装名为`hexo-deployer-git`的部署器插件,通过该插件就能实现一键部署。
315
+
316
+ ` ` ` Shell
317
+ npm install hexo-deployer-git --save
318
+ ` ` `
319
+
320
+ 4. 可以使用下面的命令来实现一键部署到GitHub。
321
+
322
+ ` ` ` Shell
323
+ hexo deploy -g
324
+ ` ` `
325
+
326
+ 或者
327
+
328
+ ` ` ` Shell
329
+ hexo generate -d
330
+ ` ` `
331
+
332
+ 5. 接下来在浏览器中输入[jackfrued.github.io](https://jackfrued.github.io)就能够看到自己的博客,现在全世界的人都可以通过这个URL来访问你的博客。大家是否注意到,访问你博客的这个URL就是刚才我们给仓库起的名字,因为你在GitHub上注册的用户名是独一无二的,所以这个域名也是全世界独一无二的。
333
+
334
+ # ## 将博客绑定到自己的域名
335
+
336
+ 虽然我们已经通过GitHub提供的域名访问到了自己的博客,但是如果我们不愿意“寄人篱下”,我们在利用GitHub Pages提供的托管服务同时,也可以将博客绑定到自己专属的域名。如果暂时还没有购买域名,我们可以在提供域名购买服务的网站(如:[万网](<https://www.hichina.com/>)、[GoDaddy](<https://www.godaddy.com/>))上进行购买。
337
+
338
+ 
339
+
340
+ > 说明:目前国内对域名的管理日趋严格,在购买域名时需要填写一大堆的个人信息,进行实名认证后才能获得域名,这一点相信大家能够理解。
341
+
342
+ 比如说,我现在已经购买了一个名为“jackfrued.top”的域名,如何让它跟“jackfrued.github.io”这个域名做一个绑定呢,我们可以利用[阿里云控制台](<https://dns.console.aliyun.com/>)或者[DNSPod](<https://www.dnspod.cn/>)来做一个域名解析服务。在域名解析平台登录成功后,可以添加或选择自己的域名来配置域名解析。点击“添加记录”按钮,创建一个类型为CNAME的域名解析,CNAME类型的解析代表将一个域名解析到另一个域名,如下图所示。
343
+
344
+ 
345
+
346
+ 完成这一步后,还不能马上通过自己的域名访问到博客项目,最后需要在博客项目的`source`目录下添加一个名为CNAME的文件(注意大小写哟),其内容如下所示。
347
+
348
+ ` ` ` Shell
349
+ vim CNAME
350
+ ` ` `
351
+
352
+ ```
353
+ jackfrued.top
354
+ ```
355
+
356
+ 可以清理一下之前生成的内容,然后将项目重新生成并发布到GitHub,就大功告成了!希望大家在拥有自己的博客后可以利用它做些有意义的事情,加油吧!
0 commit comments