用GitHub+Jekyll搭建个人博客

原创 2017年07月11日 09:42:56

部分内容取自Jekll的官方文档

What’s GitHub

我在上篇博文里写了Git的教程,其中有一部分介绍如何使用远程库,而GitHub就是目前全球使用最广泛的Git远程库。

What’s Jekyll

Jekll可以理解为是一个工具。什么工具呢?生成博客的工具。它能将你按一定格式写的内容转变为html的页面,方便你生成你的博客。

“Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。” ——来自官方的解释

Jekyll的安装

本教程适用于Linux,Unix或者Mac OS X

首先你需要确保你电脑上有Ruby,RubyGems。博主是用Mac的,所以介绍一下Mac上怎么安装这两个东西,其他两个系统我就爱莫能助了。在Mac上的操作很容易,你只需下载并安装Xcode就可以了。

安装Jekyll仅需一条bash命令:

bash
$ gem install jekyll

如果无法安装,你可以试一下如下命令:

bash
$ sudo gem install jekyll

如果还无法安装,因为情况太多,博主也不全部都了解,这里就介绍一下常见错误,其他情况就请自行百度吧。

  • 如收到以下报错,原因即为没安装bundler:

    /Users/xxxxxxxx/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load such file -- bundler (LoadError)
    from /Users/xxxxxxxx/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/lib/jekyll/plugin_manager.rb:34:in `require_from_bundler'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/exe/jekyll:9:in `<top (required)>'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `load'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `<main>'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `eval'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `<main>'

    解决方法:执行以下命令安装bundler

    $ gem install bundler

    而且一定要将其更新到最新:

    $ bundler update

    再进行安装:

    $ bundle install

    如果很长时间都没有安装成功的提示的话,你可以尝试修改gem的sourse:(或者翻墙)

    $ gem sources --remove https://rubygems,org/
    $ gem sources -a https://gems.ruby-china.org/

    然后再次执行bundle install即可

Jekyll的基本结构目录

Jekyll也可以理解为一种语言,于是,按照博主的意志,我喜欢在实践之前学习一些基本理论知识。那么就到了我们的基本理论普及环节了~

基于Jekyll的网站的目录结构一般如下一般:

.
├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── post.html
|   └── page.html
├── _posts
|   └── 2016-10-08-welcome-to-jekyll.markdown
├── _sass
|   ├── _base.scss
|   ├── _layout.scss
|   └── _syntax-highlighting.scss
├── about.md
├── css
|   └── main.scss
├── feed.xml
└── index.html

接下来介绍一下它们的功能:

图片截自Jekll官方网站

Jekyll环境配置

创建博客:

$ jekyll new <Blog name>

启动本地服务:

$ cd <Blog name>   //进入博客目录
$ jekyll server        //启动本地服务,ctrl+c停止服务

这时打开http://localhost:4000就可以看到你新建的博客了

创建页面

编写相应的html文件即可创建相应页面,html的放置位置有两种选择:

.
|-- _config.yml
|-- _includes/
|-- _layouts/
|-- _posts/
|-- _site/
|-- about.html    # => http://example.com/about.html
|-- index.html    # => http://example.com/
└── contact.html  # => http://example.com/contact.html

或者

.
├── _config.yml
├── _includes/
├── _layouts/
├── _posts/
├── _site/
├── about/
|   └── index.html  # => http://example.com/about/
├── contact/
|   └── index.html  # => http://example.com/contact/
└── index.html      # => http://example.com/

撰写博客

在_posts文件夹下,建立相应的markdown文本文件即可,记得文件的名字一定要是如下格式:year-month-day-name.md.

文本文件的内容如下:

---
layout: post
title:  "Welcome to Jekyll!"
date:   2016-10-16 11:29:08 +0800
categories: jekyll update
---

正文...

将编写完成的博客部署到GitHub远程端

首先,创建一个GitHub仓库,名字为:.github.io

再将本地的博客文件全部上传到这个远程库。在网址里输入.github.io 你想要的博客是不是出现在了你的面前~

感谢惠读

版权声明:本文为博主原创文章,未经博主允许不得转载。

【Github】Github+Jekyll搭建个人博客

Github Pages搭配Jekyll搭建自己的博客,没有各种服务器端的限制,比自己买服务器舒服多了...
  • White_Idiot
  • White_Idiot
  • 2017年04月06日 17:13
  • 704

Jekyll搭建个人博客—GitHub Pages

what  Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完整的...
  • jave_f
  • jave_f
  • 2018年01月18日 22:43
  • 123

用 jekyll + Github Pages搭建个人博客

用 jekyll + Github Pages搭建个人博客20170408 update.这里只介绍一种快速搭建个人博客的方式(Linux 环境 Ubuntu 15.10): (1) 在本地安装jek...
  • u013553529
  • u013553529
  • 2017年01月17日 22:00
  • 4269

Github Page---- 搭建个人博客网站

利用Github Page 搭建个人博客网站 转载请注明出处: http://blog.csdn.net/tzs_1041218129/article/details/53214497 ...
  • yuexianchang
  • yuexianchang
  • 2016年12月02日 09:49
  • 30715

利用阿里云搭建wordpress个人博客

系统环境:   服务器:阿里云ECS1核 2GB 系统:阿里云提供的CentOS 7.2 64位   安装:   安装PHP: yum install php php-devel ...
  • l1902090
  • l1902090
  • 2017年06月21日 23:25
  • 656

Linux+WordPress搭建自己的个人博客

Linux+WordPress搭建自己的个人博客
  • hymanxq
  • hymanxq
  • 2016年08月12日 21:15
  • 2077

使用 GitHub, Jekyll 打造自己的免费独立博客

讲述了使用 GitHub 和 Jekyll 搭建免费独立博客的过程,包括入门指引,工作机制,网站源代码介绍,以及分类,归档,评论,分页的实现。...
  • on_1y
  • on_1y
  • 2014年02月15日 23:07
  • 69628

使用github+jekyll一小时搭建个人博客(小白专用)

很早就听过github的大名,但一直不知道github是什么,只知道别人会把他们的代码放上去。那就在这里简单介绍一下github。百度是这样说的: gitHub是一个面向开源及私有软件项目的托管平台...
  • Hanghang_
  • Hanghang_
  • 2018年01月01日 10:08
  • 85

搭建属于自己的个人博客

前言 作为一个屌丝码农,再怎么着也得拥有一个自己的域名和网站吧,今天我就来讲一讲怎么搭建一个属于自己的博客,在很多新手看来,做网站是一件很复杂、很艰难的事情。其实互联网发展到现在,很多不懂html、A...
  • zhujunxxxxx
  • zhujunxxxxx
  • 2014年10月21日 12:20
  • 3721

使用Hexo搭建个人博客

最近闲着没事,用hexo搭建了一个个人博客,部署在github上,欢迎大家来我博客踩踩~ ^_^ 传送门 下面总结一下搭建过程:环境搭建hexo是一个简单地、轻量地、基于Node的一个静态博客框架...
  • u011851478
  • u011851478
  • 2016年10月27日 17:30
  • 989
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用GitHub+Jekyll搭建个人博客
举报原因:
原因补充:

(最多只允许输入30个字)