目录

使用Jekyll+Github Pages搭建博客


为什么选择 Jekyll 和 Github Pages

Jekyll是一个静态网页生成器,使用YAML头信息可以很方便地使用各种布局,内置markdown,新的文章只需加入文件夹即可。Github Pages可以提供免费空间,免费无限流量来给网页当虚拟主机。他们俩配合起来相当默契,而且网上也有很多资料。但是有一点美中不足的是Github Pages是在安全模式下运行的,也就是说它并不支持Jekyll的插件。然而我们可以在本地带着插件生成好网站再放到Github上。虽然听起来不太方便,但是有脚本让我们一步实现。这点我们后面详细说。

准备

  1. 了解YAML front matter可以让包含头文件的文件自动:
    • 拥有部分或全部布局及定义的重复标签
    • 变量 (Liquid)
  2. 如果完全不了解HTML, CSS和JavaScript, 请查看W3School,至少了解基本用法。
  3. 了解git命令,如果不请查看Git tutorial或者其他资料。希望能至少使用命令行一次了解流程,这对以后会有所帮助。

创建仓库

详细步骤在这里

如果是个人/机构网站,请使用master分支,如果是项目网站,请使用gh-pages分支

安装和初始化

步骤在Github help pages有详细解释。

完成安装后,初始化Jekyll在当前文件夹使用基本主题,运行

1
2
Jekyll new .
git init

如果出现类似directory is not empty之类的错误,先把文件夹下的内容移动到该文件夹外的临时文件夹内,运行命令后再放回原来的文件即可。

本地运行Jekyll和测试网站

如果您是bundler使用者,请运行bundle exec jekyll server或者bundle exec jekyll serve.
如果不是,请运行jekyll server或者jekyll serve

让命令运行(不要用ctrl+c终止命令),打开网页浏览器,在地址栏输入http://localhost:4000,就能看见网站啦。

配置

_config.yml文件

_config.yml文件包含了网站设定,官网上有详细阐述。下面介绍基本用法:

变量用法
title网站名,默认下将是网站在搜索引擎出现的名字
email在contac-list中显示的邮箱地址, 默认下出现在页脚
description网站描述,默认下将出现在页脚
baseurl网站的子路径, 例如设置成/blog,完整url将会变成www.pwzxxm./com/blog
url主机名和使用协议,完整url, 例如https://www.pwzxxm.com
github_username
twitter_username
用于链接Github和Twitter, 默认下出现在页脚
markdown使用的markdown引擎, e.g. kramdown redcarpet
highlighter语法高亮引擎, e.g. pygments rouge
permalink设置为prettyurl将变成这样site_url/time/title
可以自定义例如/:title/ 查看详情
pagination每页显示多少篇文章

使用自定义域名

官网提供了两个基本版的页数标示,点这里。 然而网上有适配移动端的Timble,非常赞。

多语言支持

请查看Jekyll Multi Language Plugin

如使用插件,在本地生成网站

简单的说就是另外创建一个“僵尸”仓库,先生成网站,再把_site文件夹下的文件放到原根目录然后禁止Github再次生成网站。

  1. 在“僵尸”文件夹下执行bundle exec jekyll serve build or jekyll build
  2. 复制当前文件夹下所有文件到原仓库(****.github.io), 除了README.md
  3. 剪切原仓库的_site文件夹下所有文件到原仓库根目录。
  4. touch .nojekyll禁止Github生成网站。
  5. 提交所有到Github。

这是bash脚本:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#!/bin/bash

comment="$1"
push_commit="git commit -a -m '$comment'"

# commit and push changes
eval 'cd ~/git/local'  # modify PATH here
eval 'bundle exec jekyll build'
eval 'git add .'
eval $push_commit
eval 'git push --all origin'

# copy remove in pwzxxm.github.io
eval 'cd ~/git/PwzXxm.github.io' # modify PATH here
eval 'cp ./README.md ~/git/' # modify where you want to temporally put the README.md
eval 'rm -rf ./*'
eval 'cp -r ~/git/local/* ./' # modify PATH here
eval 'cp -r _site/* ./'
eval 'rm -rf _site/*'
eval 'cp ~/git/README.md ./' # put the file back
eval 'touch .nojekyll'

# commit and push changes
eval 'git add .'
eval $push_commit
eval 'git push --all origin'
echo "Done"

要使用它,复制上面代码到以.sh结尾的bash脚本文件中,修改路径,给权限,运行即可。

本站代码

如果想使用本站布局或想知道背后的代码,请访问

您可以使用关于本站的任何代码,但禁止转载本站内容。如有需要,请联系我。