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

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

# 一：软件下载

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

# 1. 下载安装 ruby installer

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

# 2. 下载 rubygems

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

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

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

# 二：网站构建

软件下载有点耗时，在此期间我们可以挑选一个自己喜欢的主题来构建自己的博客

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

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

我们找到作者的源代码块，点击右上角的 fork 可以将它拷到我们自己的 github 中，顺便 star 一下支持作者

拷到自己的 github 后，我们点击 setting，先进行改名，推荐：你的用户名.github.io

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

# 三：运行 jekyll 生成静态网页

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

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

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

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

图像也可以换，根据 img 的文件夹的图片名称可以换成你想要的，名字要一致，img/posts 主要放置的是笔记中的图片，可以删掉，以后写笔记的时候想插入图片需要把图片路径设置成 img/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 是我用来做试验的账号）

# 七：上传到 github

所有内容修改完成后可以将自己的代码上传到 github，atom 也提供此功能。

当你所有的内容修改完毕后，atom 右侧 unstaged changes 会显示你修改了什么内容，点击 stage all, 所有的会移动到下方的 staged changes.

在 commit message 中随便写点东西点击下方按钮，在 push 出会出现一个待上传的指令

ctrl + 左键点击 push，使用 force push 功能可以将自己修改过的内容传到 github 服务器上，这样输入你的 github 域名就可以打开自己的网页了，后续的更改同样采取此操作。

# 参考链接

https://github.com/leopardpan/leopardpan.github.io

https://www.jianshu.com/p/9f71e260925d

https://www.bilibili.com/video/BV14x411t7ZU?t=537

转载请注明转载请注明：周小钊的博客 - 利用 github 和 jekyll 构建个人博客

blog