前端白痴尝试搭建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图了。假装自己做的很好看。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,734评论 25 709
  • 我住长江头,君住长江尾。日日思君不见君,共饮长江水。 此水几时休,此恨何时已。只愿君心似我心,定不负相思意。
    冰心兰草阅读 2,981评论 0 0
  • 主人公有一种能力,只要他想知道别人不愿意说出来的秘密,他就能从他们的影子那里得知。他用这种能力让伊凡从童年的枷锁中...
    jiu小楠阅读 1,690评论 0 2
  • 今天开始,美国改了冬季时间,纽约和北京的时差变成了13个小时。早晨的时候,一时间没反应过来,几个十点钟的打卡都险些...
    午后窗台的猫阅读 767评论 0 0
  • 仰望星空的时候,经常会有个疑问:满天的星星会不会像沙子一样,而地球只是沙中之沙呢?网上流传过一个非常经典的FLAS...
    9c42a2489e1d阅读 5,692评论 0 3