手把手教你使用hexo搭建属于你的个人博客

front-pic-1

前言

每当看到别人精美的个人博客时,不知你是否有一点点的羡慕。别急,现在我就来手把手教你搭建自己的个人博客。

在技术日趋成熟的今天,有着很多种快速生成博客的框架:Hexo,Jekyll,Wordpress等等。今天我们就用Hexo来带着大家完成自己的博客


什么是Hexo?

Hexo官网中说是这么描述的:A fast, simple & powerful blog framework,即:一个快速、简单且强大的博客快速生产工具。它的简单体现在你完全有可能在30分钟内就生成属于你的个人博客。而它的强大体现在你对细节的调整上完全有可能花上一天的时间。

一、巧妇难为无米之炊:准备搭建环境

1.安装node.js

Node.js 的实质是一个JavaScript运行环境,这里我们主要使用它来生成我们博客的静态页面。从官网下载最新的安装包进行默认安装就好。安装过程略。

2.安装git环境

git是最流行的分布式版本控制系统,我们使用它主要是与github进行交互。安装git使用默认选项安装即可,安装过程略。如果你还对git不是特别熟悉,推荐一个学习git的教程:传送门

3.注册github

github就不用说了吧,它是一个面向开源及私有软件项目的托管平台。几乎所有的程序员都听说过它的大名。就正常注册一个账号就好了。

注册号以后首先给我们的账号添加本机的SSH,具体方法及原因在这篇文章已经有了详细说明,并且方法也很简单

二、上正菜:开始搭建博客

环境都准备好后,我们就可以开始安装博客了:

1.创建文件夹

在本地新建一个文件夹用于存放我们的博客,并且右键菜单选择Git Bash Here,然后在Git Bash里输入:

1
2

npm install hexo

然后回车,如图:

buildHexo_1

我在执行这个的时候出现了下图的警告,但是并不影响我们的安装,不用理会它。

buildHexo_5

如果没有输出err之类的错误并且目录下多了一个node_modules文件夹,那这步就算成功了

buildHexo_6

2.执行hexo命令

依次执行以下3个命令:

1
2
3
4
5
6
7
8

hexo init --初始化hexo环境,这时会在目录下自动生成hexo的文件

npm install --安装npm依赖包

hexo generate --生成静态页面

hexo server --生成本地服务

好了,这时候我们打开浏览器输入http://localhost:4000看看可不可以访问。如果默认的hexo博客出现,那么恭喜你,你已经搭建好了自己的博客,接下来我们就要将它发布到网上。

buildHexo_11

3.可能遇到的报错:

  • 日志报错

这个报错一般是由于在命令执行中用户使用Ctrl+C强制中断了命令的执行,导致log中记录已经执行,但实际没有执行完成。解决办法:删除图中路径下的.log文件

buildHexo_7

  • 在非空文件夹下执行hexo init命令

hexo init这个命令是自动生成hexo目录时使用的命令,使用他有一个前提是必须是空文件夹,如果出现了这个错误,把所有文件删除就行。如果还是报错,别着急,看看是不是有隐藏文件没有删除。

buildHexo_8

  • hexo命令未找到

有的同学可能会出现在执行hexo命令时出现conmand not found的提示,这是由于hexo没有配到环境变量中,只需要手动配置一下就好了,这里演示一下win7的配置方式,其他系统也差不多,自行百度就好:

1.找到并进入根目录下node_modules文件夹,这时我们发现里面有很多文件夹,找到hexo文件夹,这里我们可以看到一个bin文件夹,进到bin目录下,复制当前路径:

buildHexo_9

2.右键我的电脑–>高级系统设置–>高级–>环境变量。在系统变量那栏找到Path并双击这行,在弹出的编辑系统变量这栏的变量值的最后先输入一个分号表示与前一个变量隔开,然后再把刚才复制的hexo路径添加到分号后面。

buildHexo_10

三、万事具备,只欠东风:将本地博客发布到网络上

这时候就要用到了我们的github:

1.创建远程仓库

新建一个跟自己账号名字一样的空仓库,如图:

buildHexo_2

buildHexo_3

2.连接本地与远程github仓库

打开本地博客的文件夹,打开_config.yml进行编辑

buildHexo_4

翻到文件最下方,将deploy的选项改成以下的形式,并将yournmae修改为你自己的名称:

1
2
3
4
5
6
7
8

deploy:

type: git

repo: git@github.com:yourname/yourname.github.io.git

branch: master

然后在GitBash中执行

1
2

npm install hexo-deployer-git --save

这时候,我们再最后执行一句

1
2

hexo deploy

就可以在浏览器中访问http://yourname.github.io/来进入你的博客啦

大功告成!!

四、一鼓作气:详细了解Hexo

博客已经可以访问了,但我相信大家对Hexo还是一头雾水,现在我们来深入学习一下Hexo:

1.Hexo的基本命令

1
2
3
4
5
6
7
8

hexo generate --生成个人博客所需的静态页面

hexo server --本地预览

hexo deploy --部署我们的个人博客

hexo clean --清除缓存

这几个命令都能用首字母缩写完成

1
2
3
4
5
6

hexo g --generate

hexo s --server

hexo d --deploy

2.写文章的需要用到下面的命令

1
2
3
4

hexo new "postName" --新建文章

hexo new page "pageName" --新建页面

编辑我们的博客的时候可以使用

1
2

hexo s --debug

然后访问http://localhost:4000/来进入调试模式,更改了配置或文章后随时刷新页面来查看效果。

Hexo的文章支持的是MarkDown语法。网上有很多资料,这里提供一个传送门

3.我们每次部署的步骤是

1
2
3
4
5
6

hexo clean

hexo generate

hexo deploy

后两步可以简写为hexo g -d,另外我们也可以使用hexo help来查看hexo命令帮助

4.目录结构说明

hexo init 出来的文件各自的作用如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

`-----------

| +-- .deploy #hexo deploy生成的文件

| +-- node_modules #npm组件

| +-- public #生成的静态网页文件

| +--scaffolds #模板

| +-- source #博客正文和其他源文件

| | +-- _posts #我们自己写的文章以md结尾

| +-- themes #主题

| +-- _config.yml #全局配置文件

| `-- package.json #定义了hexo所需要的各种模块

5.配置文件

搭建好博客后,我们的各种细节配置基本都是在配置文件中完成的,Hexo中的配置文件一共分2中,在文件夹跟目录下的_config.yml叫做站点配置文件,同样的文件名我们可以在theme文件夹下的主题文件夹里面也找的。而主题文件夹下的_config.yml叫做主题配置文件。这里说明一下站点配置文件:

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

# Hexo Configuration

## Docs: http://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/

# Site #站点信息

title: #标题

subtitle: #副标题

description: #站点描述,给搜索引擎看的

author: #作者

email: #电子邮箱

language: zh-CN #语言

# URL #链接格式

url: #网址

root: / #根目录

permalink: :year/:month/:day/:title/ #文章的链接格式

tag_dir: tags #标签目录

archive_dir: archives #存档目录

category_dir: categories #分类目录

code_dir: downloads/code

permalink_defaults:

# Directory #目录

source_dir: source #源文件目录

public_dir: public #生成的网页文件目录

# Writing #写作

new_post_name: :title.md #新文章标题

default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)

titlecase: false #标题转换成大写

external_link: true #在新选项卡中打开连接

filename_case: 0

render_drafts: false

post_asset_folder: false

relative_link: false

highlight: #语法高亮

enable: true #是否启用

line_number: true #显示行号

tab_replace:

# Category & Tag #分类和标签

default_category: uncategorized #默认分类

category_map:

tag_map:

# Archives

2: 开启分页

1: 禁用分页

0: 全部禁用

archive: 2

category: 2

tag: 2

# Server #本地服务器

port: 4000 #端口号

server_ip: localhost #IP 地址

logger: false

logger_format: dev

# Date / Time format #日期时间格式

date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/

time_format: H:mm:ss

# Pagination #分页

per_page: 10 #每页文章数,设置成 0 禁用分页

pagination_dir: page

# Disqus #Disqus评论,替换为多说

disqus_shortname:

# Extensions #拓展插件

theme: landscape-plus #主题

exclude_generator:

plugins: #插件,例如生成 RSS 和站点地图的

- hexo-generator-feed

- hexo-generator-sitemap

# Deployment #部署,将 lmintlcx 改成用户名

deploy:

type: git

repo: github创库地址.git

branch: master

有时候我们部署了以后自己博客的链接打不开,查看生成的静态文件也没有index.html,或者是各种奇怪的报错。这时候有可能是我们的站点配置文件_config.yml格式出现了问题。这时候不妨去一些YAML格式检测网站去检测一下格式是否正确:传送门

五、结语

完成上面的操作,你就已经一只脚踏进了hexo的大门,这时的你肯定还有很多疑问,比如博客的头像怎么更换,博客的主题怎么配置等等等等。这里先留下一个悬念,有兴趣的同学可以先行查询一些资料^_^


本文作者: catalinaLi
本文链接: http://catalinali.top/2017/firstBuildHexo/
版权声明: 原创文章,有问题请评论中留言。非商业转载请注明作者及出处。

坚持原创技术分享,您的支持将鼓励我继续创作!