使用 GitHub 模板仓库快速启动静态网站项目

如果您刚开始使用静态网站生成器，您是否知道可以使用 GitHub 模板仓库快速启动新项目并减少设置时间？

大多数静态网站生成器都简化了安装过程，但每个项目在安装后仍需要进行配置。当您构建许多类似的项目时，您可能会在设置阶段重复工作。如果您发现自己

从以前的项目创建相同的文件夹结构，
从以前的项目复制粘贴配置文件，以及
从以前的项目复制粘贴样板代码。

与复制仓库不同，后者允许您使用他人的代码作为起点，模板仓库允许您使用自己的代码作为起点，其中每个新项目都有自己的独立 Git 历史记录。快来试试吧！

让我们看看如何设置一个便捷的工作流程。我们将设置一个样板 Eleventy 项目，将其转换为 Git 仓库，将仓库托管在 GitHub 上，然后将该仓库配置为模板。然后，下次您拥有静态网站项目时，您就可以返回到该仓库，点击一个按钮，并从样板的精确副本开始工作。

您准备好尝试了吗？让我们使用 GitHub 模板设置自己的静态网站，看看模板如何帮助简化静态网站项目。

我使用 Eleventy 作为静态网站生成器的示例，因为它是我个人首选的工具，但此过程适用于 Hugo、Jekyll、Nuxt 或您喜欢的任何其他类型的静态网站生成器。

如果您想查看最终产品，请查看我的静态网站模板仓库。

首先，让我们创建一个模板文件夹

我们将通过在命令行中运行以下每个命令来开始

cd ~
mkdir static-site-template
cd static-site-template

这三个命令将目录更改为您的主目录（在基于 Unix 的系统中为~），创建一个名为static-site-template的新目录，然后将目录更改为static-site-template目录。

接下来，我们将初始化 Node 项目

为了使用 Eleventy，我们需要安装 Node.js，它允许您的计算机在 Web 浏览器之外运行 JavaScript 代码。

Node.js 带有节点包管理器，或 npm，它将节点包下载到您的计算机上。Eleventy 是一个节点包，因此我们可以使用 npm 来获取它。

假设已安装 Node.js，让我们回到命令行并运行

npm init

这会在目录中创建一个名为 package.json 的文件。npm 会提示您回答一系列问题以填写 package.json 中的元数据。回答完问题后，Node.js 项目将被初始化。

现在我们可以安装 Eleventy 了

初始化项目为我们提供了 package.json 文件，它允许 npm 安装包、运行脚本并在该项目内执行其他任务。npm 使用 package.json 作为项目中的入口点，以准确了解当我们向其发出命令时它应该如何以及做什么。

我们可以告诉 npm 将 Eleventy 作为开发依赖项安装，方法是运行

npm install -D @11ty/eleventy

这会将devDependency条目添加到 package.json 文件中，并将 Eleventy 包安装到项目中的node_modules文件夹中。

package.json 文件的优点在于，任何其他安装了 Node.js 和 npm 的计算机都可以读取它，并知道在项目node_modules目录中安装 Eleventy，而无需手动安装。看，我们已经在简化流程了！

配置 Eleventy

配置 Eleventy 项目的方法有很多种。灵活性是 Eleventy 的优势所在。在本教程中，我将演示一种配置，它提供

一个文件夹，用于将网站源代码与整体项目文件清晰地分开
一个用于单页网站的 HTML 文档
用于设置文档样式的 CSS
用于向文档添加功能的 JavaScript

回到命令行。在static-site-template文件夹中，逐一运行以下命令（不包括每个#符号后面的注释）

mkdir src           # creates a directory for your website source code
mkdir src/css       # creates a directory for the website styles
mkdir src/js        # creates a directory for the website JavaScript
touch index.html    # creates the website HTML document
touch css/style.css # creates the website styles
touch js/main.js    # creates the website JavaScript

这创建了基本的文件结构，它将为 Eleventy 构建提供信息。但是，如果我们现在运行 Eleventy，它不会生成我们想要的网站。我们仍然需要配置 Eleventy 以使其理解它应该仅使用src文件夹中的文件进行构建，并且css和js文件夹应使用直通文件复制进行处理。

您可以通过static-site-template文件夹根目录中的名为.eleventy.js的文件向 Eleventy 提供此信息。您可以通过在static-site-template文件夹中运行以下命令来创建该文件

touch .eleventy.js

在您喜欢的文本编辑器中编辑该文件，使其包含以下内容

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/css");
  eleventyConfig.addPassthroughCopy("src/js");
  return {
    dir: {
      input: "src"
    }
  };
};

第 2 行和第 3 行告诉 Eleventy 对 CSS 和 JavaScript 使用直通文件复制。第 6 行告诉 Eleventy 仅使用src目录构建其输出。

Eleventy 现在将为我们提供我们期望的输出。让我们通过在命令行中输入以下内容来进行测试

npx @11ty/eleventy

npx命令允许 npm 从项目node_module目录执行代码，而无需触及全局环境。您将看到类似以下的输出

Writing _site/index.html from ./src/index.html.
Copied 2 items and Processed 1 file in 0.04 seconds (v0.9.0)

static-site-template文件夹中现在应该有一个名为_site的新目录。如果您深入到该文件夹中，您将找到css和js目录，以及index.html文件。

此_site文件夹是 Eleventy 的最终输出。它包含整个网站，您可以将其托管在任何静态 Web 主机上。

如果没有任何内容、样式或脚本，生成的网站就没有什么趣味性

让我们创建一个样板网站

接下来，我们将构建一个非常简单的网站的基础，我们可以将其用作所有项目的起点。

值得一提的是，Eleventy 有大量用于不同类型项目的样板文件。完全可以使用其中之一，尽管我经常发现自己需要自己构建。所以这就是我们在这里做的事情。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Static site template</title>
    <meta name="description" content="A static website">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  <h1>Great job making your website template!</h1>
  <script src="js/main.js"></script>
  </body>
</html>

我们不妨稍微设置一下样式，因此让我们将以下内容添加到src/css/style.css中

body {
  font-family: sans-serif;
}

我们可以通过将以下内容添加到src/js/main.js中来确认 JavaScript 已连接

(function() {
  console.log('Invoke the static site template JavaScript!');
})();

想看看我们得到了什么？在命令行中运行npx @11ty/eleventy --serve。Eleventy 将使用 Browsersync 启动一个服务器并提供本地 URL，该 URL 可能类似于localhost:8080。

让我们将其转移到 GitHub 仓库中

Git 是软件开发中最常用的版本控制系统。大多数基于 Unix 的计算机都已安装了它，您可以通过运行以下命令将任何目录转换为 Git 仓库

git init

我们应该会收到类似以下的消息

Initialized empty Git repository in /path/to/static-site-template/.git/

这意味着在项目目录内部添加了一个隐藏的.git文件夹，它允许 Git 程序对项目运行命令。

在我们开始对项目运行大量 Git 命令之前，我们需要告诉 Git 哪些文件我们**不**希望它触碰。

在static-site-template目录内，运行

touch .gitignore

然后在您喜欢的文本编辑器中打开该文件。将以下内容添加到文件中

_site/
node_modules/

这告诉 Git **忽略**node_modules目录和_site目录。将每个 Node.js 模块都提交到仓库可能会使事情变得非常混乱且难以管理。所有这些信息都已存在于 package.json 中。

同样，也没有必要对_site进行版本控制。Eleventy 可以从src中的文件生成它，因此无需占用 GitHub 的空间。如果我们

对_site进行版本控制，
更改src中的文件，或
忘记再次运行 Eleventy，

那么_site将反映网站的旧版本，未来的开发者（或未来的您）可能会意外使用过时的网站版本。

Git 是版本控制软件，而 GitHub 是 Git 仓库托管服务。还有其他 Git 托管服务提供商，例如BitBucket 或 GitLab，但由于我们正在讨论 GitHub 的特定功能（模板仓库），因此我们将把我们的工作推送到 GitHub。如果您还没有帐户，请继续并加入 GitHub。拥有帐户后，创建一个 GitHub 仓库并将其命名为static-site-template。

在设置新仓库时，GitHub 会询问一些问题。其中一个问题是我们是否希望**在命令行中创建新的仓库**或**从命令行推送现有的仓库**。这两个选项都不是我们真正需要的。它们假设我们要么什么都没有，要么已经在本地使用 Git 了。static-site-template项目已经存在，并且已初始化 Git 仓库，但还没有任何提交。

因此，让我们忽略提示，而是在命令行中运行以下命令。**请务必准备好第 3 行命令中 GitHub 提供的 URL：**

git add .
git commit -m "first commit"
git remote add origin https://github.com/your-username/static-site-template.git
git push -u origin master

这将整个static-site-template文件夹添加到 Git 暂存区。它使用消息“first commit”提交它，添加一个远程仓库（GitHub 仓库），然后将 master 分支推送到该仓库。

让我们将它模板化

好的，这就是我们一直在努力的重点。GitHub 模板允许我们使用我们刚刚创建的仓库作为未来其他项目的根基——而无需重复我们之前完成的所有工作！

点击仓库 GitHub 着陆页上的设置按钮开始。在设置页面上，选中模板仓库的按钮。

现在，当我们返回到仓库页面时，我们会看到一个大的绿色按钮，上面写着使用此模板。点击它，GitHub 将创建一个新的仓库，它是我们新模板的镜像。新仓库将以与static-site-template相同的文件和文件夹开始。从那里，下载或克隆该新仓库以使用我们在模板项目中设置的所有基本文件和配置启动新项目。

我们可以扩展模板以用于未来的项目

现在我们有了模板仓库，我们可以将其用于出现的任何新的静态网站项目。但是，您可能会发现新项目比模板中设置的项目有额外的需求。例如，假设您需要利用 Eleventy 的模板引擎或数据处理能力。

在您处理新项目时，继续在模板的基础上构建。完成该项目后，确定您希望在未来项目中重用的部分。也许您想出了一个很酷的按钮悬停效果。或者您构建了自己的 JavaScript 轮播元素。或者也许您对文档设计和信息层次结构感到非常自豪。

如果您认为您在某个项目中完成的任何操作可能会在您的下一次运行中再次出现，请删除项目特定的详细信息并将新内容添加到您的模板项目中。将这些更改推送到 GitHub，下次您使用static-site-template启动项目时，您的可重用代码将可用。

当然，这有一些限制

GitHub 模板仓库是避免在新的 Web 开发项目中重复设置的有用工具。我发现这对于静态网站项目特别有用。对于需要外部服务（例如数据库）且配置无法在一个目录中进行版本控制的更复杂的项目，这些模板仓库可能不太适用。

模板仓库允许您交付您编写的可重用代码，以便您可以解决一次问题并反复使用该解决方案。但是，虽然您的新解决方案将延续到未来的项目，但它们不会向旧项目移植。

对于结构、样式和功能**非常相似**的网站，这是一个有用的流程。具有截然不同需求的项目可能无法从这种代码共享中获益，并且您最终可能会因不必要的代码而使项目膨胀。

总结

就是这样！您现在拥有了所有必要的东西，不仅可以使用 Eleventy 启动静态网站项目，还可以将其重新用于未来的项目。GitHub 模板对于快速启动项目非常方便，否则我们必须一遍又一遍地重新构建相同的轮子。充分利用它们，并享受项目快速启动带来的便利！