前端白痴尝试搭建GitHub Page的一天

动机

我在寻觅下一个写笔记的地方，在下一个地方选好之前，还会在这里写。

大致流程

选地方

上午我研究了一番写博客去哪里好，由于自己肯定不会搭自己的网站，也暂时不想花钱租域名，最终看中了GitHub Page，而且网上教程看起来很多。

自己试试

GitHub账号我是有的，clone一个仓库也不陌生。原来我打算找到一个项目fork过来套着用，可是看来看去没有找到称心如意的项目。我的期望是，功能极简，主页展示个人信息+文章列表（可以有摘要），每个页面除了文章之外只有返回键，文章占的宽度不要像简书这么窄，代码块一定一定要漂亮而且是等宽字体（这是底线），其余字体简洁易读即可。最后突然想试试自己搭一个会如何？我能走到哪一步？

官方文档

我先看着jekyll的官方文档，自己搭好了文件夹的结构，对 index.html、default.html 和 _config.yml 做了最简单的配置。

内容堆上去成功

由于希望在自己电脑上生成预览一下，所以开始配环境：ruby, ruby dev-kit, 以及jekyll。调试了一会并push上去，页面生成成功啦！

代码块高亮

下一个想收拾的地方是代码块高亮。开始不知道 GitHub 现在只认 rouge ，所以还在按照之前的教程配 Pygments。后来还发现代码高亮还要一个 css 文件，看得我一头雾水，到处找教程，扒拉人家的项目，最后才弄明白相关设置应该怎么写。其实也就是在 head 部分加上一句话，_config.yml 里面开一下。尝试生成，最后的错误集中在 Pygments 没有配好，可是我分明配好了呀。看 stackoverflow 的解决方案都是再装一下 Pygments， 我还是不行。后来发现要用 rouge，就换掉了，根本没有用
Pygments，项目也 clean 过了， 可是还是提示我 Pygments 没有配好，我满头黑线。

后来重启了一下电脑，又调试了一会，电脑上莫名其妙能生成了，虽然没有高亮效果。推到 GitHub 上的版本也终于有代码块的高亮了。谢天谢地。

另一个 css

突然发现行内的代码没有反应，右键检查一下，是有一个 div 的，但是没有底色、框框，也没有高亮（没写语言，不亮是正常），而且我尽管 syntax.css 复制别人的，即便是代码块也和别人字体不一样，不好看。经人生导师指点，可能还有另外的 css 在控制这个，我找来这个人的项目，拉了他“检查”里面看到的一个 css 到我这里，代码块竟然变得和他的一样好看了！这运气真是神，我不知道这个 css 写的什么，竟然就能用了……习惯了拿人家代码就一定跑不通+不会调的我真是受宠若惊。

卡住

现在的页面除了死死地卡着边，图片也不会居中之外，其实真的是可以看的，并不算丑。我还想把网页往中间缩一下宽度，对图片再设置居中+调整大小，这样应该就很好看了。可是目前的我像咸鱼一样，毕竟什么都不懂，玩到这里已经够意思了，下面再想做的话就要认真学习一点前端了。

我试了一下把浏览器缩窄，然后居中，假想两边是白色的背景，还是很好看的。不信，我P一张：

截屏P的效果图.png

我不会告诉你原来是这样：

截屏原图.png

哈哈哈哈最顺手的事情还是P图了。假装自己做的很好看。

我真是好可爱呢，虽然有点傻。(≧▽≦)