`

使用Jekyll搭建静态博客

 
阅读更多

 

Jekyll是一个使用Ruby编写的静态站点生成工具,使用Liquid模板渲染引擎,支持Markdown和Textile标记语言,并且可以为所有以 .html、.markdown、.textile扩展名结尾的文件使用YAML配置,内置语法高亮功能。而Github的Pages服务可以为每个Github主机上的仓库提供静态页面服务,并且Pages服务支持Jekyll。因为Github Pages有两种Pages,分别是用户页面和项目页面,所以我们可以使用用户页面来创建自己的Blog。

在开始前,请确保你已经有了Github账号一枚和Git的正确配置。没有的朋友可以先移步Github注册安装配置Git

首先,创建你的 Blog 仓库 username(请确保跟你的账号名相同).github.com:

1 $ mkdir username.github.com
2 $ cd username.github.com

新建一个 index.html 文件,像下面这样:

 1 <!doctype html>
       2 <html>
       3 <head>
       4 <title>Hello</title>
       5 </head>
       6
       7 <body>
       8 <h1>Hello!</h1>
       9 </body>
      10 </html>
      

初始化仓库、提交并push到Github:

1 $ git init
2 $ git add .
3 $ git commit -a -m 'init commit.'
4 $ git remote add origin
5 $ git push origin master

现在你打开 username.github.com 就可以看到刚才新建的页面了,就是这么简单。当然也可以为你的Blog仓库绑定独立域名,具体做法就是:

  1. 在你的仓库中新建内容为 www.youdomain.com 的 CNAME 文件;
  2. 在你的域名管理页或者是DNS解析的地方,增加一个记录,记录类别为CNAME(Alias)类型.

*Note:如果你在CNAME中填写的是顶级域名,就得设置DNS的记录类别为A(Host)型,并设置主机为207.97.227.245。详细介绍请移步Github的Pages页面。

接下来我们只需要按照自己的喜好设计页面。首先认识下Jekyll的文件及目录配置:

01 .
02 |-- _includes
03 |-- _plugins
04 |-- _layout
05 |   |-- default.html
06 |   `-- post.html
07 |-- _post
08 |   |-- yyyy-mm-dd-title.markdown
09 |   `-- yyyy-mm-dd-title.markdown
10 |-- _site
11 |-- _config.yml
12 `-- index.html

_includes

存放你需要在模板文件中包含的文件,你可以使用Liquid标签 {‰ include file.ext ‰} 来引用相应的文件。

_plugins

可以增加你自己的插件

_layout

存放布局模板,请参考https://github.com/taberhuang/taberhuang.github.com/tree/master/_layouts

_post

存放文章列表,文件命名一定要遵循 yyyy-mm-dd-title.html|markdown|textile 规则,请参考https://github.com/taberhuang/taberhuang.github.com/tree/master/_posts

_site

Jekyll自动生成的,所以可以忽略,如果你有在本地安装Jekyll并预览了的话,可以使用.gitignore设置Git停止对本目录的跟踪。

_config.yml

设置经常使用的配置选项,这样在本地启动预览时就不用每次都手动输入了。

index.html 和所有的 HTML/Markdown/Textile 文件

所有的HTML/Markdown/Textile文件都可以包含 YAML 配置,这类文件都会被Jekyll解析。

现在你可以在自己的仓库中配置好你自己的目录及文件,也可以clone我的仓库,然后修改。

修改完后就可以push你的代码到Github上,看到结果了。刚才有说到本地预览,如果你想在本地预览后,确保没错误再push的话,就需要在本地安装Jekyll,下面介绍下Jekyll的安装方法。

一、安装Ruby运行环境和RubyGem:Windows用户只要下载 RubyInstaller。下载安装后请手动升级gem.

1 $ gem update --system

二、安装DevKit。下载DevKit,DevKit是windows平台编译和使用本地C/C++扩展包工具。用来模拟Linux平台下的 make,gcc,sh 进行编译。下载文件后,解压到 `C:\DevKit',再通过命令行安装:

1 $ cd C:\DevKit
2 $ ruby dk.rb init
3 $ ruby dk.rb install

三、安装并检查刚才的DevKit安装是否成功。如果成功安装,则DevKit也就安装成功,如果不成功,请重新安装DevKit。

1 $ gem install jekyll

四、安装Rdiscount,这个是用来解析Markdown标记的解析包。如果你使用Textile的话,就是安装Kramdown。

1 $ gem install rdiscount

所有的环境和依赖包都安装成功后,进入你的仓库目录,用下面的命令便可启动Jekyll,并在本地预览了,预览地址默认为 127.0.0.1:4000,当然你也可以通过 _config.yml 配置:

1 jekyll --server
分享到:
评论

相关推荐

    bbrks.me-old:我的 Jekyll 支持的博客

    通过查看源代码,我们可以学习到如何使用Jekyll搭建静态博客,以及如何将React集成到Jekyll项目中,同时也能研究到CSS的实践应用,这对于想要学习前端开发或个人博客搭建的人来说是一个很好的资源。此外,了解开源...

    jekyll简洁博客主题

    “jekyll简洁博客主题”是一个以简洁设计为主的Jekyll博客模板,适合对视觉效果有较高要求且希望快速搭建个人博客的用户。它可能包含了各种实用功能,如响应式布局、SEO优化和社交分享,同时也可能支持JavaScript...

    Atom-jekyll-atom,在atom中使用jekyll的工具和片段的集合.zip

    Atom-jekyll-atom是专为在Atom文本编辑器中高效使用Jekyll搭建和管理静态博客的集成工具和代码片段集合。这个压缩包包含了名为“jekyll-atom-master”的项目文件,意味着用户可以在这个强大的文本编辑器中获得优化的...

    Jekyll 博客管理工具

    Jekyll是一款静态网站生成器,尤其适合个人博客的搭建与管理。它基于Ruby语言,采用Markdown格式编写内容,并通过 Liquid 模板引擎将内容、布局和样式表结合,生成静态HTML页面。由于Jekyll生成的是纯静态文件,因此...

    metalsmith-jekyll:类似于jekyll的静态博客生成器

    **Metalsmith-Jekyll:构建静态博客的新选择** Metalsmith-Jekyll 是一款基于 Metalsmith 框架的静态网站生成器,它模仿了流行的 Jekyll 工具,旨在为开发者提供一个简单、灵活的方式来创建和管理静态博客。在本文...

    个人博客静态页面

    总结来说,"个人博客静态页面"不仅是一种快速搭建网站的方法,也是个人表达、分享知识和建立在线存在感的有效途径。通过选择合适的静态站点生成器、定制主题、优化SEO,并结合各种工具和服务,我们可以创建出既美观...

    generator-sizzle-jekyll:Yeoman Generator 使用 Jekyll、Compass、RequireJS (with Almond)、Normalize、Bourbon 和 Neat、jQuery、Greensock、underscore.js 和 JSSignals 来帮助您快速搭建静态博客

    发电机-嘶嘶声-jekyll Yeoman Generator 使用 Jekyll、Compass、RequireJS(含 Almond)、Normalize、Bourbon 和 Neat、jQuery、Greensock、underscore.js 和 JSSignals,帮助您快速搭建静态博客。安装指南针和 ...

    Jekyll静态站点生成器 v4.0.0 beta1.zip

    - **个人博客**: Jekyll是GitHub Pages的默认构建工具,非常适合搭建个人博客,且无需额外的托管费用。 - **文档站点**: 由于其易于维护的结构,Jekyll也常用于创建项目或产品的文档站点。 - **毕业设计论文**: 对于...

    Node.js-JekyllNow让你在几分钟内构建Jekyll博客而不用接触命令行

    Jekyll是一款静态站点生成器,通常需要通过命令行操作来搭建和管理。然而,JekyllNow消除了这个门槛,允许用户无需任何命令行经验就能快速建立自己的博客。 ### Jekyll概述 Jekyll是由GitHub支持的静态网站生成器...

    Jekyll静态网站后台引擎使用教程

    **Jekyll静态网站后台引擎** 是一款用于构建静态网站的开源工具,特别适合用来搭建个人博客。它由GitHub创始人Tom Preston-Werner开发,并且与GitHub Pages紧密集成,使得用户可以方便地将Jekyll构建的静态站点托管...

    jekyll_blog:使用jekyll的个人博客

    Jekyll广泛应用于个人博客,尤其是与GitHub Pages结合使用时,可以免费托管静态网站。本篇文章将深入探讨如何使用Jekyll创建一个个人博客。 ### Jekyll基础 1. **安装Jekyll**: 首先,确保你的系统安装了Ruby和...

    华丽的静态个人博客

    在构建静态个人博客时,开发者通常会利用静态站点生成器,如Jekyll、Hugo或Gatsby等。这些工具能够将Markdown或者其他格式的文本内容转换为静态HTML页面,使得内容创作更为便捷。同时,静态博客还可以结合Git进行...

    Jekyll-Blog:Jekyll博客胆量

    在Jekyll博客中,我们通常使用Markdown编写文章。例如,`_posts` 文件夹下的每篇文章都是一个Markdown文件,其中包含YAML Front Matter和正文。Markdown支持的语法包括标题、列表、代码块、链接、图片等。 ### 5. ...

    手把手教你搭建免费个人博客

    - **Jekyll**:一种静态网站生成器,与 Github Pages 结合使用可以创建功能丰富的博客。 - **参考文章**: - [《搭建一个免费的,无限流量的Blog—-githubPages和Jekyll入门》](https://link.example.com/article1)...

    个人搭建博客真实发布模板

    对于Jekyll和Hexo,你将在本地环境中安装它们,编写Markdown格式的文章,然后使用命令行工具生成静态页面,最后将生成的文件上传到你的托管服务。 在博客的外观和功能上,你可以选择预设的模板或者自定义设计。...

    leopardpan的博客模板

    《使用Jekyll搭建个人博客及定制模板指南》 在当今互联网时代,个人博客成为许多技术爱好者、作家和思想领袖分享知识、见解和经验的重要平台。Jekyll,作为一个静态站点生成器,以其轻量级、高效且易于维护的特性,...

    Github Pages 搭建个人博客

    例如,它使用Jekyll模板系统,相当于静态页面发布,适合博客,文档介绍等,但动态程序的部分相当局限,例如没有评论功能。但这些问题都有相应的解决方案。 知识点四:Github的配置和使用 要使用Github,需要安装Git...

    jekyll-demo:使用Jekyll的演示站点

    这个工具特别适合博客、个人网站或者项目文档的创建,因为它允许作者使用Markdown或Textile等简单的标记语言编写内容,然后自动生成静态页面,无需数据库支持。Jekyll 的核心理念是“内容优先”,让开发者可以专注于...

    用jekyll制作高大上的网站

    Jekyll是一款静态站点生成器,它将纯文本内容转换成静态HTML页面,广泛用于构建个人博客和项目文档网站。这款工具特别适合程序员和开发者,因为它基于Ruby语言,并且支持Markdown和YAML等简洁的标记语言,让内容创作...

Global site tag (gtag.js) - Google Analytics