用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 page搭建个人博客(jekyll的安装和使用)

github Pages 是在github上托管的静态网页。从2016年6月15日开始,通过域名github.io访问使用的是https协议。github pages的代码仓库容量限定是1G,并且带宽...

Jekyll+GitHub搭建个人博客 - 不限流/免费/静态网站

参考了其他前辈的博客 ,搭建的过程并不算难 (调整自己喜欢的风格太难了) .虽然是静态网站 ,但是可以嵌入第三方API ,也是可以作为一个简单的博客网使用的 .熟悉前端的话 ,这一个静态网站也能玩的很...

利用 Jekyll + Github pages 搭建个人博客

原来搭建个人博客的时候并没有一步一步记录下来,前几天电脑坏了,重装了系统,导致很多环境要重新搭,这次就把搭建 Jekyll + Github pages 环境的过程一步一步记录下来,省的以后再重装系统...
  • lguduy
  • lguduy
  • 2017年07月30日 15:02
  • 140

用Jekyll搭建的Github Pages个人博客

JekyllJekyll(发音/’dʒiːk əl/,”杰克尔”)是一个静态站点生成器,它会根据网页源码生成静态文件。它提供了模板、变量、插件等功能,所以实际上可以用来编写整个网站。你先在本地编写符合...
  • BubbleM
  • BubbleM
  • 2017年03月15日 14:34
  • 142

搭建基于Github Pages和Jekyll的个人博客

安装Gitsudo apt-get install git安装JekyllJekyll是一个静态网站生成器,非常适合生成博客类的网站 添加软件源,Ubuntu自带的软件源的Ruby太低 sudo ap...

github page+jekyll搭建个人博客总结

前言先放上我自己的博客吧,这是github仓库 github page:github提供了一块空间让我们可以当服务器用,所以我们就利用这块空间来搭建博客,我们可以把代码放在这里面,而且他还给我们提供...

[前端]jekyll+markdown+github搭建个人博客

jekyll+markdown+github搭建个人博客
  • napoay
  • napoay
  • 2015年09月12日 20:14
  • 2397

Mac下使用Jekyll和github搭建个人博客

安装ruby 安装gem 安装jekyll 安装博客 本地启动博客 部署到github 添加文章 使用主题 绑定域名 About1 安装rubymac自带, 没有则使用brew安装brew insta...
  • alex_my
  • alex_my
  • 2017年02月22日 11:34
  • 1628

Jekyll和Github搭建个人静态博客

利用Github提供的Pages功能,把本地搭建的Jekyll站点部署上去,实现一个自由定制的个人静态博客。前言 本地搭建Jekyll(以下都基于Windows环境) 事先准备 使用gem安装J...

使用GitHub Pages+ Jekyll搭建个人博客

前言:今天五一假期最后一天,趁着放假,搭建一个个人博客。之前就听说了GitHub Pages + Jekyll来搭建,今天想都不想其他的实现方式直接就使用这两个搭建。关于这方面的文章很多,网上查一下一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用GitHub+Jekyll搭建个人博客
举报原因:
原因补充:

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