GitHub+Jekyll搭建个人博客详解

2019-04-09 | 阅读：次

工具

github
jekyll
百度统计
来比力评论系统
不蒜子浏览量统计

搭建过程

网站托管

直接使用GitHub提供的GitHub Pages功能，展示博客的页面。

首先需要到GitHub上注册账号，例如我注册的是jacky-wangjj；
点击New repository -> 输入仓库名称（格式为<用户名>.github.io，如jacky-wangjj.github.io）-> 点击Create repository；

Jekyll安装

这里讲解的是Windows下的安装步骤。

首先点击下载安装Ruby installer，我这里使用的是Ruby 2.3.3；
然后下载DevKit，我这里使用的是DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe；
检查Ruby installer是否安装完成，win+R打开命令行，输入命令出现版本信息说明安装成功；
```
ruby -v
```
将DevKit解压到指定目录，如：D:\DevKit。然后命令行进入该目录cd D:\DevKit，执行：
```
ruby dk.rb init
ruby dk.rb install *
```

安装jekyll，输入如下命令：

gem sources --remove https://rubygems.org/
gem sources -a http://gems.ruby-china.com/
gem sources -l
gem install jekyll

测试jekyll环境新建一个blog：
```
jekyll new blog
```
启动服务：进入目录输入
```
jekyll serve
```
查看页面：浏览器访问localhost:4000

下载博客模板并修改

我这里直接使用的leopardpan修改过的模板，按照自己需要进行修改即可。

博客目录结构如下：

.
├── _config.yml         #配置信息
├── _includes           #部分子模块
├── _layouts            #自定义html显示
├── _posts              #博客上传目录
├── _site               #jekyll生成的HTML文件
├── 404.html
├── about.md            #关于我
├── archive.html
├── css                 #css样式
├── feed.xml            #RSS订阅相关
├── rss.xsl             #RSS订阅相关
├── images              #图片资源
├── index.html
├── js                  #js文件
├── README.md           #项目介绍
└── tags.html

修改_config.yml文件；
添加百度统计；
注册百度统计账号，新增网站 -> 输入网站域名：jacky-wangjj.github.io；网站首页：https://jacky-wangjj.github.io -> 确定；

添加来比力评论；
注册来比力账号，关联网站的URL；
隐藏来比力评论系统广告

 <!-- 来必力City版安装代码 -->
 <!-- 屏蔽来比力广告 -->
 <style>
     #taboola-livere { display: none;}
 </style>
 <div id="lv-container" data-id="city" data-uid="MTAyMC80MzYzMS8yMDE3MA==">
     <script type="text/javascript">
         (function(d, s) {
             var j, e = d.getElementsByTagName(s)[0];

             if (typeof LivereTower === 'function') { return; }

             j = d.createElement(s);
             j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
             j.async = true;

             e.parentNode.insertBefore(j, e);
         })(document, 'script');
     </script>
     <noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
 </div>
 <!-- City版安装代码已完成 -->

添加RSS订阅；
使用不蒜子统计浏览量；

提交代码到GitHub

将修改完成的博客代码提交到github仓库；
添加博客时可将编写好的markdown博客文件放入_posts目录，以特定格式命名：2019-04-09-blog’s name.md，最后提交至GitHub；

编辑markdown文件

我这里使用的是IDEA + MultiMarkDown插件，不用装太多其他软件就可以编辑MarkDown文件；