美文网首页mylsGit & GitHubGitHub上有趣的资源
通过Github Pages和Jekyll搭建个人博客

通过Github Pages和Jekyll搭建个人博客

作者: Jason_Yuan | 来源:发表于2015-06-24 14:27 被阅读9724次

    目录###

    1. 什么是Jekyll ?
    2. 使用静态网站生成器的好处
    3. 环境搭建
    4. 主题


    1. 什么是Jekyll ?

    Jekyll
    • Jekyll 是目前非常流行的静态网站生成器(static website generator)。静态网站即只包含HTML, CSS 和 Javascript
    Jekyll(raw_text_files, templates)
    {
        return Beautiful_web_pages;
    } 
    
    • 不同于WordPress, Ruby on Rails, CakePHP, Flask等这些需要web server的复杂应用程序。Jekyll不依赖于数据库或CMS。所以最适合用来建立个人博客,个人portfolio等等
    • Github Pages即靠Jekyll实现的

    2. 使用静态网站生成器的好处

    • 轻量级网站,响应速度快
    • 网站更安全,无数据库,无动态数据
    • 无需通入过多精力维护

    3. 环境搭建

    本文只说明在Mac上的实现过程

    第一步 安装 Jekyll
    • 首先打开terminal,输入
    jason: ~ $ gem install jekyll
    
    • 如果提示错误,一般是读写权限问题,可尝试sudo,然后根据提示输入密码
    jason: ~ $ sudo gem install jekyll
    
    • 输入jekyll -v,确认安装成功。若成功会提示版本信息,例如
    jekyll 2.5.3
    
    第二步 创建 Jekyll 项目
    • 首先cd到你想创建项目的目录下,比如我想在桌面创建
    jason: ~ $ cd Desktop
    
    • 例如我想创建一个项目,叫Jason_Blog
    jason: ~/Desktop $ jekyll new Jason_Blog
    
    • 成功会收到提示信息
    New jekyll site installed in /Users/boyuan/Desktop/Jason_Blog.
    
    • Jason_Blog文件夹内容如下


      Jason_Blog
    • _config.yml 是配置文件,最为重要,包含了所有配置信息

    • _includes 文件夹包含了将被反复利用的文件,比如footer,header

    • _layouts 文件夹包含了主页面的排版布局

    • _posts 文件夹将包含所有的日志文件,Markdown格式

    • Jekyll为我们提供了一篇默认博客,我们可以通过运行下面的命令,然后再本地查看

    boyuan: ~/Desktop $ cd Jason_Blog_2/
    boyuan: ~/Desktop/Jason_Blog $ jekyll serve
    

    注意:此时Jason_Blog文件夹中会增加_site文件夹,包含了生成网站的所有结构。同时,原来文件夹中开头没有下划线的文件夹会被复制到_site文件夹中,比如CSS文件夹

    • 停止本地运行,敲击CTR+C
    第三步 更改配置文件_config.yml

    详细内容参考官网 - Jekyll configuration
    想了解更多YAML文件 - YAML

    • 打开_config.yml文件,可以看到一些基础设置

    • 更改URL显示
      原始URL: http://127.0.0.1:4000/jekyll/update/2015/06/22/welcome-to-jekyll.html

    # Build settings
    markdown: kramdown
    permalink: pretty
    

    URL变更为:http://127.0.0.1:4000/jekyll/update/2015/06/22/welcome-to-jekyll/

    # Build settings
    markdown: kramdown
    permalink: /:title
    

    URL变更为:http://127.0.0.1:4000/welcome-to-jekyll/

    第四步 深入了解Jekyll模板

    Jekyll实际使用的是模板语言Liquid来操作模板和输出文件的。Liquid现在是Github上的开源项目,有兴趣可以多了解一下,很简单

    • 在每一个_post文件夹的post文件中,在---中间的内容叫做YAML Front Matter,Liquid可以将这里的数据传送到模板中相应的位置。
    ---
    layout: post                       // 表示选择post模板
    title:  "Welcome to Jekyll!"       // 博客的标题
    date:   2015-06-23 01:54:33        // 博客日期
    author: Jason                      // 作者
    categories: jekyll update          // 添加类别,空格分开
    permalink: "Welcome to Jekyll"     // 确定显示的URL
    ---
    

    注:反复使用的变量,比如layout, author等可以移到_config.yml

    • 从下面这张图我们可以看到,Jekyll中模板相关的文件在红框中,我们具体以default.html简述一下
    default.html
    • 首先是Liquid的两种格式
    // 格式一   output markup
    {% include head.html %}
    // 格式二   tag markup
    {{ content }}
    
    • 第一个的意思就是把head.html文件添加到相应位置,同理header.htmlfooter.html

    • 第二个的意思就是具体某个post的内容会添加到相应位置,当然在相应的post中我们要指定layout是什么,比如下面就是指定layout为default。这个post的内容会添加到{{ content }}的位置。
      其实上述内容与ASP.NET 中的Razor布局很像 - ASP.NET Razor 简介

    • 下面这张图我们可以看到我们指定了这个post使用default,同时注意到{{ page.title }},title数据就来自于上面第一点说的YAML Front Matter

      post.html
    • 说完了post,我们再说说怎么增加新页面,比如About, Contact......
      新页面直接添加在项目根目录下,前面没有下划线,比如新建contact.md

    // 下面是about.md 中的 YAML Front Matter
    ---
    layout: page                       // 表示选择post模板
    title: About                       // 标题为About
    permalink: /about/                 //about后面添加一个 "/" 可是_site中生成同名文件夹
    ---
    
    • 在项目根目录下可以创建文件夹_drafts,然后再其中添加草稿,预览可输入
    boyuan: ~/Desktop/Jason_Blog $ jekyll serve --drafts
    

    4. 主题

    有了上面的了解,网络上有一大波主题在等着你,直接下个主题,轻松简单。

    最后,发布到Github吧, Free Free Free
    请戳 => 如何使用Github Pages免费搭建网站

    相关文章

      网友评论

      • 68697c739807: 为什么我创建的blog文件里面只有post一个文件夹啊,都没有别的。。
      • CocoFei:Jekyll依赖Ruby,我这安装总报错,最后在StackOverFlow上面找到答案,先安装Ruby
        brew install ruby
      • 24c2d22a2394:这两天刚搞了一个,之前一直是硬存为MD格式放在github上的.感谢分享 :pray:
      • 甩甩鸟:@Jason_Yuan GitHub上可以绑定自己的域名,但是ssl的cert只能使用GitHub的,不能使用你自己的,所以就无法走HTTPS啦。我现在就是在vm上直接使用jekyll,nginx+ssl配合使用才解决这个问题的..
      • Jason_Yuan:@甩甩鸟 什么意思,没有back-end是么
      • 甩甩鸟:托管在GitHub上什么都好,就是没有https...
      • yilufeng0:最近在搞这个,先收下了

      本文标题:通过Github Pages和Jekyll搭建个人博客

      本文链接:https://www.haomeiwen.com/subject/gbteqttx.html