GitHub Pages+Jekyll搭建个人博客

大家好,我想死你们啦~

  博客初步搭建完成,关于Github pages+Jekyll搭建博客的方法已有很多大牛写过相关文章,按照“惯例”,现将搭建过程中使用到的资料整理如下,作为第一篇博客(三年之后回来看,此站总共一篇博客[doge]):   

简易教程

  1. 如何搭建一个独立博客——简明 GitHub Pages与 jekyll 教程

  2. 利用GitHub搭建个人网站

  3. 黄金搭档:Jekyll 与 Github 搭建网站

  4. 重生@Jekyll+GitHub Pages

  5. Jekyll搭建个人博客

  6. Github Pages + Jekyll 独立博客一小时快速搭建&上线指南

  7. 利用Jekyll和Github搭建免费的个人Blog

  8. 使用jekyll和hexo搭建免费博客

  9. Jekyll + Github Pages

  10. hexo-模板1

扩展1-相关网站生成工具

  1. Jekyll官方网站

  2. 博客搭建可行性方案( jekyll , hexo , Wordpress )

  3. FarBox、Jekyll、Octopress、ghost、Hexo等主流博客生成器特点,该选择哪个?

  4. Hello World! Why I Chose Hexo vs Jekyll/Octopress vs WordPress

  5. 11个最流行的静态(博客)网站生成工具

  6. 知乎-FarBox、Jekyll、Octopress、ghost、marboo、Hexo、Medium、Logdown、prose.io,这些博客程序有什么特点?

  7. GitHubHelp-Using Jekyll as a static site generator with GitHub Pages

扩展2-网站基础知识

  1. web_backend_basic课程

  2. 动态博客和静态博客-从Tcp-socket谈起(dev)

  3. 伯乐在线翻译-静态网站生成器将是下一个大事件

  4. 7 Reasons NOT to Use a Static Site Generator

  5. 简书-做一个网站真的有那么难吗?

  6. 搭建个人博客,你需要知道这些

  7. 晴月浩雪站-静态博客简介

  8. 静态页面与动态页面的区别

  9. 动态网站与静态网站的区别详解

  10. Static Vs Dynamic websites – what’s the difference?

  11. Static vs. Dynamic Websites: What are They and Which is Better?

  12. github pages建站相关

扩展3-好的博客(在github站点中寻找得到)

  1. 廖柯宇的博客-漂亮

  2. 经典模板-hexo-theme-next

  3. Xiaolei’s Wiki - 个人知识管理案例

  4. 亢志军个人博客-酷炫的主题 github -> 来源于leopard模板

  5. 刀刀亮的博客 github -> 来源于jekyll light theme

  6. Louis的iOS开发小站 -> 与以上两个模板类似

  7. 严俊羿-Web工程师,自由职业者-个人主页-极简-界面美观 不愧是吃这碗饭的

  8. 陈俊的网:浮生志

  9. 天外天-内容精彩

  10. 如是我聞-索引合理

  11. P_Chou Tech Space-建站教程-内容美观

  12. 楷图-极简外观

  13. likebeta’s Blog-美观

  14. 外观马马虎虎-打码改变人生

  15. CCM Blog-有些干货

  16. 刘松个人博客-汉英双版-干货

  17. Joway’s Blog - 美观

  18. 饮冰-干货

扩展4-编写博客

  1. Markdown 语法快速入门手册 W3Cschool

  2. Markdown 语法说明 (简体中文版)

  3. 在 Vim 里为 Markdown 文档展示导航窗格

  4. Markdown编辑器之比较

  5. StackEdit编辑器

  6. 作业部落编辑器

扩展5-Jekyll安装报错

Configuration file: D:/GitWorkSpace/slowlythinking.github.io/_config.yml
Deprecation: The ‘gems’ configuration option has been renamed to ‘plugins
‘. Please update your config file accordingly.
Dependency Error: Yikes! It looks like you don’t have jekyll-sitemap or 
one of its dependencies installed. In order to use Jekyll as currently 
configured, you‘ll need to install this gem. The full error message from 
Ruby is: ‘cannot load such file – jekyll-sitemap’ If you run into trouble,
you can find helpful resources at https://jekyllrb.com/help/!
jekyll 3.5.1 | Error: jekyll-sitemap

法1-去除jekyll-sitemap -> 导致“关于我”选项无法打开

GitHub 第一坑:换行符自动转换 -> 解决以上问题

尝试去除背景图片模糊的问题 -> 将images文件夹中的背景图片换了多张仍无法解决,后搜索含有background-cover的文件,发现了main.css中定义了背景图片的显示状态,其中有以下代码:

.panel-cover–overlay {
display: block;
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(68, 68, 68, 0.6);
background-image: -webkit-linear-gradient(-410deg, rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9));
background-image: linear-gradient(140deg,rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9)); }

就在这里定义了背景图片的渐变(最后三行),导致图片模糊,但是去除这三行之后首页文字位置又不对了,再次查找,发现在_includes文件夹下的side-panel.html文件中有以下语句:

    if site.cover_color
    <div class="panel-cover--overlay cover-"></div>
    else
    <div class="panel-cover--overlay cover-disabled"></div>
    endif

于是发现问题出在cover_color这个变量上,到_config.yml文件中将cover_color变量的值由clear改为空(什么都不写),图像模糊的问题得到解决。

整理这么多网址好累,你们有谁要是没两天倒闭了,一定要赔我钱! 我先倒闭就算了(逃


转载请注明原地址,魏鑫燏的博客:http://slowlythinking.github.io 谢谢!

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,请量力而行

打开支付宝扫一扫,即可进行扫码打赏哦