2019-03-16

---

title: hexo+github+yilia搭建博客
date: 2019-03-16 21:46:39
tags:
toc: true

---

花了一天半的时间终于把个人的博客搭建好了，这期间也踩了不少的坑，但总的来说还是比较顺利的。我主要参考了codesheep B站上的视频这里给个链接here。视频中用的是mac，我用的是windows，但是两者操作基本上是一样，按照视频基本上就可以不踩坑的完成博客的搭建。

这里我总结一下几个步骤：

1. 首先是安装node.jsnode.js下载LTS版本然后安装。可以通过在命令行下或者终端里node -v和npm -v来检查是否安装成功。
2. 因为xxx原因的限制（大家都懂），需要一个国内的镜像源。输入下面这行命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装hexo

cnpm install -g hexo-cli

4. 创建一个空文件夹用来存放博客，比如e:\blog
5. 切换路径到e:\blog下，然后初始化博客，输入下面命令：

hexo init

6. 创建博客，运行等等，参考Hello World这篇文章
7. 现在将博客部署到github上，首先你要下载git,安装时一路next就可以（有些博客说要更改选项针对的是旧版的git）
8. 创建github账号，新建仓库，详细的看视频，包括更改_config.yml文件
9. 这一步骤针对的是第一次安装git或者是没有将本地和github连接的。
   1. windows用户鼠标右键打开git bash
   2. 输入

   git config --global user.name "spida"
   git config --global user.email "1183598761@qq.com"
   

   用户名和邮箱根据实际情况填写
   3. 生成SSH Key，我自己是不生成也可以部署成功，但还是生成一下，步骤可以看这篇文章里的click on（这个文章还有讲如何绑定域名，其他的建议不要看）
10. 安装hexo-deployer-git

cnpm install --save hexo-deployer-git

11. 输入hexo d部署到github上

以上就是基本的搭建，下面讲一下yilia主题的安装

---

1. 下载yilia主题

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

2. 更改配置，详细看视频
3. 修改部分配置可以在yilia主题里面的_config.yml中修改

现在讲一下我踩的几个坑

首先讲一下点开所有文章中模块缺失的问题，将npm换成cnpm。注意要求是要在博客的根目录下进行操作，我一开始没注意，在yilia下操作。修改配置的时候注意第一行一定要顶格，还有缩进一定要对。

我在博客中安装一个访问量的统计
在themes\yilia\layout_partial\footer.ejs添加

<script  async  src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后安装标签

<footer id="footer">
  <div class="outer">
    <div id="footer-info">
        <div class="footer-left">
            &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
        </div>
        <div class="footer-right">
            <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
        </div>
    </div>
    <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

    <span id="busuanzi_container_site_uv">本站访客数<span id="busuanzi_value_site_uv"></span>人次</span>
  </div>
</footer>


<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

这是我添加标签的位置可以参考一下，效果就是我的博客的效果

我还安装了gitment评论插件，gitment如何安装网上有很多教程，我这里说一下我遇到的问题，主要就是点击初始化时候登录会报Object ProgressEvent错误，上网查了一下找到解决方案，在这里说一下。
打开themes\yilia\layout_partial\post\gitment.ejs将

<link rel="stylesheet" href="//imsun.github.io/gitment/style/default.css">
<script src="//imsun.github.io/gitment/dist/gitment.browser.js"></script>

更改为

<link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">
<script src="https://jjeejj.github.io/js/gitment.js"></script>

或

<link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">
<script src="https://www.wenjunjiang.win/js/gitment.js"></script>

这就是我安装的几个功能，其他功能以后再慢慢安装，到时候踩到坑了再来更新这篇博客。