一、前言
工作之后一直有写作的冲动，想把自己的一些想法记录下来，但可能是天生自带的强迫症，一直没有好的平台，所以一直没有开始。之前看到过一些技术人员有自己的博客，而且是那种私人的博客，觉得非常的炫酷，从此就一直想要说自己也弄一个，其实关于博客的平台有很多，很多人也喜欢在一些第三方平台进行写作，像是简书、CSDN、知乎...但是有一个自己博客的想法一直在我脑海，这不刚好自己现在有时间了，就开始鼓捣起来了。
关于这篇博客
写这篇博客主要是：
第一是对整个网站搭建过程进行记录，帮助自己巩固和总结一下
第二是搭建过程中也遇到了不少的坑和问题，将这些问题进行总结一下，帮助其他人少犯错。
额外想说的一点：
这个虽然说是教程，但是随着技术的更新，肯定会有部分的内容没有及时更新逐渐淘汰，所以我会尽量在写的过程中提供相关的官方文档链接，一般只要这个技术没有被完全淘汰，他的官网文档总是会进行更新的，所以如果我的教程中有哪些地方你觉得可能不太准确，可以通过其中的官网链接进行查看。
二、教程部分
搭建博客网站是一个小的项目工程，所以不要想着一步成功，中间可能还会遇到各种Bug,可以将这个项目分为多个步骤进行，接下来我们开始第一部分（博客网站框架搭建）：
- 了解Hexo
- 安装Nodejs环境
- 安装Hexo
- 搭建你的一个博客平台
- 开始你的第一篇博客文章
开始准备工作
- 首先你的电脑要安装了Git（版本控制工具）,不会的可以点击Git官网进行下载安装
- 安装nodejs环境，可以去Node官网进行下载即可,这样你就拥有了NPM包管理工具，就可以安装hexo啦！
- 你需要注册一个GitHub的账号，因为你需要使用GitHub Pages
- 貌似目前就需要这些。。。
1.Hexo介绍
Hexo是基于NodeJs的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github上。
- 超快速度
- 支持MarkDown
- 一件部署
- 丰富的插件
2.环境准备
2.1 安装node.js
去nodejs官网下载对应系统的安装包，按照提示进行安装即可。可以使用以下命令检验是否安装成功：
$ node -v
如果安装成功将会显示你安装的node版本信息。
2.2 安装Hexo
在你安装好node之后你就可以使用npm安装hexo，目前由于部分原因，npm并不是所有人都可以使用，如果不行的话可以使用淘宝镜像操作没有很大的不同，把npm改成cnpm即可,安装Hexo的主要流程可以通过Hexo文档进行查看，官方文档都会持续更新。
$ npm install hexo-cli -g
3.使用Hexo搭建你的第一个博客
3.1 创建博客目录
$ hexo init yourblogfilename
$ cd youeblogfilename
$ npm install
这里三个步骤分别是：
- 初始化你的博客的文件目录
- 进入到你的博客文件目录中
- 安装npm
这里的
yourblogfilename就是你本地博客的文件夹，这个名字你可以自己随便取。
3.2 生成静态页面
$ hexo clean
$ hexo g
g表示generate
3.3 运行
$ hexo s
s表示server
这个时候你打开浏览器，输入 http://localhost:4000/就可以看到效果啦！
这个时候你应该是有一点小兴奋的吧！终于看到了一个博客网站的大致雏形了，接下来你就可以自己尝试发一篇文章试试！
4.你的第一篇博客文章
4.1 执行命令
$ hexo new firstblog
这个时候在你的博客文件目录的source/_posts下会生成一个firstblog.md文件，这个是一个Markdown文件，相信很多编程人员都知道，编写Markdown文档也是技术人员的基本功之一，所以你可以打开这个文件，随便输入一些文字，保存关闭即可。这将是你的第一篇博客文章，使用以下命令查看生成的效果：
$ hexo clean
$ hexo g
$ hexo s
打开浏览器，输入 http://localhost:4000/查看效果。
4.2 更直接的方法
在source/_post/下新建一个.md文件也可以
以上，你已经完成了一个博客网站的基本搭建，可以自己查看自己的新建并且发布的的博客文章。但是它与我们所设想的还有一段距离，所以接下来我们就要开始进行以下操作：
- 配置站点信息
- 更换主题
- 配置主题信息
- 部署到Github
5.配置站点信息
网站的设置大部分都在_config.yaml文件中，详细配置可以查看官方文档
下面列举一些常用配置：
-
title-> 网站标题 -
subtitle-> 网站副标题 -
description-> 网站描述 -
author-> 你的名字 -
langiage-> 网站使用的语言
⚠️注意：在配置时，需要加上冒号:,冒号后面要加一个英文的空格，例如：
title: Kevin wan
6.换一个你喜欢的主题
配置好上面的站点信息以及发布了自己的博客文章之后，是不是发现Hexo这个自带的主题有点丑呢？没关系，Hexo中有很多主题，可以在Hexo官网查看。我自己使用的是Next主题,个人还是比较推荐的。
6.1 下载主题资源
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
当然，这里我使用的Next主题作为例子，你也可以使用其他的主题，只需要将clone后面的链接换成你的主题的URL即可。
6.2 使用下载主题
在站点配置文件，也就是_config.yaml中，配置theme
next是我使用的主题名称，具体的可以通过主题文档查看你的主题名称
6.3 主题其他部分配置
到这一步你已经可以看到一个比较漂亮的博客网站了，一个你喜欢的风格的网站。当然，还有一些细节的部分需要我们进行配置，这个时候可以根据主题的配置文档进行主题配置，一般是在theme/{theme}/_config.yaml主题配置文件下进行配置，Next主题的可以查看Next文档，详细的配置步骤这里就不多说了，可以按照自己的喜好进行配置。
在配置完之后怎么查看自己是否配置成功呢？可以使用完成的调试命令进行查看：
$ hexo clean
$ hexo g
$ s
这个时候本地浏览器访问http://localhost:4000/即可
此时，你已经完成了第二个部分，配置好了你的站点信息，选择了自己喜欢的主题和配置了相应的主题设置，但是目前这个网站仅限于我们自己本地进行浏览，无法让别人看到，这就需要我们将我们的网站部署到Github上面去，至于什么是GitHub，知道的可以自己搜索一下，作为一名开发人员，GitHub肯定是要了解的，废话不多少，接着操作：
- 注册Github账号
- 创建仓库（repo）
- 网站配置
- 进行部署
7.部署到GitHub
7.1 注册GitHub账号
7.2 创建一个xxx.github.io的仓库
这里的xxx是你的用户名，例如我的用户名是Xiankai-Wan那么我的仓库就命名为Xiankai-Wan.github.io
7.3 安装hexo-deployer-git
$ npm install hexo-deployer-git --save
7.4站点配置Git
在站点而不是主题的_config.yaml中配置deploy
deploy:
type: git
repo: <repository url>
branch: [branch]
-
type这里默认为git -
repo后面是你的这个repo的URL，可以在Github上面找到你的repo的地址 -
branch表示分支，可以不填，一般为master - 还是那句话，冒号后面要有空格
7.5 部署
终端输入：
$ hexo d
d 就是 deploy
将网站部署到GitHub已经完成了，这一步还是比较简单的，只需要一些基本的操作就可以了，这个时候你就可以通过xxx.github.io访问自己的博客网站啦！
接下来我们需要配置一些其他的信息，例如每一个博客文章中都有标签，那这个是怎么来的呢？还有我们可以对每一篇博客文章进行分类，这个也是需要我们手动配置一下的，所以接下来我们开始：
- 配置标签页
- 配置分类页
8.创建标签页
8.1 确认相关信息
- 你需要确认站点配置文件里面有：
tag_dir: tags
- 确认主题配置文件有：
tags: tags
8.2 新建Tags页面
$ hexo new page tags
这个时候会在source/下面生成tags/index.md文件
8.3 配置标签页面
打开tags/index.md,配置如下：
title: tags
date: 2017-10-20 06:49:50
type: "tags"
comments: false
date可以保持系统生成的时间，其他部分不要乱改
8.4 在文章中添加Tags
在完成以上操作之后，你就可以在自己的博客文章xx.md文件中添加：
tags:
- Tag1
- Tag2
- Tag3
多个Tag可以按照上面的格式进行添加。
之后你的博客文章文件头部类似于：
title: TagEditText
date: 2016-11-19 10:44:25
tags:
- Tag1
- Tag2
- Tag3
9.创建分类页
9.1 确认相关信息
- 你需要确认站点配置文件里面有：
category_dir: categories
- 确认主题配置文件有：
categories: /categories
9.2 新建分类页面
$ hexo new page categories
这个时候会在source目录下面生成categories/index.md文件。
9.3 配置分类页面
打开categories/index.md，配置如下：
title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false
date 可以保持系统生成的时间，其他不要随意更改
9.4 在文章中添加categories
在完成以上操作之后，你就可以在自己的博客文章xx.md文件中添加：
categories:
- cate
之后你的博客文章文件头部类似于：
title: TagEditText
date: 2016-11-19 10:44:25
categories:
- cate
三、总结
以上，就是整个博客网站的基本搭建过程，这个时候你已经可以通过自己新建文件然后上传部署到自己的博客上面了，每次编辑完成之后可以使用以下三个命令进行查看：
$ hexo clean
$ hexo g
$hexo d
也可以使用：
$ hexo s
进行本地测试，测试完成之后，在上传到Github也可以。
关于站点和主题的其他配置，大部分都可以通过官方文档进行配置，对于其他扩展应用例如统计浏览量、加入评论系统等等，后期我会继续总结发帖分享。
网友评论