Skip to content

Commit 49bdd30

Browse files
committed
更新了使用Hexo搭建自己的博客.md
1 parent 77e6805 commit 49bdd30

7 files changed

+330
-2
lines changed

Git上手指南.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
## Git上手指南
2+
3+
(敬请期待……)
4+

res/create-new-repo.png

253 KB
Loading

res/dns-configuration.png

72.4 KB
Loading

res/hexo-default-index.png

1010 KB
Loading

res/wanwang.png

412 KB
Loading

使用Hexo搭建自己的博客.md

Lines changed: 320 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Hexo是一个快速、简洁且高效的博客框架,它能够将[Markdown格
1010

1111
> 说明:**Markdown**是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,同时也对图片、图表、数学公式提供了支持,可以用来书写电子书、软件文档等,同时也可以非常方便的转换为HTML页面或者是PDF文档。
1212
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环境以及它的包管理工具是否安装成功。
1414

1515
```Shell
1616
node --version
@@ -35,4 +35,322 @@ npm config set registry https://registry.npm.taobao.org
3535
npm install -g hexo-cli
3636
```
3737

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+
![](./res/create-new-repo.png)
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+
![](./res/wanwang.png)
339+
340+
> 说明:目前国内对域名的管理日趋严格,在购买域名时需要填写一大堆的个人信息,进行实名认证后才能获得域名,这一点相信大家能够理解。
341+
342+
比如说,我现在已经购买了一个名为“jackfrued.top”的域名,如何让它跟“jackfrued.github.io”这个域名做一个绑定呢,我们可以利用[阿里云控制台](<https://dns.console.aliyun.com/>)或者[DNSPod](<https://www.dnspod.cn/>)来做一个域名解析服务。在域名解析平台登录成功后,可以添加或选择自己的域名来配置域名解析。点击“添加记录”按钮,创建一个类型为CNAME的域名解析,CNAME类型的解析代表将一个域名解析到另一个域名,如下图所示。
343+
344+
![](./res/dns-configuration.png)
345+
346+
完成这一步后,还不能马上通过自己的域名访问到博客项目,最后需要在博客项目的`source`目录下添加一个名为CNAME的文件(注意大小写哟),其内容如下所示。
347+
348+
```Shell
349+
vim CNAME
350+
```
351+
352+
```
353+
jackfrued.top
354+
```
355+
356+
可以清理一下之前生成的内容,然后将项目重新生成并发布到GitHub,就大功告成了!希望大家在拥有自己的博客后可以利用它做些有意义的事情,加油吧!

更新日志.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
## 更新日志
22

3+
### 2019年8月8日
4+
5+
1. 最近公司给安排了很多任务,所以好久都没有更新这个项目,今天终于把一直计划更新的《关系型数据库MySQL》更新完了。
6+
2. 那天微信收款提示我已经连续有48收到了打赏,非常感谢大家持续的支持。
7+
3. 最近一直在计划为这个项目录制一个配套的视频,当然这个工作量的巨大是可想而知的,但是我还是决定要在年底之前开始做这件事情,这样才能不辜负那么多希望通过这个项目学习和了解Python的人。
8+
39
### 2019年7月11日
410

511
1. 今天终于结束了出差的日子,回来先把最近收到的打赏全部捐赠给了绿之叶,总共捐出了111笔打赏。

0 commit comments

Comments
 (0)