我们知道,一个网站要能够在任何地方都能够被访问,那么需要部署到服务器上,但是对于我们来说,构建服务器的花销是巨大的。幸运的是,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 构建个人博客