hexo github个人博客搭建
前言
一直很羡慕大佬室友的个人网站，在大佬推荐下决定用hexo框架也搭一个自己的博客，但是网上的教程都比较简略，在综合了好多教程以及自己百度了一些问题后才算是搭了起来。所以决定第一篇博客就写我的搭建过程，用来整理一下思路，还有可能以后有小伙伴想要搭建博客的时候我也可以帮上忙。（这篇其实很早就开始写了，但是由于拖延症和把yilia主题玩坏了才拖了这么久。）
前期环境的安装
githunb创建个人仓库
因为我们的网站是托管在github上的,所以我们需要注册一个github账号,注册好后在左上角的Repositories(仓库)点击new创建新仓库,命名规则为 用户名.github.io 创建好后就可以了。
安装git并与GitHub绑定
简单地说，git就是一个管理代码的工具，同时也可以进行类似cmd的命令行操作（粗糙的个人理解），我们的网站在本地搭建好以后，需要使用GIT同步到GitHub上。下载链接 http://rogerdudler.github.io/git-guide/index.zh.html 同时附有简单的配置教程。安装好后需要将git与GitHub绑定，右击打开Git Bash
依次输入命令：
1 | git config --global user.name "你的GitHub用户名" |
然后找到生成的.ssh文件夹中的id_rsa.pub密钥,将内容全部复制
打开GitHub_Settings_keys 页面，新建new SSH Key
Title任意填写,将密钥内容粘贴进去,添加.然后在Git bush中检测GitHub公钥是否设置成功,输入
1 | ssh git@github.com |
如出现下图则设置成功,设置的目的是为了省区每次推送时输入密码的步骤,并保证每次推送都是正确合法的.
安装Node.js
hexo是基于Node.js,下载链接https://nodejs.org/en/download/ 安装好后继续输入命令行
1 | node -v |
若出现版本号,则安装成功
安装Hexo
终于到正题啦,Hexo是个人博客网站的框架,这里需要自己创建一个文件夹,可以命名为BLOG,Hexo框架与之后写的文章都会放在这里,创建好后,进入文件夹,这里我看的教程是按住shift键,右击鼠标打开powershell进行命令行操作,但是需要在设置中搜索powershell并允许本地powershell脚本在不签名的情况下运行.而且之后还出现了无法访问本地4000端口的情况,因此最后还是使用GitBush进行命令行操作,即在BLOG文件夹内右击鼠标打开Git Bush,输入:
1 | npm install -g hexo-cli |
第一条命令为安装Hexo,第二条为初始化博客
接下来要记住常用的命令
hexo n “我的博客” == hexo new “我的博客” #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #本地预览
hexo d == hexo deploy #部署
hexo clean #我不知道是干嘛用的但是每次在hexo g命令前都要输一遍,好累啊明天再查是干嘛用的就先这么写吧.
然后,为了初步检测一下我们的网站,输入以下几条命令
1 | hexo new test_my_site |
完成后,打开浏览器输入地址 localhost:4000 就可以看到啦,这里放我看的教程的图片,大致上应该相同
如果无法本地预览的话，可能是4000端口被占用，一般来说只有福昕阅读器这个软件会占用4000端口。可以卸载掉它或者使用命令 hexo server -p 5000 将本地预览的端口改到5000。我这里之前使用powershell进行命令行操作，到本地预览这一步也出现了问题，但是4000端口并没有被占用，也搜不到相关的问题，最后改用Git Bush。
推送网站
本地预览没有问题的话，就可以推送网站了。首先再BLOG目录下找到_config.yml文件，这是站点配置文件。打开后翻到最后，找到如下代码
1 | # Deployment |
type那里改成git，repo那一行，冒号后面的格式为用户名/仓库名.git 不过仓库名那里大小写都无所谓。最后将branch改为master。初始的文件里repo和branch行可能都没有，要自己添加。
然后在文件最开始
1 | # Site |
修改title(网站标题)，author（作者），语言那里根据主题文件夹中languages中的语言调整，一般来说改成zh-CN就可以。然后保存修改。最后安装Git部署插件，输入命令
1 | npm install hexo-deployer-git --save |
然后分别输入三条命令
1 | hexo clean |
之后在浏览器输入仓库路径就可以访问博客了，即 用户名.github.io
更换主题
hexo有许多主题可供选择，传送门 https://hexo.io/themes/ 。一开始下载的是yilia主题，但是这个主题太过简约，我在增加标签页和分类页时出了大问题，文章内容不显示，控制台发现页面上没有html标签，也想不出来是什么原因，只好重装一遍，这次用了butterfly主题，常用的功能都是现成的，非常方便。简单的配置就等下一篇再说吧。
常用Markdown语法
创建文章
博客文章一般使用Markdown语言来写，这是一种简单的标记语言，而且支持嵌入html代码。我是使用VS code进行编辑，这样在侧面可以预览文章效果。
同样在BLOG目录下打开Git Bush，输入命令
1 | hexo n 博客名字 |
在BLOG目录中source文件夹中的_post文件夹中，会找到相应的博客文件，打开可以看到最顶端有一段
1 | --- |
这部分的内容先不用管，在这一段下面开始写文章。
##标题及段首空格
Markdown语言支持六级标题，每一级标题前就是几个星号，再加上空格
比如
1 | # 一级标题 |
这里建议每个标题后打三个空格，不然有可能文章被推送到网站上时不显示标题，我之前用yilia主题就是这样。另外，我写的时候想在段首空两格，但是输入两个空格也还是显示顶格，后来查到只要在中文输入下用全角符号输入两个空格就可以解决，不过，再编辑器预览的时候还是不会有空格，只有推送到网站上才显示。
列表
Markdown支持有序列表和无序列表，有序列表在最开始使用星号加一个空格，如下
1 | * 第一项 |
有序列表则用数字加.加空格
1 | 1. 第一项 |
如果想要嵌套，只要在子列表之前添加四个空格
1 | 1. 第一项： |
插入代码
Markdown插入代码有两种简单的方法。
第一种，在代码区块前空一行，然后在每一行代码前加四个空格。
1 | 空行 |
但是这种方法在使用butterfly主题时无法使用全部复制的按钮，所以我采用了第二种：用两行```把代码块包裹起来
1 | 三个` |
同时第一行的三个``后可以写上代码种类，butterfly的主题也会显示，但是我不知道为什么不显示，这个问题还没解决。（这里我写三个`是因为我发现编辑器不能判断```是代表要插入代码还是被插入的代码，太难了…）
插入图片
插入图片有两种方法，分别是本地图片和链接，但是插入太多本地图片会导致加载速度变慢，我自己觉得是因为本地图片都被上传到github的仓库里，访问的时候从github下载图片，然后github那个一言难尽的访问速度…所以使用图片链接比较好
在需要插入图片的地方，输入
1 |  |
方括号内的是图片描述，括号里的是链接，链接可以直接放你在网页上看到的图片链接（比如我前面有两张图片直接嫖了我看的教程里的图片链接），也可以使用图床，上传本地的图片然后生成链接。一般常用的图床有七牛图床，但是超流量以后要钱，那我自然使用免费图床，我找到了一个叫公益图床的免费网站，上传图片后会自动生成适用于各种情况的图片链接。然后我本地也新建了一个文件夹备份这些图片，毕竟这种小网站没准哪天就没了。
暂时就这么多吧，以后写文章需要新的语法时还会再做笔记。总的来说，搭博客的过程给我最大的感受就是要有耐心，尤其在配置主题的时候，很可能哪里疏忽就导致整个网页出了问题，而且往往还找不出来到底哪里不对，这种时候只能重装，真的很考验心态（也可能只是我太菜才有这么多问题）。
