基于Hexo和GitHub免费搭建个人博客网站
1.引言
阮一峰大神说喜欢写博客的人，会经历三个阶段。
第一阶段，刚接触博客觉得很新鲜，试着选择一个免费空间来写。比如CSDN、博客园。
第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。比如阿里云、腾讯云。
第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。比如基于Hexo和GitHub免费搭建个人博客网站。
Github提供了Pages功能，只要将写好的Markdown文章提交到Github上托管，即可生成独立博客，而且提供几乎不限流量的存储空间，一切都是免费的。一旦搭建好，则只需要负责写文章就行了，不需要定期维护。
Hexo 是一个基于Node.js的静态博客框架。Hexo使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
- 之前介绍过写Markdown文章的神器Typora，今天就让我们来关注具体搭建个人博客网站。
- 本文是针对Windows10系统，其他诸如Mac系统还有Linux系统请参考百度相关内容。
2.Hexo的搭建步骤
2.1 安装Git Bash
Git Bash用来管理你的Hexo博客文章，并将文章上传到GitHub平台的工具。
1）具体的安装过程就是一直点击next，直到出现install，点击install，安装完成后点击finish，然后在任意文件夹下右键打开Git Bsah Here输入命令git --version，查看有没有安装成功。
注意：右键点击Git Bash Here 如果出现下图，则说明安装路径中有中文（软件安装）。
2.2 安装Node.js
Hexo是基于Node.js编写的，所以需要安装该软件。从官网下载，然后安装即可，直接选择LTS（长期支持版）版本的。
1）安装完成后，打开管理员命令行输入命令node -v以及npm -v，查看有没有安装成功。
2.3 安装Hexo
1）创建一个文件夹Blog，然后进入该文件夹右键Git Bash Here打开。输入命令npm install -g hexo-cli，至此就安装完成了。
2）安装完成后，还需要初始化hexo，即执行如下命令：
hexo init
npm install
3）新建完成后，在Blog文件夹下会出现许多新的文件，目录如下：
- node_modules：是依赖包
- scaffolds：命令生成Markdown文章等的模板
- source：用命令创建的各种Markdown文章
- themes：主题文件夹，Hexo 会根据主题来生成静态页面。
- _config.yml：站点配置文件，您可以在此配置大部分的参数。
- db.json：source解析所得到的
- package.json：项目所需模块项目的配置信息
4）输入如下命令，然后在浏览器中输入localhost:4000(本地查看)即可查看用hexo生成的博客了。
hexo g
hexo s
使用ctrl+c可以把服务关掉。
5）至此，Blog文件夹下会多出两个目录
- .deploy_git
- public
**注意：**出现bash： npm： command not found错误。
网上试了各种办法，最后重启一下电脑就没有问题了。
3.Hexo关联到GitHub
静态页面已经有了，我们还需要将其部署到GitHub上。一来我们搭建博客想要别人可以（以一个链接）访问到我们的博客，二来我们需要有个托管平台，这样我们就可以关注博客内容本身而不是麻烦的管理。
3.1 GitHub创建个人仓库
1）首先注册一个GitHub账号
2）然后点击New，新建仓库
按照下图所示操作后，点击Create repository即创建成功。
3.2生成SSH添加到GitHub
1）在git bash输入如下命令
git config --global user.name "yourname"
git config --global user.email "youremail"
这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。
2)然后创建SSH,一路回车
ssh-keygen -t rsa -C "youremail"
这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹后可以发现有两个文件（一般位于C盘）。
3)然后在GitHub的setting中，找到SSH keys的设置选项，点击New SSH key
把id_rsa.pub里面的信息复制进去。
SSH，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。
3.3 将Hexo部署到GitHub
1）用Notepad++打开站点配置文件 _config.yml。搜索关键词deploy。将YourgithubName对应的修改为你的GitHub用户名。
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master
2）这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。
npm install hexo-deployer-git --save
3）
hexo n bolgname
然后就会发现在Blog/source/_posts目录下出现一个名为blogname的Markdown文章，用Typora软件打开，文件最上方以 --- 分隔的区域，有用于指定个别文件的变量的Front-matter。我是用的个参数具体包括：title，categories，tags，date。
用Typora打开模板文件Blog/scaffolds/post.md文件，可以进行相应的设置。
- 然后使用两个命令即可将你写好的文章（位于Blog/source/_posts文件夹下）部署到GitHub。
hexo g # 生成静态文章
hexo d # 部署文章
hexo s # 可以先从本地（localhost:4000）预览效果，在部署文章到GitHub上
注意：
1）输入hexo d命令后需要你输入username和password。
得到下图就说明部署成功了，过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了。
2）在上面第三步中提到Front-matter，其中除了我使用的几个参数外，还有其他参数。
3）另外，在上面第三步中提到Blog/scaffolds目录，其实该目录下一共有三个文件，刚刚只提到了post.md，还有另外两个文件。
其实这三个文件是对应三种不同的布局（layout）。
1.hexo n [layout] <tittle> # 之前在创建文章时，layout默认是post，名为title的文章在Blog/source/_posts文件夹下
2.hexo n draft <tittle> # draft是草稿的意思，名为title的文章在Blog/source/_drafts文件夹下，
hexo s --draft # 草稿写好文章后，可以在本地开启预览
hexo p draft <tittle> # 将名为title的文章发送到Blog/source/_posts文件夹下
3.hexo new page board # 系统会自动在source文件夹下创建一个board文件夹，以及board文件夹中的index.md，这样你访问的board对应的链接就是http://xxx.xxx/board
4.Hexo的基本页面配置
4.1 hexo基本配置
用Notepad++打开站点配置文件 _config.yml，我们可以在 _config.yml 中修改大部分的配置。
1）网站
| 参数 | 描述 |
|---|---|
| title | 网站标题 |
| subtitle | 网站副标题 |
| description | 网站描述 |
| author | 您的名字 |
| language | 网站使用的语言 |
| timezone | 网站时区，Hexo 默认使用您电脑的时区。 |
2）网址
| 参数 | 描述 | 默认值 |
|---|---|---|
| url | 网址 | |
| root | 网站根目录 | |
| permalink | 文章的永久链接格式 | :year/:month/:day/:title/ |
| permalink_defaults | 永久链接中各部分的默认值 |
- url：网站域名
- permalink：分享某篇文章后在对方的网页中显示的域名。
3）其他设置默认就可以了，更多基本设置可以参考Hexo官网配置内容。
4.2 更换主题
1）系统默认给的主题是landscape，并且在hexo官网还提供了270个主题，可以先预览选择一个主题。
比如我个人喜欢next主题，那么怎么应用该主题呢。
2）点击右上角从GitHub上面下载下来，然后再把整个文件夹放到Blog/themes目录下。
3）然后将Blog目录下_config.yml文件中的主题改为next。
4）进入Blog/themes/next目录下，里面也有一个配置文件_config.yml，这个配置文件是修改你整个主题的配置文件。
-
menu（菜单栏）
文件搜索关键词menu。
-
search(搜索框)
npm install hexo-generator-searchdb --save # 安装插件修改站点配置文件（位于Blog/_config.yml）中添加内容
search: path: search.xml field: post format: html limit: 10000 -
avatar（头像）
文件搜索关键词avatar。将准备好的头像放置在Blog/themes/next/source/images目录下。
-
social（社交）
文件搜索关键词social。
-
进度条
搜索关键词b2t，将图中两条均改为true。即可得到位于左侧栏的top按钮，可以实时显示阅读进度。
5.Hexo的高端页面配置（比较灵活）
hexo添加各种功能，主要包括
- 搜索的SEO
- 阅读量统计
- 访问量统计
- 评论系统等
可以自由选择添加，具体的设置可以参考这篇文章。
6.其他
本文是基于Node.js的静态博客框架Hexo，其他的博客各位如果感兴趣可以参考网络资源进行相应的博客搭建。下面列出了常见的静态博客。
6.1静态博客
- jekyllrb.com（基于ruby）
- gohugo.org(基于go)
- vuepress.vuejs.org（基于vuejs）
- solo.b3log.org(基于java)
6.其他
本文是基于Node.js的静态博客框架Hexo，其他的博客各位如果感兴趣可以参考网络资源进行相应的博客搭建。下面列出了常见的静态博客。
6.1静态博客
- jekyllrb.com（基于ruby）
- gohugo.org(基于go)
- vuepress.vuejs.org（基于vuejs）
- solo.b3log.org(基于java)
