快速搞定基于github的hexo主题个人博客网站

概述

接下来我们将会介绍基于github搭建的一个个人博客网站，我推荐使用hexo主题，这个类型的主题我觉得比较好看，而且也是比较新潮的那种，相信大家会喜欢的。

搭建流程

• 安装node：
  直接去官网下载node，点击链接，再去下载里面点击windowns下载即可。
  
• 安装git，具体点击链接https://git-scm.com,直接去官网上下载即可
  至于使用和安装细节，大家可以参考博客：https://www.cnblogs.com/ximiaomiao/p/7140456.html
• 创建github账号
  如果你没有github账号的话，博主建议你尽快建一个，github这个网站很好用，如何我们的博客搭建也需要借助它。戳这里
• 安装hexo
  可以直接在桌面上点击鼠标右键，使用git Bash打开，然后在命令行里面输入：npm install -g hexo -cli即可，就可以直接下载Hexo了。
  以上所有步骤做完以后，总算是把该下载的东西都下载好了，接下来我们正式开始了。

基于github创建个人博客

• 创建个人文件夹，为了方便你可以命名为Blog。
• 然后点击文件夹，使用git Bash打开输入以下命令：

hexo init      //在文件里面初始化hexo，与hexo关联
hexo install   //下载一些包
npm install hexo-deployer-git --save      //下载deployer

以上命令执行成功，你会看到你的文件夹里面有许多相关文件。

• 进入你的github网站，点击头像处->your reposory->new repo，即创建自己的个人仓库，出现以下界面：
  
  注意！！！如果你是搭建个人博客的话，仓库命名必须为：github用户名.github.io，然后选择public，README即可！
  创建好仓库以后，在仓库旁边的clone处查看并且复制一下SSH(后面要用)：
  
• 之后进入之前建立的Blog文件夹里面，你可以看到一个config文件：

直接使用VScode或者Atom打开(没有的话可以下载一个，这两个编辑器还挺方便的)。然后在最下面的deploy处添加代码,注意：那里的SSH，你得添加自己刚刚从个人仓库里面复制的SSH。

• 最后在当前Blog目录下利用git Bash，输入命令：hexo g -d。这样就可以把我们的个人博客部署到github上面了。
  下面是原型：

hexo主题优化

以上的示例图片是默认主题landscape的，如果说你需要自己去找一些比较好看的主题的话，可以上hexo官网去找https://hexo.io/themes/.
我当初找的是一款Cxo主题，大家可以参考一下：戳Cxo

进入你所选择的主题以后，上面有教程教你怎么导入到你的个人博客当中。大家可以找着上面的教程做就行了，上面讲的还比较详细。
**但是！！！！有坑需要注意：**如果说你按照上面的教程做了以后，你可以在VS code当中进入当前Blog文件夹终端或者直接在Blog上面Git Bash进入命令行输入命令：hexo s
这样就可以点击它生成的链接，可以直接在本地观看效果，如果说本地运行没问题，并且你满意的话，就可以再输入命令：hex g -d部署到你的个人博客当中即可。如果说你部署的时候，发现你本地运行没问题，但是部署到个人博客以后，发现显示不出那个效果，或者说有问题的话，那么你就在输入命令：
hexo clean
hexo g -d
即可（这个坑博主debug了好久，当然如果说你们直接就部署好了就说明很欧气了）
如果说你们想换主题的话，也可以照着上面换就行了。

博客功能优化

我们刚刚所建立的博客，还有些功能欠缺，比如说评论，统计人数，阅读时间，字数等等，你可以在你所选择的主题官网上面查看其它配置，照着着上面来就行了。
至于评论界面，有很多种方法，我建议大家可以利用gitment搭建免费的评论系统，比较好看方便。

首先注册OAuth Application

注册这个大家可以在github的settings的Developer settings选项找到，为了方便我还是附上网址吧：传送门
大家可以看到：

这两个URL博主建议你们都填自己的博客地址(用户名.github.io)，其它的随便填没问题。
创建完成可以看到这个界面：

修改你当前所用主题的themes下的_config.yml文件

然后找到这一段代码进行修改：

comment:
  # Livere  site: https://livere.com/
  livere_uid:
  # Disqus  site: https://disqus.com/
  disqus_shortname: 
  # Changyan  site: http://changyan.kuaizhan.com/
  changyan_appid: 
  changyan_conf: 
  # Gitment  site: https://github.com/imsun/gitment/
  gitment_owner: '你的github用户名'
  gitment_repo: '你的仓库名(可以建立一个专门的仓库存储评论信息)'
  gitment_client_id: '你注册的OAuth Application的clientID'
  gitment_client_secret: '你注册的OAuth Application里面的clientsecret'

初始化评论

做完上面几步以后，你可以直接在当前git Bash命令行里面输入：hexo g -d把当前内容部署到博客上面。进入你的个人博客界面，随便选择一篇博客，然后到博客最下面点击头像登陆，之后点击初始化即可。

完成。

写个人博客

首先你要写个人博客，得先去Blog文件里面点击source->_posts，在这里面创建md文件即可，然后可以利用VS code打开md文件，之后就可以在里面写博客了。
我们自己部署的个人博客界面支持markdown编辑语言，对于它的语法还挺简单的，大家可以去了解一下：点击即可了解markdown语法
如果说你需要对你的文章加一点属性，比如说tag,title，date等等，你可以在md文件的最上面写上

title: Hello-Hexo!
date: 2018-06-20 14:39:37
tag: web

代码上下用—包裹

---
代码(描述文章属性)
---

然后三横线下面就是你的正文内容了，你可以参考markdown语法编写，当然，到这里大家肯定会疑惑，这么麻烦，我还不如用CSDN或者博客园直接编写博客了。我觉得是的，刚开始的确麻烦了点，但是那只是你安装，搭建过程，麻烦，markdown语言编写出来的博客很精美，而且个人博客不像CSDN那样，主题，界面，功能等东西都是固定的，个人博客可以根据你个人的喜好去定制编写，很有弹性，人性。而且当你去面试的时候，你写出一个个人博客，也是一件小项目吧。
如果说你想在你的个人博客文章上面添加摘要图片的话，可以去你的博客md文件，属性代码里面写上：

photos:
- http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/03/90/9d60d6efd18d8fa7bdb87f4a7840b787.jpg
- 'test'

当然，我们写博客肯定也会用到很多图片，我们如果说要加本地图片的话，为了以后能够省事，大家可以：

1.首先把blog（hexo）目录下的_config.yml里的psot_asset_folder:设置为true

2.在blog（hexo）目录下执行:
npm install hexo-asset-image --save
3.在blog（hexo）目录下Git Bash Here，运行hexo n "博客名"来生成md博客时，会在_post目录下看到一个与博客同名的文件夹。
4.将想要上传的图片先扔到文件夹下，然后在博客中使用markdown的格式引入图片：

![你想要输入的替代文字](xxxx/图片名.jpg)

如果是加上网络图片的话，就可以直接把链接拷贝进去即可。
最后，大家写完博客的话，直接在git Bash命令里面输入：hexo g -d部署到博客即可。
最后，欢迎大家关注我的个人博客，在下所有的文章都是从个人博客导入进来的，文章会首先更新在个人博客里。希望我的博客能够给大家带来收获！