Jekyll搭建个人博客

2020-08-20 | 阅读：次

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

　使用 Jekyll 搭建博客之前要确认下本机环境，Git 环境（用于部署到远端）、Ruby 环境（Jekyll 是基于 Ruby 开发的）、包管理器 RubyGems
　　如果你是 Mac 用户，你就需要安装 Xcode 和 Command-Line Tools了。下载方式 Preferences → Downloads → Components。

　　Jekyll 是一个免费的简单静态网页生成工具，可以配合第三方服务例如： Disqus（评论）、多说(评论) 以及分享等等扩展功能，Jekyll 可以直接部署在 Github（国外）或 Coding（国内）上，可以绑定自己的域名。Jekyll中文文档、Jekyll英文文档、Jekyll主题列表。

Jekyll 环境配置

前提是先安装ruby环境然后在执行下面的（安装ruby环境可自行搜索）

安装 jekyll

$ gem install jekyll

创建博客

$ jekyll new myBlog

进入博客目录

$ cd myBlog

启动本地服务

$ jekyll serve

在浏览器里输入： http://localhost:4000，就可以看到你的博客效果了。

so easy !

目录结构

　　Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是：你用你最喜欢的标记语言来写文章，可以是 Markdown，也可以是 Textile,或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置URL路径, 你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。

一个基本的 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

这些目录结构以及具体的作用可以参考官网文档

进入 _config.yml 里面，修改成你想看到的信息，重新 jekyll server ，刷新浏览器就可以看到你刚刚修改的信息了。

到此，博客初步搭建算是完成了，

博客部署到远端

　我这里讲的是部署到 Github Page 创建一个 github 账号，然后创建一个跟你账户名一样的仓库，如我的 github 账户名叫 lanzhe9527，我的 github 仓库名就叫 lanzhe9527.github.io，创建好了之后，把刚才建立的 myBlog 项目 push 到 username.github.io仓库里去（username指的是你的github用户名），检查你远端仓库已经跟你本地 myBlog 同步了，然后你在浏览器里输入 username.github.io ，就可以访问你的博客了。

编写文章

　　所有的文章都是 _posts 目录下面，文章格式为 mardown 格式，文章文件名可以是 .mardown 或者 .md。

　　编写一篇新文章很简单，你可以直接从 _posts/ 目录下复制一份出来 2016-10-16-welcome-to-jekyll副本.markdown ，修改名字为 2016-10-16-article1.markdown ，注意：文章名的格式前面必须为 2016-10-16- ，日期可以修改，但必须为年-月-日- 格式，后面的 article1 是整个文章的连接 URL，如果文章名为中文，那么文章的连接URL就会变成这样的：http://lanzhe9527.github.io/2015/08/%E6%90%AD%E5/ ，所以建议文章名最好是英文的或者阿拉伯数字。双击 2016-10-16-article1.markdown 打开

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

正文...

title: 显示的文章名，如：title: 我的第一篇文章
date: 显示的文章发布日期，如：date: 2016-10-16
categories: tag标签的分类，如：categories: 随笔

注意：文章头部格式必须为上面的，…. 就是文章的正文内容。

我写文章使用的是 webstrom 编辑器，如果你对 markdown 语法不熟悉的话，可以看看作业部落的教程

使用我的博客模板

虽然博客部署完成了，你会发现博客太简单不是你想要的，如果你喜欢我的模板的话，可以使用我的模板。

首先你要获取的我博客，Github项目地址，使用命令部署本地服务

$ jekyll server

如果你本机没配置过任何jekyll的环境，可能会报错

D:\github.com\myBlog>jekyll serve
Traceback (most recent call last):
        10: from D:/ruby/Ruby26-x64/bin/jekyll:23:in `<main>'
         9: from D:/ruby/Ruby26-x64/bin/jekyll:23:in `load'
         8: from D:/ruby/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-4.1.1/exe/jekyll:11:in `<top (required)>'
         7: from D:/ruby/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-4.1.1/lib/jekyll/plugin_manager.rb:52:in `require_from_bundler'
         6: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/bundler.rb:107:in `setup'
         5: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/bundler/runtime.rb:26:in `setup'
         4: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/bundler/runtime.rb:26:in `map'
         3: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/forwardable.rb:230:in `each'
         2: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/forwardable.rb:230:in `each'
         1: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/bundler/runtime.rb:31:in `block in setup'
D:/ruby/Ruby26-x64/lib/ruby/2.6.0/bundler/runtime.rb:319:in `check_for_activated_spec!': You have already activated public_suffix 4.0.5, but your Gemfile requires public_suffix 3.0.3. Prepending `bundle exec` to your command may sol
ve this. (Gem::LoadError)

解决方法：


$ bundle exec jekyll serve

提示

Configuration file: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github/_config.yml
            Source: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github
       Destination: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 0.901 seconds.
 Auto-regeneration: enabled for '/Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github'
Configuration file: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

表示本地服务部署成功。

在浏览器输入 127.0.0.1:4000 ，就可以看到lanzhe9527.github.io博客效果了。

修改成你自己的博客

如果你想使用我的模板请把 _posts/ 目录下的文章都去掉。

修改 _config.yml 文件里面的内容为你自己的。

然后使用 git push 到你自己的仓库里面去，检查你远端仓库，在浏览器输入 username.github.io 就会发现，你有一个漂亮的主题模板了。

为什么要是用 Jekyll

使用了 Jekyll 你会发现如果你想使用多台电脑发博客都很方便，只要把远端 github 仓库里的博客 clone 下来，写文章后再提交就可以了

lanzhe9527

兰喆