您的位置：首页 > 运维架构 > 网站架构

使用GitHub Pages + Jekyll 搭建静态网站

2016-09-24 16:12 281 查看

一、简单介绍

GitHub Pages

是用户编写的、托管在github上的静态网页

Jekyll

是一个简单的博客形态的静态站点生产机器

二、安装

事先准备

安装之前需要确保你的电脑里已经安装好

Ruby

和

RubyGems

安装Jekyll

终端下输入

gem install jekyll

完成后可以通过

jekyll --version

来测试是否安装成功

三、创建项目

这里主要参考这篇文章：搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门 - 阮一峰的网络日志

新建一个项目文件夹

demo

进入

demo

执行

git init

和

git checkout --orphan gh-pages

项目根目录下新建

_config.yml

文件，该文件为

jekyll

的设置文件

在

_config.yml

中输入

baseurl: /demo

项目根目录下新建一个

_layouts

目录，用于存放模板文件

进入该目录，新建

default.html

，作为默认模板，并输入以下内容

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }}</title>
</head>

<body>
{{ content }}
　</body>

</html>

项目根目录下新建一个

_posts

2016-09-24-hello-world.html

(文件名必须按照”年-月-日-文章标题.后缀名”格式书写)，并输入以下内容

---
layout: default
title: 你好，世界
---
<h2>{{ page.title }}</h2>
<p>我的第一篇文章</p>
<p>{{ page.date | date_to_string }}</p>

项目根目录下新建

index.html

文件，输入以下内容

---
layout: default
title: 我的Blog
---
<h2>{{ page.title }}</h2>
<p>最新文章</p>
<ul>
{% for post in site.posts %}
<li>{{ post.date | date_to_string }} <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>

最终目录结构变成

/demo
|--　_config.yml
|--　_layouts
|　　　|--　default.html
|--　_posts
|　　　|--　2016-09-24-hello-world.html
|--　index.html

Jekyll使用文档：http://jekyllcn.com/docs/home/

四、预览项目

项目根目录下输入

jekyll serve --watch

浏览器中打开

http://127.0.0.1:4000/demo/

五、发布项目

项目根目录下新建

.gitignore

文件，将

_site

写入该文件，

_site

为

jekyll

完成转换后生成页面的存放目录

根目录下执行

git add .

git commit -m "first commit"

git push origin gh-pages

访问

https://username.github.io/demo/

，将username换成自己的用户名

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： github 博客 jekyll

相关文章推荐

新的分享

章节导航