jekyll_jekyll的静态页面如何修改主页模板 - CSDN
  • Jekyll 安装、使用方法与卸载

    千次阅读 2015-02-11 15:00:03
    Jekyll 安装、使用与卸载方法最近用Jekyll在Github上架网站,前后花了几天时间深入了解一下Jekyll,现在将Jekyll的安装、使用与卸载方法分享出来。Jekyll 是一个简单的网站静态页面生成工具。由于是用Ruby语音编写的...

    Jekyll 安装、使用与卸载方法

    最近用Jekyll在Github上架网站,前后花了几天时间深入了解一下Jekyll,现在将Jekyll的安装、使用与卸载方法分享出来。

    Jekyll 是一个简单的网站静态页面生成工具。由于是用Ruby语音编写的,所以在Windows系统上配置起来还是稍微有点繁琐的。主要步骤如下:

    1. 安装Ruby:windows系统上使用rubyinstaller,猛戳我下载。根据官网体系下载相关版本。
    2. 安装Ruby DevKit:在上面那个官网的下方有下载地址。
    3. 安装Jekyll

    安装方法

    从rubyinstalll下载安装包并安装到某个磁盘中,如E:\Ruby193,勾选上安装界面的所有选项(不要问我为什么);把下载的DevKit解压到某个目录,比如E:\devit

    注意:安装DevKit时最好在安装目录新建一个文件夹devit然后,运行安装程序选定该文件夹

    git bash 环境进入devit安装目录,运行如下命令

    cd /E/devit
    ruby dk.rb init
    

    来生成一个config.yml配置文件,该配置文件包含了前面的Ruby的安装目录E:\Ruby193(系统会自动帮你寻找Ruby的安装目录,cat config.yml可以看到该文件里面已经写入了ruby目录的绝对路径)。

    接下来运行ruby dk.rb install

    整个过程图示

    最后运行命令gem install jekyll结束整个流程

    检测是否安装成功jekyll -v

    简要介绍

    在谈使用方法前有必要简单介绍一下什么是Jeklly、以及Jeklly的工作原理。这些核心的概念能解决你的一些疑惑,帮助你更深入的理解,也为后面学习使用模板使用打基础,不至于在出现错误的时候漫天的debug

    如果你只是想要简单了解或知道怎样使用jeklly,那么此部分可以跳过。

    Jeklly是什么

    Jekyll is a ruby gem you install on your local system. Once there you can call jekyll --server on a directory and provided that directory is setup in a way jekyll expects, it will do magic stuff like parse markdown/textile files, compute categories, tags, permalinks, and construct your pages from layout templates and partials.

    Once parsed, Jekyll stores the result in a self-contained static _site folder. The intention here is that you can serve all contents in this folder statically from a plain static web-server.

    Jeklly是一个静态站点生成器,它会根据网页源码生成静态文件。它提供了模板、变量、插件等功能,所以实际上可以用来编写整个网站。

    Jeklly是怎么工作的

    安装完jeklly后你需要以jeklly可以识别的方式来组织你的目录。

    它希望你使用下面的目录结构:

    .
    |-- _config.yml
    |-- _includes
    |-- _layouts
    |   |-- default.html
    |   |-- post.html
    |-- _posts
    |   |-- 2011-10-25-open-source-is-good.markdown
    |   |-- 2011-04-26-hello-world.markdown
    |-- _site
    |-- index.html
    |-- assets
        |-- css
            |-- style.css
        |-- javascripts
    
    • _config.yml
      配置文件数据

    • _includes
      This folder is for partial views.

    • _layouts
      这个目录主要包含模板,你可以为不同的页面(page)使用不同的模板。

    • _posts
      这个目录包含你的文章(post),且必须按照格式 @YEAR-MONTH-DATE-title.MARKUP@来进行命名

    • _site
      这个目录将被用来存放Jekyll生成的静态网站。

    • assets
      这个目录不属于Jekyll的标准结构。它代表了任何你希望放置在根目录下的目录,并且被Jekyll忽略。

    (read more: https://github.com/mojombo/jekyll/wiki/Usage)

    Jekyll怎样生成最终的静态文件

    1. 收集数据。

      Jeklly扫描posts目录收集文章(post file)作为post对象。然后扫描layout、assets,最后在其他目录中搜索页面文件(pages file)。

    2. 计算数据。

      Jeklly从上面那些对象中提取元数据(连接、标签、分类、标题、数据)并构造出一个很大的site对象来容纳所有的文章、页面、布局和元数据。在这一步中,你的站点简单来说就是一个ruby对象。

    3. 溶解文章和模板。

      Jeklly遍历所有文章(post file)并将它们镶嵌到各自的布局中。溶解过程如下:Jeklly初始化一个Liquid模板,传递一个代表ruby站点对象的散列表和一个代表ruby文章对象的散列表,这两个散列表可以通过模板读取。

    4. 生成输出。

      Liquid模板通过有模板提供的语法得到渲染,最终生成一个静态的表达文件。

    使用方法

    以bootstrap模板为例子简要介绍如何快速搭建起一个站点。

    下载 Jekyll-bootstrap的模板项目到本地目录jekyll

    git clone https://github.com/plusjade/jekyll-bootstrap.git demo
    

    cd jekyll进入目录,jekyll serve启动服务

    打开浏览器,地址栏输入http://localhost:4000/可以看到如下主页面

    主页面

    编写新文章

    通过命令生成新文章

    gdw@GDW-PC /E/Git/demo (master)
    $ rake post title="My first blog"
    Creating new post: ./_posts/2015-02-11-my-first-blog.md
    

    在_posts目录中可以找到该文件,并用Markdown编辑内容。

    也可以直接将编辑好的文章放置到_posts目录中,但一定要在编辑好的文章开头使用YAML Front Matter模板、文章和页面都需要提供YAML Front Matter,这样Jekyll才知道该如何处理你的文章。

    在模板/文章/页面的开头需要提供如下格式的YAML Front Matter

    ---
    layout: post
    category : pages
    tags : [how-to, jekyll]
    ---
    
    ... contents ...
    

    编写新页面

    通过命令生成新页面

    gdw@GDW-PC /E/Git/demo (master)
    $ rake page name="about.md"
    mkdir -p .
    Creating new page: ./about.md
    
    gdw@GDW-PC /E/Git/demo (master)
    $ rake page name="pages/about"
    mkdir -p ./pages/about
    Creating new page: ./pages/about/index.html
    

    卸载Jekyll

    安装配置Jekyll难,卸载却极其的简单。只需一句

    gem unistall jekyll
    
    展开全文
  • Jekyll

    2019-08-07 20:00:19
  • Jekyll主题收藏

    千次阅读 2018-09-28 00:13:43
    从wordpress都现在的jekyll,博客采用的平台及其主题一直处于变更状态。一方面本小子喜爱折腾,另一方面,随着浏览的网页多了,本小子审美似乎也在不断的提升。从开始接触jekyll都现在正式敲定主题,本小子在寻找...

    从wordpress都现在的jekyll,博客采用的平台及其主题一直处于变更状态。一方面本小子喜爱折腾,另一方面,随着浏览的网页多了,本小子审美似乎也在不断的提升。从开始接触jekyll都现在正式敲定主题,本小子在寻找主题的过程了,找到了一些简约、大方、美观的jekyll主题,在这里做一下记录,收藏一下,某天或许要修改模板了,或许可以直接在这些模板的基础上改进。

    项目模板

    Jeklly官网本身采用的就是Jekyll,设计大方美观,不过我不怎么喜欢它页面的配置。灰黑配色虽然很适合在编程时可以护眼,但作为一个网页配色,灰黑我会很慎用它们作为主配色。GitHub上fork该repository的人很多啊。对应中文项目模板为jekyllcn2014-04-16 15_40_35-Jekyllcn

    公司模板

    1. mmistakes/made-mistakes,演示主页,稍微改改应该可以直接作为公司用的模板。
    2. libgit22014-04-15 08_50_20-libgit2

    学术主页模板

    1. jansel.github.io,演示主页 页面元素简约、可以作为学术主页模板

    博客模板

    1. mmistakes/so-simple-theme,演示主页 很简约大方的一个博客模板。
    2. mmistakes/hpstr-jekyll-theme,演示主页 也是mmistakes设计的,很喜欢他的作品,堪称艺术品。
    3. mmistakes/minimal-mistakes,演示主页 不解释,直接看网页截图。
    4. aigarsdz/brume,演示主页,很简洁美观的一个博客主题,也是我现在博客用的模板。前段时间想用该模板在我的master下简历博客分支,结果发现了这个模板还有点问题,然后在brume向aigarsdz提交了个问题,没想到aigarsdz很快就回了,很nice。
    5. Github likebeta,演示主页,页面大方美观,还用了豆瓣API把豆瓣上的个人书单列出了,页面配色也很不错。
    6. tswicegood/travisswicegood.com,演示主页,第5个主题跟这个很相似。
    7. Github luolinjia,设计得很不错的一个博客,作者写作很勤啊。主页
    8. webfrogs.github.com,演示主页,文章排版很好看,之前用过一段时间,后来觉得导航没涉及好,就换成别的了。
    9. mojombo/mojombo.github.io,演示主页,简约风。
    10. liberize.github.com,演示主页 看着还行。
    11. corincole.com,演示主页
    12. [lazywei.github.io],演示主页,简约风。
    13. hexo-theme-raytaylorism Demo2014-04-16 15_31_54-Ray-Lin's world
    14. xguox.github.com
    15. webfrogs,跟yihui.name的一样。
    16. macduff.github.com,原来为自己配置MathJax是找到的一个博客,容器居中应该更好看。2014-04-16 15_48_13-Liquid-Inertia
    17. Poised-flw-blog,Github

    补充三个寻找模板的地方:

    1. Jekyll Theme官方提供的主题模板,上面有很多好看的模板供选择。

    2. Jekyll wiki site,表单上列举了很多采用Jekyll模板的网站,可以在这里面找别人的模板,fork过来就可以用了。

    3. 掌心,在该页,作者提供了几个自己制作的Jekyll主题,其中有几个本小子很喜欢。

    from: https://yongyuan.name/blog/collect-jekyll-theme.html

    展开全文
  • Jekyll中文文档

    2020-02-13 10:45:08
    jekyll中文网: https://jekyll.zcopy.site jekyll中文文档:https://jekyll.zcopy.site/docs/

    jekyll中文网: https://jekyll.zcopy.site
    jekyll中文文档:https://jekyll.zcopy.site/docs/

    展开全文
  • Jekyll.Documentation

    2020-03-29 23:30:03
    share the code about Jekyll
  •  本文中我将介绍一下如何在github上搭建个人Blog(博客),也顺便让我们掌握一下github Pages功能,另外还涉及到Jekyll技术。 ===============================分割线==================================== ...
  • 普通的网页太傻吊,所以想用Jekyll做一个网页便于维护。 以前也没有接触过Ruby。一点点学呗。 Ruby 一种脚本语言 Gem 相当于Ruby中的包,可以调用 Jekyll 一种用Ruby写成的静态网页生成工具 本质上也是一个Gem ...
  • Jekyll目录结构和运行机理

    千次阅读 2017-11-01 15:09:58
    Jekyll使用Ruby脚本根据模板生成静态网页,实现了内容与排版的分离。模板以Liquid标记的HTML文件存放,内容为markdown或者html。正常的Jekyll工程包含以下几个目录:_posts markdown内容 _layouts 网页模板 _pages ...
  • 前段时间根据大佬-纯洁的微笑的文章-技术人如何搭建自己的技术博客,搭建了自己的个人技术博客http://www.qq764424567.top/,就将搭建的过程,以及Jekyll服务器的搭建和启动,总结一下 PS:话说不会Web的程序员搭建...
  • Jekyll是什么 引用自官网: Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态...
  • jekyll的环境在本地电脑安装就可以了,不需要在部署博客的服务器上安装。看后面的流程就明白了,写博客的流程是在本地电脑书写markdown文件,然后编译生成静态web文件。最后是把这些文件上传到服务器上的web容器...
  • 本文新增的Docker知识点有: Dockerfile中VOLUME指令的使用 Dockerfile中WORKDIR指令的使用 docker run中--volumes-from选项的使用:使一个容器的目录挂载到另一个容器中 ... 一个镜像安装了Jekyll及其他
  • Windows10下搭建jekyll环境

    千次阅读 2018-10-31 10:23:17
    Win10下安装jekyll搭建个人博客 前言 几年前看到网上大神自己搭建的个人博客网站,就想过搭建一个属于自己的个人博客网站,为此还专门去研究了建站所需技能,但是购买了域名和云虚拟主机后由于其它事情又一直放着...
  • jekyll-admin 是一个 jekyll 插件,为用户提供了传统 CMS(内容管理系统)风格的图形化界面来创作内容和管理 jekyll 网站。该项目分为两部分。基于 Ruby 的 HTTP API 处理 jekyll 和文件系统的操作部分,以及在这个 ...
  • jekyll博客主题 作为程序员,我整理并收集了大量研究成果,而我的问题一直是寻找一个存储所有研究成果的地方。 我有一段时间想过杰基尔 ,但是进入它似乎总是那么艰巨。 经过几天的配置,我能够创建一个Jekyll工作...
  • jekyll _config timezone

    千次阅读 2018-12-14 13:21:21
    新博客写起来没有csdn顺手,写完md复制,push到repo...但是放到jekyll中,jekyll serve之后,文章却没有显示出来。 一番测试之后发现,把时间修改为10个小时之前就可以显示出来。   其实也有人遇到了这个问题:...
  •  本文中我将介绍一下如何在github上搭建个人Blog(博客),也顺便让我们掌握一下github Pages功能,另外还涉及到Jekyll技术。 ===============================分割线==================================== ...
  • 在本文中,您将学习如何构建Jekyll站点并通过SSH连接到我的服务器并进行部署。您将看到完整的解决方案,作为奖励,您将学习如何在页脚中显示“提交ID/内部版本号”。 直到现在,我博客的源代码都在Bitbucket上,...
  • 为什么用hexo代替jekyll

    万次阅读 2016-09-22 11:15:37
    一开始我用的是jekyll,然后我有了那句经典的感受,那句话是从入门到放弃,啊,多么痛的领悟!下面我来扒一扒:官网,那个色调看着很伤眼睛啊,一个docs看下来,我是眼泪往下留啊,hexo的暖色调就像天使,下面放图对比...
  • Jekyll博客添加小功能

    千次阅读 2018-07-31 00:09:47
    1.关于Jekyll本身插件的安装 一共三种方式: * 在根目录下新建_plugins文件夹, 然后把对应的*.rb插件文件放进去就行了; * 在_config.yml文件中增加一个gems关键字, 然后把要引用的插件用数组形式存储其中即可; * ...
1 2 3 4 5 ... 20
收藏数 5,367
精华内容 2,146
关键字:

jekyll