关于用Jekyll在Github Pages建站的一些补充

本文来源:Binpedia|胡说,欢迎大家关注!

最近几天一直在给站点添加各种新功能,在这里给大家分享一些BY的教程中没有提到过的。如果你想从头开始学习,建议还是先去BY在上的教程学习用Jekyll在Github Pages上免费建站。

当然了这里的免费是指建站免费,如果你想拥有一个属于自己的域名的话可以去GoDaddy或者阿里云购买。要注意的是如果用阿里云的话需要有实名认证,所以你如果在国外身份证又不在身边,或者恰巧过期的话那还是果断选择godaddy吧。国内的同学还是选阿里云比较方便,虽然要实名认证但过程还是很方便的。前两天一早起来发现站点怎么也链接不上,本来以为是dns设置里面ip地址过期了,结果折腾了半天发现是没有实名认证

好了,接下来是我给自己网站上添加的新功能或者是对BY教程的一些额外补充。

留言板


Disqus

Disqus其实在BY的教程中已经讨论过,只不过我在实际应用中Disqus并没有显示出来。经过一番研究我发现_config.yml里面的disqus_username填的并不是username而是shortname。这里要注意username并不一定是shortname,首先你要去Disqus的admin页面添加你的站点。添加完成后就可以在这个页面找到你的shortname了。把这个shortname填进刚才说的disqus_username里面应该就可以了。

LiveRe(来必力)

在BY的教程中有提高过Gitalk,我实践了一下感觉不是很好用,毕竟这个Gitalk的本来目的是给广大程序猿交流的,每篇文章等于要重新添加一个issue,看着挺麻烦,对我这种非程序猿来说也并不太适用。既然Disqus国内访问不了,我就决定采用双留言板模式,以Disqus为主,LiveRe(来必力)为辅。选来必力的原因是他家覆盖了几乎全部中外社交网站,比如微信,微博等(前提是你要用他家的中文页面登录,一开始我用了英文页面也只显示了facebook,twitter等登录方式)。

登录进去以后一开始会问你选择一个版本安装,City版是免费的,Premium版是收费的。那我们自然选择City版安装了。最后就可以看到代码了。在代码管理里面直接复制粘贴一般网站下的代码到_layouts文件夹下的post.html里就可以了。如果你也想用双评论系统的话那就把这段代码粘贴到disqus那段代码的下面。

image

文章分享到社交网络


3月26日更新:

如果大家通过这篇文章实现https小绿标的话可能会发现这段百度分享上面的代码不work了,原因很可能是因为百度分享的这个网址竟然不是https。后来我网上有找了一些能实现类似功能的网站,发现这些国内网站几乎都不带https,由此可见安全性能令人堪忧啊。后来放狗搜了国外网站,搜索结果第一个是这家叫AddToAny的网站,带着可爱的小绿标,里面也支持微博和微信,代码导出方法和百度分享类似,把这段代码同意复制到_layouts文件夹下的post.html里就可以了。几分钟后再刷新页面这些分享按钮就又出现啦~当然如果您的网站不带小绿标百度分享还是可以用哒。

一般网页上的文章通常看完以后有一些各大社交网站的logo,点一下进去就可以把这篇文章分享给大家。实现这个功能很容易,在这里为了图方便我直接用了百度分享。第一步是代码功能选择,一共有三个选项:页面分享功能,图片分享功能和划词分享功能。大家按照自己的喜好选就好,我这里就选了页面分享功能,然后点击:下一步 页面按钮设置。在这里大家选好自己喜欢的样式,然后在调整按钮顺序里面把那些平时自己常用的社交网站选出来即可。最后点”直接复制代码“,同意把这段代码复制粘贴到_layouts文件夹下的post.html里就可以了。大家想一下应该贴在什么位置?没错,应该是在disqus和LiveRe代码的上面。

image

RSS


首先在根文件夹下看一下有没有feed.xml,如果没有的话就新建一个,输入代码见链接:feed.xml

然后在_layouts文件夹下的page.html下插入下面代码。里面你可以看到一系列社交网站的设置,你插入的顺序就决定了页面中图标的显示顺序。

记得在_includes文件夹下的footer.html下加入同样代码,这样在尾页和侧边栏就会显示相同的图标。

最后别忘了在_config.yml里把rss的指改为true。


# SNS settings

rss: true

如果成功的话你应该在你的域名/feed.xml里看到rss的系统显示了。rss订阅我用的是Feedly,在里面直接输入你的域名/feed.xml就算是订阅成功。阅读工具我用的是Reeder,在ios和mac里都有应用,界面美观而且非常好用。

image

邮箱


与rss一样,邮箱的设置大致也是在page.htmlfooter.html在各种社交分享区域下插入如下代码,插入顺序也决定了那些图标的顺序。

_config.yml里# SNS settings区域也加入你的邮箱地址:


# SNS settings

email: "你的邮箱地址"

这样完成后你的社交图标就多了两个很实用的功能,rss和email。rss可以让大家很方便地订阅你的博客,email的图标一点就可以直接弹出邮件应用写邮件,不用再复制粘贴你的邮箱地址了。

域名邮箱创建

有了域名后还可以为自己创建属于自己的域名邮箱,比如我这里的[email protected],设置起来很方便。首先你要选择一个邮箱服务商,国内国外有很多。这里我选择了腾讯企业邮箱的免费版,主要是因为可以绑定微信,这样来邮件直接就可以在微信里看到,不用自己额外在邮件应用里单独设置这个邮箱,毕竟这个邮箱大家平时也不会经常用到。

首先进腾讯企业邮箱立即开通免费版,然后根据页面的提示做就行了。设置完成后需要去你的域名服务商添加两条解析,如下所示,当然我记得腾讯里面会有提到。

image

完了以后选择“添加成员”在如下页面设置账号,密码等就好了。最后登录进邮箱以后可以选择绑定微信,这样以后收发邮件都可以在微信里面完成了。是不是很方便呢?

image

神器的https绿标


这两天一直在折腾https绿标的事情。最后的效果如下图所示,看上去是不是很专业呢?

这个是带了小绿标的:


image

这个是没带小绿标的:


image

为什么要搞https呢?网上有很多文章,简单来讲就是比起http来说https要安全,减少网站被坏人利用的风险。

HTTP 三大风险:
窃听风险(eavesdropping):第三方可以获知通信内容。
篡改风险(tampering):第三方可以修改通信内容。
冒充风险(pretending):第三方可以冒充他人身份参与通信。
HTTPS 解决方案:
所有信息都是加密传播,第三方无法窃听。
具有校验机制,一旦被篡改,通信双方会立刻发现。
配备身份证书,防止身份被冒充。
转自阮一峰的文章

实现https主要是给网站添加ssl证书。由于我们用的不是本地服务器,而是建立在Github Pages上面,所以传统自己添加ssl证书的方法,比如在Let's Encript上面自己添加证书并不适用于我们。阿里云和百度云最近似乎也取消了免费证书的选项,付费证书虽然更加安全,但对于我们这种小博客网站来说高额的费用令人望而却步。

image

经过一番研究,我发现Cloudflare可以免费添加ssl证书,效果完美,网站主要的CDN功能也同样免费,海外感觉加速明显,国内访问速度一般,但起码没有被墙。

利用Cloudflare添加SSL证书

首先前往Cloudflare网站,注册,添加你的站点,然后你的DNS解析信息就可以在Cloudflare上面看到了,如下图。这里如果你的橙色云图标亮起说明这条域名解析已经加入到Cloudflare云加速了。

image

然后是很关键的一步,仅仅把网址加到Cloudflare是不够的,你需要把DNS nameserver也搬到Cloudflare。Nameserver的地址Cloudflare会提供给你,我的两个nameserver是这样的,你的可能会不一样,但肯定是work的。

image

这个Nameserver是需要你去域名提供商去更改。以阿里云为例,在管理控制台,域名服务域名列表中点“管理”,然后在新跳出的页面中选择DNS修改,把刚才Cloudflare给你的那两个DNS地址输入进去就可以了。阿里云会提示可能需要24小时才能生效,但我改好以后几乎是立即生效的。如果没生效的话也不用改回去,等等就好了。

image
image

不管生没生效,可以直接去Cloudflare添加ssl证书了。Cloudflare页面最上面会有很多蓝色小方块,点击Crypto,在SSL里选择Full,这时候Cloudflare就开始为你生成ssl证书了,这大概要几分钟左右,等到status变成绿灯并显示active certificate就说明证书已经做好啦。

image

这时你可以尝试一下浏览你的网页,确定所有网页都能顺利打开的话就可以选择“Always use HTTPS”并且enable HSTS了。这两个选项都在刚才制作ssl证书的那个Crypto页面里,往下拉就可以看到了。

image

这样基本上https小绿标就做好啦,是不是很简单呢?小绿标看着就赏心悦目,逼格也高哈哈。

当然了Cloudflare的强大不仅仅在于CDN和制作ssl证书,大家有兴趣的话可以学习一下Cloudflare的其他功能,这里就不一一阐述了。

关于利用Netlify添加Let's Encrypt的SSL证书

最后想提一下Netlify,我一开始其实用的是Netlify制作Let's Encrypt的ssl证书。过程也很简单,Netlify可以把Github Pages的网页搬到Netlify上面,同时生成https小绿标。可是后来我发现用他家制作的证书某些页面总是在Chrome里面打不开,Safari就可以,考虑到Chrome应该是很多人的主力浏览器,网页打不开这种事情是不能容忍的,最后就放弃了Netlify。大家如果有过同样经历并且解决这个问题的欢迎在底下留言传授经验。如果大家不想折腾的话还是用Cloudflare吧,效果非常完美。

好啦今天就先说这些,关于Jekyll建站的小贴士还没有结束哦!

如果您有什么疑问或者文章哪里有问题的话请及时提出,当然了如果这篇文章对您有帮助,欢迎打赏Binpedia!谢谢大家

你可能感兴趣的:(关于用Jekyll在Github Pages建站的一些补充)