利用github和jekyll构建个人博客

2020-07-13 本文已影响0人周小钊

我们知道，一个网站要能够在任何地方都能够被访问，那么需要部署到服务器上，但是对于我们来说，构建服务器的花销是巨大的。幸运的是，github就提供了这样的功能，只要按照github格式要求，新建一个仓库，把你的网站代码上传到里面，你就有一个自己的免费网站了。

废话不多说，让我们利用jekyll和github来构建自己的博客吧！！

一：软件下载

jekyll支持mac、linux、windows等，鉴于大部分童鞋使用的是windows系统，那我就用windows构建

1.下载安装ruby installer

https://rubyinstaller.org/ ，点击相应的版本进入下载页面即可下载

ruby installer

2.下载rubygems

https://rubygems.org/pages/download ，可以选择相应版本下载

rubygems

下载完成后解压到你想放的位置，比如我放在了“D:/soft/rubygems3-1.4”下,打开cmd用命令执行

D:
cd soft/rubygems3-1.4
ruby setup.rb
gem install jekyll

二：网站构建

首先你要到GitHub上注册一个账号,例如jungleblack007（用户名可以在设置里改），创建完成后可以去jekyll主题网站选择自己喜欢的主题，然后在这个主题基础上修改到满足自己需求的博客.

我选择的是潘柏信的博客主题，因为这个主题有中文说明，而且有个B站up主对该主题进行了详细的操作，适合我们入门，先让我们看一下该博客的外貌！

https://leopardpan.cn/

我们找到作者的源代码块,点击右上角的fork可以将它拷到我们自己的github中，顺便star一下支持作者。
拷到自己的github后，我们点击setting，先进行改名，推荐：你的用户名.github.io

rename
然后下拉找到GitHub Pages，source选择master branch，我已经点了所以看不到，然后上方出现一个网址，这个就是你的域名了，可以先看看和原博客有没有区别

三：运行jekyll生成静态网页

把别人的主题fork以后，我们可以利用atom把主题代码转到自己的电脑上

打开atom，按ctrl+shift+p，输入github clone，选择要克隆的网址和要保存的路径。点clone即可

clone完成后，就会有如下界面

修改_config.xml,把一些信息修改为自己的

图像也可以换，根据images的文件夹的图片名称可以换成你想要的，名字要一致，images/posts主要放置的是笔记中的图片，可以删掉，以后写笔记的时候想插入图片需要把图片路径设置成images/posts/XXXX。赞赏功能的图片在paying里，需要赞赏就改成自己的二维码，不需要赞赏就删掉new-old.html里的所有内容

此时，我们可以用jekyll来生成一个静态网页查看

D
cd data/git
bundler install
bundle exec jekyll serve

http://127.0.0.1:4000 这是我们生成的一个静态页面，浏览器输入即可查看

可以看到背景和个人信息都已经改为了自己的，说明修改成功！

四：写一篇自己的博客

jekyll比较好的一点是可以识别笔记文件，我们可以把写好的文件放到_post文件夹下，然后在md文件前面加一串代码。

写好后可以再运行bundle exec jekyll serve查看自己写的博客是否已经能在静态网页上查看

五：添加网站统计功能

我们可以给自己的网站添加统计功能，在这个主题中也支持该功能，推荐使用百度统计，首先注册账号

注册结束后添加新的域名统计

添加结束后点击管理—代码获取，会看到一串代码。

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?60e2d4433f4c77b3ae5db5cac1b62829";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

?后面的60e2d4433f4c77b3ae5db5cac1b62829可以粘贴替换掉_config.yml文件中的百度统计

这样统计功能就添加上了

六：添加评论功能

评论功能也可以根据自己的喜好添加，我添加评论功能使用的是来必力

注册账号后添加网页，与百度统计类似，添加结束后点击管理界面-代码管理，可以看到一串代码

<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC81MDkzOC8yNzQyMA==">
<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版安装代码已完成 -->

将该代码复制，替换掉_include/comments.html中的全部内容即可（这里的bioinformatics-rookie.github.io是我自己的博客，文中出现的jungleblack007.github.io是我用来做试验的账号）