半个小时搭建出自己的个人博客（Hexo博客系统搭建）——基础部分

建议访问原文获得更好的阅读体验
https://luanshizhimei.top/pos...

Hexo搭建网站学习笔记（一）—— 基础部分

身边的朋友似乎越来越多开始玩Hexo来搭建属于自己的免费静态博客，反思一下自己还在使用广告漫天飞的CSDN（其实思否也不错新人也容易拉到流量），痛定思痛决定好好学习如何使用Hexo搭建一个简单网站。

前言

---

Github page是什么？

Github作为全球最大的同性交流平台一直为优秀的秃顶人士们提供着各式各样的代码托管服务。而他推出的Github page就是将你的代码仓库当成一个静态网页站点。意味着我们可以直接上传HTML网页到仓库并指定一个域名就可以十分方便为我们的项目添加网页demo。

选择一个好用的博客框架

当然若每篇博客都需我们自己用HTML编写是十分麻烦的，于是应对这种情况出现许多优秀针对于博客的静态网页生成器，我们就称之为博客框架吧。代表有：Jekyll、Hexo等。

Jekyll是Github page官方钦定博客框架，采用的Ruby语言开发，软件生态圈也非常的丰富。但基于Nodejs的Hexo可能对于前端人员会更加友善一些。实际上他们之间没有明显好坏之分，只要觉得那个用的顺手就好。

这里我们就响应文章标题使用Hexo开始来搭建我们的博客吧！

第一步、安装Hexo博客系统

---

（一）、安装环境

正如前文所述，我们首先需要安装一个Nodejs来支持Hexo。

Nodejs 下载地址 : http://nodejs.cn/download/

安装注意要点：

• 你是什么操作系统就选择什么版本的软件就可以，过程其实是大同小异。
• Windows用户在安装Nodejs的过程中，一定要勾选上npm package manager(不然之后就不能以npm包的形式安装Hexo)。
• 记得勾选Add to PATH(添加到环境变量)。

虽然安装Nodejs就可以搭建Hexo环境，但是好用的工具会使你的工作事半功倍。于是我推荐安装Visual Studio Code来方便的编写博客以及输入命令等。（Vscode的终端又不是不能用）

VS Code 下载地址 : https://code.visualstudio.com...

安装注意要点：

• 一定要勾选上在目录中显示Open with Code的选项。(vscode是将一个文件夹当成一个项目看待，所以勾选上方便以后打开项目)
• 如果软件是全英文，就点开右侧导航栏最下面的Extensions(插件)，在搜索栏中输入Chinese (Simplified) Language，点Install(安装)。然后软件会提示你重启点确认就可以了。（VScode的翻译已经很不错了）
• (可选)安装一个vscode-icons的插件会方便区分不同的文件。

（二）、安装Hexo

1.打开运行（快捷键Ctrl+R），启动cmd。（输入cmd点回车）

2.然后分别输入如下命令查看是否可以得到正确的nodejs和npm的版本号，若提示没有该命令的就返回上一步重新安装。

node -v
npm -v

3.确保nodejs和npm正确安装之后便可以输入如下命令安装hexo。（一定要带上-g安装到全局环境）

npm install -g hexo-cli

4.若出现关于fsevents（mac下的软件）的WARN（警告）忽视就好，实在不放心就输入版本命令查看hexo是否能运行。

hexo -v

（三）、初始化博客

1.在你的硬盘上选择一块风水宝地随意创建一个文件夹。（比如：在我的文档里创建了一个名为Blog文件夹）

2.使用VS Code打开你新创建的文件夹。（如果前面勾选了在目录菜单中增加Open with Code，就可以直接使用鼠标右键采用VS Code打开）

3.然后调出终端（Ctrl + Shift + `），输入安装Hexo的命令。（这里可以使用Shift + inssert粘贴）

hexo init

4.初始化完成之后根据提示再安装一下所依赖npm包。

npm install

第二步、日常写作

---

（一）、创建新的博客

经过以上步骤并没有发生错误的话，就恭喜你已经成功搭建出Hexo博客。编写博客的环境已经有了，剩下的问题就是如何编写博客？

同样在VS Code的终端中输入新建（new）命令，末尾跟上的你的博客的名称。

hexo n 博客的名称

创建文件成功之后，软件会提示新博客在/source/_posts/下。

打开文件会发现Hexo已经提前帮助我们写上了名称、时间、创造者等信息。（开头部分是yml配置语言，随后我们还自定义这些信息等）

（二）、MarkDown简单上手

目前主流的博客系统，基本上都采用的MarkDown（即.md文件）来编写博客。当然也不用特别担心md语法特别难，MarkDown的优美之处便是让创造者把重心放在写作上这件事情上而不是格式排版。

打开新创建的md文件（即新创建的博客），在vscode打开命令面板（Ctrl + shift + P），输入： MarkDown:打开侧边浏览。

这么做的好处就是你可以一遍输入，一遍查看文档的效果。

我们就以一篇文章大概编写顺序为例来快速上手md。（如果是小白建议都手动输入到编辑器中看一下效果）

一、标题

首先写作我们常常为取一个恰当的标题而苦恼，同样编写md文档中标题也是十分重要的。

md的标题一般多个#并排在一起，并空出一个空格，隔开标题名。

'#'的数量代表了标题级数，不同标题级数代表了内容的层次。善用级数可方便的制作出带目录的文章。

md 最高可以支持六级

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

二、段落换行

在md中直接换行只是增加一个空格，换行的话必须在结尾的结尾输入至少两个以上的空格。

当然也可以采用两个以上的换行，只不过会产生多个空行。（个人觉得大多数的md排版段落段距都比较小，多个空行还美观一些）

三、分割线

有时我们需要一个长长分割线区分不同类型的内容。他的语法很简单就是一行三个以上*(数量没有上限)就可以了。

下面这个就是分割线
***

四、列表

无序列表

无序列表一般使用在不需要划分次序等级的条目中，语法也非常简单： 一个-，然后用空格隔开条目。

- 无序列表，条目一
- 无序列表，条目二
- 无序列表，条目三

有序列表

刚好和上面无序列表是相反的，强调的是次序和等级。语法：数字+. ， 然后用空格隔开条目。

1. 有序列表，条目一
2. 有序列表，条目二
3. 有序列表，条目三

五、引用（块引用）

在写博客尤其是技术博客我们难免引用其他人优秀的部分文章。为了注明这是他人文章或外部链接。我们可以使用引用来区分，语法：> + 空格 + 内容。

并行多行的开头的>表示一体的，分割块引用的办法就是多打一个换行，块引用也可以嵌套方法就是几层就加几层的>

> 单独一行

> 表示多行1
> 表示多行2

> 块引用也可以嵌套
> > 这个就是新的嵌套

六、超链接/图片

超链接

点击可指向其他地方（站外内都可以），语法：

[这里是显示的文字](www.baidu.com)

图片

其实插入图片的代码就比超链接前面多了个!，语法：

![图片不能显示时出现的文字][img01]

更加优雅的写法

上面的写法都可以实现我们插入超链接/图片，但是这种写法会严重影响到源文件的可读性（多图文的源文件会充满各种地址），所以我推荐的是变量引用的办法。

就是我们先定义好对应资源地址的变量名。然后需要再使用变量名调用相对应的资源地址。

1.声明变量名(可以放在文件开头的位置，他们是不会显示的)，变量名是十分随意的数字、字母、中文都可以

[变量名]:资源位置
[baidu]:https://www.baidu.com/
[我的首页]:https://luanshizhimei.github.io/
[图片]:img/01.jpg

2.调用的时候就方便多了

[点击就跳转百度][baidu]
![图片说明][图片]

七、表格

markdown表格是十分可视化的，大体来讲就是采用|来区分单元格。

第一行是表头，第二行是控制单元格的居中方式采用了:-(左对齐),-:(右对齐),:-:(居中)来调整。

其中的-数量不限。

| 左对齐 | 右对齐 | 居中对齐 |
| :-     | -:    | :-:    |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

八、行内元素

斜体语法：选择你需要强调的部分周围打上一个*。

粗体就是：选择你需要强调的部分周围打上二个*，具体如下：

这里是*斜体*  
这里是**粗体**

九、HTML

实际上md使用采用HTML渲染的，所以可完全兼容HTML代码。但是我觉得插入HTML就违背了md的主旨了：我们只关心写作，排版格式一边去。

当然必要的时候加入HTML代码还是对于某些特殊环境下有帮助。（如文字居中等）

最后使用md时请注重语义，而不是他的效果（效果我们可以自定义）

深入学习Mark

以上7条是我总结的最常用部分（基本就够用，但有必要还是学习一下流程图和数学公式），学无止境如果你还想深入了解的话，可以看看如下网站：

Markdown编辑器教程 - 老杨

Markdown中文网站

随便再推荐几个VS Code关于MarkDown好用的插件。

1.Markdown All in One

提高输入效率的插件：代码补全，快捷键等超方便的功能。

Markdown All in One

2.PicGo

一个方便的上传图片到图床的插件，默认图床SM。国内访问Github有时会比较慢，就建议绑定国内的图床，如千牛、微博之类的。

PicGo

（三）、生成静态网页/本地浏览

等你写好一篇博客之后就可以生成(generate)网页，也就是将你的md文件或其他页面文件转换对应的html网页，命令如下：

hexo g

完成上一步之后就可以启动hexo服务(server)，实现本地浏览，命令如下：

hexo s

值得一提的是启动Hexo服务之后。是可以动态监测你的修改，你修改md文件也会修改网页。（按F5刷新就可以看到）

第三步、发布Blog

---

当然我们的目的是为了发布到网络，这里我演示使用Github page的方式发布。要注意的是Github是禁止了百度爬虫的所以是不能被收录的，个人觉得目前最好解决方案是Coding和Github的双部署.

（一）、创建仓库

1. 首先你需要一个Github账号（这不是废话吗？）。
2. 找到右上角的+点卡，找到New repository(新仓库) 。
   
3. 在Repository name(仓库名称)中输入你的blog名称，注意这里是仅支持下划线和英文（相当于域名），最后末尾加上.github.io表示启用Github page服务，当然这也不一定我们可以手动开启Github page并指定一个域名，但图个方便就用这个办法吧。
   
4. 最后点Create repositor，创建仓库。

（二）、Git安装和配置

1. 下载并安装Git（一路点yes选默认参数就可以）

   Git下载地址：https://git-scm.com/downloads

2. 打开Git Bash(Git命令行版本)，先要绑定你的账号和邮箱（为了区分是谁的代码），命令如下：

   git config --global user.name "你的名字"
   git config --global user.email "电子邮箱"

3. 然后再生成ssh key（这个相当于你的电脑和github通信的"钥匙"），命令如下：

   ssh-keygen -t -rsa -C "你的邮箱"

4. 之后会提示你输入，不用管连按三次回车。（默认大法好）
5. 然后找到C:Users你的用户名\.sshid_rsa.pub，用记事本打开并复制全部内容。
6. 在SSH and GPG keys页面中，点New SSH key(新建密钥)。
7. Title(标题)就填你的电脑名称就好，Key(密钥)就填刚刚复制的id_rsa.pub文件的内容，最后点Add SSH key(新增密钥)就完工。

（三）、发布网站

1. 重新回到Vscode打开blog项目界面，打开终端。(Ctrl + shift + `)

2. 安装一个hexo-deployer-git的插件，命令如下：

   npm install hexo-deployer-git --save

3. 我们还需要设置博客根目录下_config.yml，在最末尾的#Deployment那个部分设置为下面这段。

   # Deployment
   ## Docs: https://hexo.io/docs/deployment.html
   deploy:
     type: git
     repo: 
       github: [e-mail]:luanshizhimei/luanshizhimei.github.io.git,master

   这里git@这段是你的git ssh链接。获得的办法：

   1. 点开你的仓库 —— Clone or download —— 复制那段git开头的代码，最后在末尾补上,master，表明你是发布在主线上。
   2. 或者将上面第一个luanshizhimei改成你的Github账号名，二个luanshizhimei改成你的仓库名

4. (可选)之前提到了关于双部署，在coding同样创建一个Git仓库，然后绑定ssh key过后，同样在_config.yml中增加类似这样一句。

   coding: [e-mail]:luanshizhimei/myblog.git,master

5. 最后我们在终端中输入发布命令（deploy），即可完成部署：

   hexo d

6. 等待几分钟，Github用户在浏览器地址输入你创建仓库名称（我的就是 https://luanshizhimei.github.io），就可以查看你部署成功的博客了！（coding你需要在网站看它给你是什么域名）

结语

---

想必能看到这里的朋友大概了解我写博客的尿性——巨废话。

我希望通过这种唠唠叨叨方式尽可能说到新手朋友们可能会遇到的问题减少不必要的踩坑。

由于个人见识短浅，还有很多错误或者更好的方法并未发现，还有望各位大佬们能提出珍贵的批评和意见。

欢迎大家有什么疑惑的加我企鹅1095289701，私信我经常看不到。（系统背锅 + 烂癌患者）

下一篇是关于主题简单美化和插件安装，各位再见～

Hexo搭建网站学习笔记（二）—— 主题美化