jekyll和GithubPages搭建自己的博客

|

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

安装jekyll

gem install jekyll bundler

请注意：由于GithubPages版本所支持的jekyll最高版本为3.9，但是以上命令安装的jekyll为4.2.0，所以会存在兼容性问题，所以建议安装3.9版本的jekyll（如果已经安装的可以使用gem uninstall jekyll卸载现有版本）。安装方式如下：

sudo gem install jekyll -v "3.9"

需要半个多小时才能安装完毕。 使用 jekyll -v查看是否安装成功， 接下来我们测试一下jekyll大致使用流程：

  1. 使用jekyll new my-awesome-site 命令来创建一个jekyll项目，创建好以后里面的.gitignore等都会被一并创建好
  2. cd my-awesome-site 切换到项目目录
  3. bundle install
  4. bundle exec jekyll serve执行此步骤可能会报如下错误：
    • Could not find gem 'minima (~> 2.5)' in any of the gem sources listed in your Gemfile.， 解决方式为：sudo gem install minima --verbose
  5. 打开浏览器 http://localhost:4000如果能访问成功，那么恭喜你，jekyll的环境已经搭建好了，接下来我们就来看看GithubPages。

创建GithubPages仓库

详细步骤可以参考github-pages的官方教程，里面写的什么详细。需要注意一点的就是执行到第11步（使用 bundle exec jekyll serve本地测试）的时候会报如下错：

Could not find gem 'github-pages' in any of the gem sources listed in your Gemfile.

解决办法也很简单，使用sudo gem install github-pages命令安装github-pages即可.

使用jekyll发布站点

二者都准备好之后如何将其结合呢？首先要修改一下本地仓库中的Gemfile(Gemfile管理jekyll的依赖)，添加如下内容

1
2
3
4
5
6
7
require 'json'
require 'open-uri'
versions = JSON.parse(open('https://pages.github.com/versions.json').read)

gem 'github-pages', versions['github-pages'], group: :jekyll_plugins

将内容提交到远程仓库之后，自己的博客就基本搭建完毕了。 首先我们执行 bundle exec jekyll serve,然后在浏览器中通过 127.0.0.1:4000查看网站的效果。也可以通过https://userName.github.io(userName为自己的github名称)查看发布的静态博客。

jekyll编写博客

撰写博客的教程在jekyll官方教程上写的十分详细，博客主要有两部分组成：头部信息和博客内容， 头部信息的格式是固定的，详情请点击头部信息详解查看。

jekyll主题配置

上面我们搭建的博客默认是minima， 本人比较喜欢next这个主题，所以我们就以next主题的配置展开来看：

下载 NexT 主题：

1
2
$ git clone https://github.com/Simpleyyt/jekyll-theme-next.git
$ cd jekyll-theme-next

安装依赖：

1
$ bundle install

运行 Jekyll：

1
$ bundle exec jekyll server

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。如果可以运行，那么next主题就安装成功了， 但是安装成功以后如何移植到自己的项目中来呢？可以直接将我们上面的docs目录中的所有文件替换问next主题的文件夹中的内容

常见问题：

  1. GithubPages搭建的博客经常无法访问，大多数都是由于dns服务器的原因，配置电脑的dns服务器为：114.114.114.114即可