用hexo来搭建一个自己的博客
Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。
个人理解：GitHub上自己申请一个公共的仓库，这个仓库的地址对应的是你的博客地址。通过hexo这个工具将你本地的一些md文档上传到你的github仓库里，这样别人访问你的网站时，相当于是访问了你的仓库，在你的仓库里get到了你写的这些md文档并可以阅读。
hexo的搭建
1.安装Git
git属于版本管理工具的一种，是一种分布式的系统，功能确实很强大，在协作开发中会经常性用到，所以很有必要了解。
windows：到git官网上下载,Download git，按照安装步骤安装到本地。下载后会有一个Git Bash的命令行工具，以后就用这个工具来使用git。
linux：最早的git就是在linux上编写的，只需要一行代码：
1 | sudo apt-get install git |
安装好后，用git --version 来查看一下版本
2.安装Node.js
Hexo是基于node.JS编写的，所以需要安装一下node.Js和里面的npm工具。这个属于前端一个常用工具，也有必要了解。
windows：nodejs选择LTS版本就行了
linux：
1 | sudo apt-get install nodejs |
安装完后，打开命令行查看版本
1 | node -v |
windows在安装完git后，可以使用git bash命令来代替cmd。
3.安装Hexo
安装完git和node后就可以继续安装hexo。hexo就是我们用来管理博客的工具，之后博客的相关命令都是与hexo相关的。
先创建一个文件夹blog，然后cd到这个文件夹下（或者在这个文件夹下直接右键git bash打开），输入命令（cli是命令行界面）：
1 | npm install -g hexo-cli |
用hexo -v查看一下版本
至此安装完成：git，node，hexo。
接下来初始化一下hexo
1 | hexo init myblog#这个myblog可以自己取什么名字都行，然后 |
新建完成后，指定文件夹目录下有：
node_modules: 依赖包
public：存放生成的页面
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：主题
_config.yml: 博客的配置文件
1 | hexo g |
打开hexo的服务，在浏览器输入localhost:4000就可以看到我们博客的预览图
按CTRL+C就可以把这个server关闭
4.GitHub创建个人仓库
github是一个将来很常用的网站，虽然全是英文，但是不影响会有很多优秀的项目，软件需要从GitHub上下载和借鉴，所以掌握并熟用是必须的。注册一个属于自己的GitHub账号是很必需的。
登录GitHub账户后点击你的头像下有一个Your repositories，点击后可以看到你的所有仓库，点击new创建一个和你用户名相同的仓库，后面加.github.io（这里必须要和你用户名相同，只有这样，将来要部署到GitHub page的时候，才会被识别，这是一个大坑）也就是xxxx.github.io，其中xxx就是你注册GitHub的用户名。
5.生成SSH添加到GitHub
SSH是一种安全协议，我记得好像在https，服务器连接好多地方看到过。有用户名/密码，也有密钥。
在git bash中：
1 | git config --global user.name "yourname" #yourname输入你的GitHub用户名 |
这样GitHub才能知道你是不是对应它的账户。可以在检查一下有没有输对：
1 | git config user.name |
在电脑中找到.ssh的文件夹：
id_rsa是你这台电脑的私人秘钥，不能给别人看的
id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。
known_hosts是记录你连接过的ip文件
将公钥部署到你的仓库里：在GitHub的头像下点击setting，找到SSH keys的设置选项，点击New SSH key
把你的id_rsa.pub里面的信息复制进去
在git bash中输入：
1 | ssh -T git@github.com |
6.将hexo部署到GitHub
将hexo和github关联起来主要是修改 _config.yml这个文件的相关内容。
1 | title: swx #网站的标题名 |
接下来需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub
1 | npm install hexo-deployer-git --save |
现在就可以在http://yourname.github.io 这个网站看到自己的博客
7.设置个人域名
域名这个东西相当于是一个网址的后缀名。域名是从后往前算的，依次是一级二级。。。常见的一级域名有.com,.cn,.org你可以在域名查询系统里查询这个域名是否可用，像一些比较火的域名，可能被人先注册的，你如果需要使用就需要花钱。也可以在网上找一些免费的域名。这个东西也只是作为一个标识，本质上还是指向了你的GitHub的仓库里的那个项目的文件。
现在你的个人网站的地址是 yourname.github.io，如果觉得这个网址不太彳亍，就需要你设置个人域名了。
在你的域名控制台中点解析，添加解析。192.30.252.153 和 192.30.252.154 是GitHub的服务器地址。注意，解析线路选择默认。
登录GitHub，进入之前创建的仓库，点击settings，设置Custom domain，输入你的域名
然后在你的博客文件source中创建一个名为CNAME文件，不要后缀。写上你的域名。
最后，在git bash中，输入
1 | hexo clean |
8.发布文章
接下来就可以正式开始写文章并发布。
1 | hexo new newpapername #这里的newpapername就是你要写的文章的标题名，可以是中文，英文 |
9.Front-matter
Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量：
| 参数 | 描述 |
|---|---|
layout |
布局 |
title |
标题 |
date |
建立日期 |
updated |
更新日期 |
comments |
开启文章的评论功能 |
tags |
标签（不适用于分页） |
categories |
分类（不适用于分页） |
permalink |
覆盖文章网址 |
分类和标签需要区别一下，分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。
1 | categories: |
layout
当你每一次使用代码 hexo new paper 它其实默认使用的是post这个布局，也就是在source文件夹下的_post里面。
Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径。而自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。
| 布局 | 路径 |
|---|---|
post |
source/_posts |
page |
source |
draft |
source/_drafts |
而new这个命令其实是：hexo new [layout] <title> 只不过这个layout默认是post罢了。
page
如果你想另起一页，那么可以使用hexo new page board 系统会自动给你在source文件夹下创建一个board文件夹，以及board文件夹中的index.md，这样你访问的board对应的链接就是http://xxx.xxx/board
draft
draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以hexo new draft newpage 这样会在source/_draft中新建一个newpage.md文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用hexo server --draft 在本地端口中开启服务预览。
如果你的草稿文件写完了，想要发表到post中，hexo publish draft newpage 就会自动把newpage.md发送到post中。
10.更换主题
可以在主题网站上探索你喜欢的主题，然后点击主题的名字，会直接跳转到GitHub上，直接下载下来，然后放到theme文件夹下就行了，（也可以使用git bash命令： git clone 跳转的网址地址，这样会在theme文件夹下自动生成相应的文件夹）然后再在刚才说的配置文件中把theme换成那个主题文件夹的名字，它就会自动在theme文件夹中搜索你配置的主题。
而后进入你下载好的主题文件夹，可以看到里面也有一个配置文件config.xml，貌似它默认是config.xml.example，把它复制一份，重命名为_config.xml就可以了。这个配置文件是修改你整个主题的配置文件。
11.遇到的坑
严格按照步骤进行的操作，可以直接访问到了自己的博客网址。记录下自己遇到的坑：
1.因为没有按照说明输入自己的用户名作为博客的网址，从而一直报错，所以按照教程步骤一步一步来复现还是很有必要的。
2.上传的第一篇文章的标题格式没有搞对，于是删除了本地的文件，重新加了title：+文章名字 之后上传就开始一直报错，这期间我不断进行：hexo clean 、hexo d -g的循环操作，而且需要一直输入用户名密码，被折磨了很多次之后，查了相关教程，发现hexo s可以本地预生成，访问localhost：4000可以访问，然后继续进行clean和g -d的循环操作，还是一直出错。最后看了一篇关于简化不用输入那么多次密码的方法教学，把rep里的https改为了git@之后，提交，部署一气呵成。nice！所以有的教程里面推荐rep写https也有的是直接写git格式，原理都是一样的，用的协议不一样，个人感觉git格式更方便一些，同样也是可以连接到仓库的地址。
repo：git@github.com:s-qwer/s-qwer.github.io.git
repo: git@github.com:s-qwer/s-qwer.github.io.git
3.因为修改时，有些配置没有起作用，这里还有个坑，就是相关的配置：后面必须有一个空格！
4. 数据类型[][] 数组名=new 数据类型[][]{{ 元素1，元素2，.... }, { 元素1，元素2，.... }, { 元素1，元素2，.... }}; 这个字段hexo d -g 的时候一直报错：expected name as lookup value, got .
改为：数据类型[][] 数组名=new 数据类型[][]{{ 元素1,元素2... }, { 元素1,元素2... }, { 元素1,元素2... }}; 仍然报错： expected variable end （应为变量结尾）
改为：数据类型[] [] 数组名=new 数据类型[] []{{ 元素1,元素2...元素n }, { 元素1,元素2... 元素n}, { 元素1,元素2...元素n } } ;
放弃了，加了个引用就不报错了。
5.卸载了node，重新安装npm之后，hexo命令找不到。重新安装了一下hexo，可以正常提交了。
6.提交报错：
错误说明：YAMLException: unidentified alias “title*:”
解决方法：将*去掉不再报错
7.提交报错：
错误说明：Error [Nunjucks Error]: _posts/8.6.VUE.md [Line 520, Column 159] expected name as lookup value, got .
原因猜测：是正文里面出现了多次{% %}这样的语句，网上解释说是Nunjucks引擎会把它解释为其它意思
解决方法：在大括号前加上\转义字符即可。我的解决方法是将内容变为代码块。
8.提交显示INFO Deploy done: git，但是访问网页没有更新的内容
hexo的完善
图片显示问题
将文章hexo d -g之后去网站上查看，发现图片都无法显示。
在md文件中插入图片的语法为![]()。
其中方括号是图片描述，圆括号是图片路径。
一般来说有三种图片路径，分别是相对路径，绝对路径和网络路径。
网络路径就是直接引用网上的图片，直接复制图片地址，放在圆括号中就完事了。
这种方式十分的方便，但是也存在一定的问题：
- 图片失效导致无法加载；
- 打开网页后要再请求加载图片；
- 原网站限制，如微信公众号的图片会变得不可见等。
这种方式算是有利有弊。
绝对路径是图片在计算机中的绝对位置，相对路径是相对于当前文件的路径。
由于我们的博客是要部署在网站上，部署后会生成新的文件目录，所以我们选择使用相对路径的方式。
在hexo中使用文章资源文件夹需要在config.yaml文件中更改一下配置：
1 | post_asset_folder: true |
当该配置被应用后，使用hexo new命令创建新文章时，会生成相同名字的文件夹，也就是文章资源文件夹。
由于项目会生成新的文件目录，同时会解析Markdown中的图片路径，会导致一个问题。
如在一个文件目录下，博客名为1.md，相应的存在一个1文件夹存放图片image.jpg。
在Typora编辑器中，普通的md文件使用能在编辑器中正常显示图片。
在hexo中，按理说应该是使用，但网页中却无法正常显示。
此时应该使用这样的方式来引入图片：{% asset_img image.jpg 这是一张图片 %}
虽然可以正常引用图片了，但是这种引用图片的方式只有一句话能形容，wtf。
图片插件
插件hexo-renderer-marked解决了这个问题。可以只用npm install hexo-renderer-marked命令直接安装，之后在config.yaml中更改配置如下：
1 | post_asset_folder: true |
之后就可以在使用的方式愉快的插入图片了。
我们做了这么多都是为了方便，那么为什么不再方便一点呢。
hexo与Typora的完美结合
上述是从文章资源文件夹中引用图片，前提是先将图片放入到文章资源文件夹，如果图片数量众多的话，一张一张的放很影响效率。但是不用怕，我们有很方便的解决方法。
Typora是我非常喜欢的Markdown文本编辑器，在之前的文章中也介绍过一点。
Typora对于插入图片的支持做得非常好，在文件->偏好设置或者直接<C-,>进入设置。
使用该配置后，可以直接复制网页中的图片地址，粘贴到Typora中后，会直接复制该图片到文章资源文件夹，同时自动更改路径。
如复制网络路径的图片https://...../image.jpg粘贴到Typora中叫文章名的文章后，图片会自动变为。
但我们知道部署后，文件路径是不同的，所以当我们插入完所有的图片后，我们还需要删除每个图片路径中的文件名/。不慌，也很简单。
在Typora编辑器中，使用<C-f>快捷键，将所有的文章名/替换为空即可删除。
然后再将博客上传，图片就会随着文章一起打包。在网页中就可以看到正常显示的图片，大功告成
多台电脑使用
使用场景：希望公司、家里电脑都能正常使用，电脑升级更新环境
- 使用网盘或其他方式同步hexo源文件； — git很容易搞定
- 创建两个repo分别管理站点和源文件；— 没有必要，可以利用git分支
这里使用git分支来管理站点、源文件的方式
Hexo生产的静态博客的特点，首先它是一个静态博客生成工具，可以根据你的配置和md文件生成一系列的html、css、js等文件，组成一个站点，部署到github pages，这样网站就可以访问了。
完成hexo的部署命令，其实hexo帮助我们做的事情就是：
- 生成站点有关文件到
.deploy_git - 把它初始化为git目录，并根据你的配置指定remote和branch(一般是master)
- 进行
git commit，并把修改push到指定的remote branch - 命令执行完成后，到github仓库，发现master分支上的内容其实就和’.deploy_git’中一样
按照教程建站完成部署后，你的本地源文件其实都没有同步到github，所以只需要想办法把源文件同步即可。最简单的方式就是在你的xx.github.io repo中创建一个source分支，管理源文件，对源文件的修改注意commit/push即可
步骤如下：
给源文件目录初始化git，并增加remote
1
2git init
git remote add origin https://github.com/xx/xx.github.io // 填入你的repo地址创建分支
source，commit/push1
2
3
4git checkout -b source
git add .
git commit -m 'add source'
git push origin sourceok，可以在github上把
source设置为主分支。其他电脑上只需clone你的.io repo，切换到source分支操作即可。初次clone需要切换到
source分支，并执行npm install，初始化hexo有关的依赖。
因为服务器上的项目无法创建分支，所以出现了错误，暂时不能跑通。
换电脑/重装系统
如果准备换电脑或者重装系统，那么我们的md文件和相关配置怎么保存或者重新设置呢。
以上，就是搭建的全过程了，借鉴了很多文章，很多内容都是复制粘贴下来的，为了给自己以后再次搭建时一个步骤说明。这些只是一些基础的功能，保证了自己写的文章可以被保存在服务器上。hexo还有很多功能我目前没有用到，包括一些互动功能，git分支，国内外分流，SEO等。以后用到了再去查查相关资料完善吧。