使用github模板存储库来跳台启动静态站点项目

利用Github模板存储库简化您的静态站点生成器项目，并大大减少设置时间。虽然大多数静态站点生成器都可以轻松安装，但项目配置仍然是一项重复出现的任务。如果您经常创建类似的项目，反复重新创建文件夹结构，复制配置文件和样板代码，则此方法尤其有益。

与使用另一个开发人员代码的分叉不同，模板存储库使您可以重复使用自己的代码，并确保每个新项目都保持自己的独立GIT历史记录。

本指南展示了使用高度项目以示例来设置精简的工作流程（尽管适用于Hugo，Jekyll，Nuxt或其他）。完整的示例存储库可供参考。

创建模板

首先使用命令行创建项目目录：

 CD〜
Mkdir静态位点模板
CD静态位点模板

这将导航到您的主目录，创建一个新的目录并输入。

节点项目初始化

高度需要Node.js，允许JavaScript在Web浏览器外执行，而NPM（NODE软件包管理器）进行软件包安装。假设已安装了node.js，请运行：

 npm init

这会生成package.json ，提示您提供项目元数据。

安装高度

使用package.json创建，将高度安装作为开发依赖性：

 NPM安装-D @11TY/Eleventy

这将高度添加到package.json中。json并将其安装到node_modules文件夹中。 package.json确保跨不同机器的项目设置一致。

高度配置

本教程使用将网站源代码与项目文件分开的配置，包括HTML文档，CSS和JavaScript。创建必要的目录结构：

 MKDIR SRC SRC/CSS SRC/JS
触摸index.html css/style.css js/main.js

要配置高度以使用src目录并复制css和js文件，请创建.eleventy.js ：

模块。Exports= function（leventyConfig）{
  enventyconfig.addpassthroughcopy（“ SRC/CSS”）;
  everconfig.addpassthroughcopy（“ SRC/JS”）;
  返回 {
    dir：{
      输入：“ SRC”
    }
  };
};

通过运行测试配置：

 NPX @11ty/升高

这将在_site目录中生成网站。

构建样板网站

创建基本网站内容：将以下内容添加到src/index.html ：

 


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>静态站点模板</title>
  <meta name="description" content="静态网站">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">


  <h1 id="制作您的网站模板的好工作">制作您的网站模板的好工作！</h1>
  <script src="js/main.js"></script>

将基本样式添加到src/css/style.css ：

身体 {
  字体家庭：sans-serif;
}

以及一个简单的JavaScript函数到src/js/main.js ：

 （功能（） {
  console.log（“调用静态站点模板JavaScript！'）;
}）（）;

运行npx @11ty/eleventy --serve以本地查看该网站。

GitHub存储库设置

初始化git存储库：

 git init

创建一个.gitignore文件以排除_site和node_modules ：

 <code>_site/ node_modules/</code>

创建一个github存储库（例如， static-site-template ）。然后，推动您的本地存储库：

 git添加。
git commit -m“首先提交”
git远程添加原点<your_github_repo_url>
git push -U原始大师</your_github_repo_url>

启用模板存储库

在您的github存储库设置中，启用“模板存储库”选项。将出现一个“使用此模板”按钮，使您可以根据模板创建新项目。

扩展模板

当您使用模板开发新项目时，将可重复使用的组件和改进添加回模板存储库，以备将来使用。

限制

虽然对类似项目有益，但模板存储库可能不适合具有外部依赖性或截然不同要求的复杂项目。请记住，更改模板仅影响未来的项目，而不是现有项目。

该增强指南为创建和利用静态站点项目的GitHub模板存储库提供了一种更全面和结构化的方法。

以上是使用github模板存储库来跳台启动静态站点项目的详细内容。更多信息请关注PHP中文网其他相关文章！