静态网站的应用十分广泛,因为它具有明显的优势——页面响应速度快,而且随着越来越多的托管服务支持,搭建起来很容易。

我不打算在这篇文章里讨论“谁在什么时候,在哪里,选用静态网站做什么”或者“为什么选用它”。我假定你对上述问题至少有一个模糊的概念,或者只是想要搭建你自己的网站,并不在意其他细节——那么,这篇文章正是写给你这样的读者的。

首先,我想说的是我写这篇文章是为了给尽可能多的读者看的,所以你不需要任何编程知识,但是熟悉一些命令行和Git操作会帮到你很多。

所以怎么在10分钟内用 GitHub 创建一个静态网站?

我们将用到两个特定工具:GitHub Pages,专门提供静态内容服务,另一个 Jekyll,用来生成静态内容。

Jekyll 是一个用来简单创建静态站点的 Ruby gem,所以如果你想用 Jekyll, 需要在你的电脑上安装 Ruby。如果你是 OSX 的操作系统,你很可能已经有某个版本Ruby(尽管你可能需要更新它)。如果你没有安装,或者你使用的是 windows 的电脑,你可以在这里了解更多关于安装它的信息:  Installing Ruby

做完上述操作后,打开新的终端窗口,输入gem install bundler jekyll。安装 Bundler(Ruby 的包管理工具)和 Jekyll。

当安装完这些 gems(Ruby 包)后,输入Jekyll new my-static-site(随意给它命名),这个命令会运行 Jekyll 的生成器,在一个新目录里创建你的项目,在网站创建站点后,通过输入  cd my-static-site(或者  cd  你项目的名字)进入到新创建网站的目录。

在文本编辑器打开项目,你会看到Jekyll为你创建的几个文件和文件夹。现在你只需要关心 Gemfile (不是 Gemfile.lock),Gemfile 是一个 Ruby 文件,它管理运行一个项目所需的所有相关Ruby包。

这个文件有一行写着 Jekyll 的版本,把这行注释掉:

#gem "jekyll", "~> 4.0.0"

然后加入这一行:

gem "github-pages", group: :jekyll_plugins

当你安装 GitHub Pages gem 时,可能会出现有很多问题,有时于它所依赖的 gem 已经过时了,或者你本地安装的 gem 版本太新。

我发现这使得在本地构建和测试Jekyll站点变得很困难。一个简单的方法是,只在本地测试站点并保存其构建直到你准备部署之前。然而,通过以下代码,你可以在Gemfile中指定这些依赖项版本,Jekyll 就可以同时在本地和 GitHub Pages上运行。

gem "jekyll", "~> 3.8.5"
gem "github-pages","~> 202" , group: :jekyll_plugins
group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.11.0"
end

感谢  Alex Waibel  在  StackOverflow  提供的最新配置。

为了看到你的网站,在命令行输入  bundle exec Jekyll serve  这会开启一个服务器,你可以用通过在浏览器的 url 栏上输入 "localhost:4000" 看到你的网站。

瞧!你已经在项目目录里通过 Jekyll 创建一个网站。你已经完成了50%。

让我们把它放到网上

打开 GitHub.com 并注册一个账号,或者你已经有一个账号,选择 new 按钮并创建一个新的仓库,这个仓库的命名很重要,之后你的 GitHub Pages 链接就是你的用户名 .github.io 。例如我的 github 用户名是 tfantina,我的博客就是  tfantina.github.io,所以我的 GitHub 仓库名是: "tfantina.github.io".

回到你的终端窗口,输入下面的命令,把你电脑的 Jekyll 网站上传到 Github 。

git init
git remote add origin git@github.com:<your_github_username>/<your_github_repo_name>.git
git commit -am “Setting up Jekyll!”
git push -u origin master

(当替换你的用户名和项目名时,你不需要左右尖括号<>).

一旦你的修改提交到你的Github仓库,你就有一个正在运行的静态页面,这是因为你正在用GitHub Pages gem,并用GitHub理解的命名方式命名仓库。

你可以通过访问你的站点或者在GitHub的仓库设置页并滑到页面部分来确认这件事,你应该会看到一个绿色的方框,显示你的站点已经被发布了。

你也将会注意到很容易在这里就改变页面的主题,GitHub为Jekyll提供一些默认主题,当然你可以自己设计。如果你的站点已经发布但是看起来是空白页,你可能需要强制更新或者尝试在一个私隐窗口打开你的网站。这个可能看上去像是废话,但几乎每次我设置一个新的Jekyll实例都这样。

如果一切按计划进行,你的网站应该是这样的:

就这样,在这几分钟里你已经在 GitHub 创建并部署一个静态网站。但是,你可能想在页面放一些内容。

我承诺过只会花费10分钟,因此,我不会深入到页面、front matter或 Liquid 模板语言的所有细节,我会在之后再发一篇文章。但是我会分享如何创建你的第一篇文章。

回到文本编辑器,打开 “_posts” 文件夹,这里已经有一篇欢迎你到新博客的文章。创建一个新的 markdown 文件,并且按这种格式 YEAR-MONTH-DAY-TITLE.markdown 命名并保存它(见下文):

Jekyll 文章包含两个部分 front matter 和 body。

front matter 给了 Jekyll 一些具体的指示,比如文章的标题是什么,使用什么布局,以及文章是什么时候写的。

Front matter 是高度可配置的。比如,我想我的帖子有英雄的图片,所以我创建  lead_image  标签,并在我的布局放一些语法,它会根据每个帖子的 front matter 来显示对应的 lead images。Liquid 模板语言能轻松地根据 front matter ,把内容放到你的主题。

你还可以在 front matter 配置更多,但是让我们从一个通用的示例开始。

一个默认的 front matter 像这样:

—
layout: post 
title:  "Welcome to Jekyll!"
date:   2019-11-09 18:07:11 -0600
categories: jekyll update
—

  • 布局告诉Jekyll用那种布局来显示你的内容。你可以为不同的页面或帖子类型设置多个布局。
  • 文章标题
  • 文章日期
  • 分类,本质上是标签,可以添加任意数量的标签(以空格分隔)

在配置好 front matter 之后,用  Markdown  写帖子会获得很大的灵活性。

当你写完并保存之后,打开终端窗口。

git commit -am “Publishes first post
git push

在一分钟之后(也许刷新一下),你就可以看到你的帖子了。

希望你现在已经在使用 Jekyll 创建的 GitHub Pages 上有了一个可以工作的静态站点,如果你有任何疑问,请发推特  @tfantina,或者你可以给我发邮件contact@travisfantina.com

原文:How to create a free static site with GitHub Pages in 10 minutes,作者:Travis Fantina