利用Github模板存儲庫簡化您的靜態(tài)站點生成器項目，並大大減少設(shè)置時間。雖然大多數(shù)靜態(tài)站點生成器都可以輕鬆安裝，但項目配置仍然是一項重複出現(xiàn)的任務(wù)。如果您經(jīng)常創(chuàng)建類似的項目，反復(fù)重新創(chuàng)建文件夾結(jié)構(gòu)，複製配置文件和樣板代碼，則此方法尤其有益。

與使用另一個開發(fā)人員代碼的分叉不同，模板存儲庫使您可以重複使用自己的代碼，並確保每個新項目都保持自己的獨立GIT歷史記錄。

本指南展示了使用高度項目以示例來設(shè)置精簡的工作流程（儘管適用於Hugo，Jekyll，Nuxt或其他）。完整的示例存儲庫可供參考。

創(chuàng)建模板

首先使用命令行創(chuàng)建項目目錄：

 CD?
Mkdir靜態(tài)位點模板
CD靜態(tài)位點模板

這將導(dǎo)航到您的主目錄，創(chuàng)建一個新的目錄並輸入。

節(jié)點項目初始化

高度需要Node.js，允許JavaScript在Web瀏覽器外執(zhí)行，而NPM（NODE軟件包管理器）進(jìn)行軟件包安裝。假設(shè)已安裝了node.js，請運行：

 npm init

這會生成package.json ，提示您提供項目元數(shù)據(jù)。

安裝高度

使用package.json創(chuàng)建，將高度安裝作為開發(fā)依賴性：

 NPM安裝-D @11TY/Eleventy

這將高度添加到package.json中。 json並將其安裝到node_modules文件夾中。 package.json確?？绮煌瑱C(jī)器的項目設(shè)置一致。

高度配置

本教程使用將網(wǎng)站源代碼與項目文件分開的配置，包括HTML文檔，CSS和JavaScript。創(chuàng)建必要的目錄結(jié)構(gòu)：

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

要配置高度以使用src目錄並複制css和js文件，請創(chuàng)建.eleventy.js ：

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

通過運行測試配置：

 NPX @11ty/升高

這將在_site目錄中生成網(wǎng)站。

構(gòu)建樣板網(wǎng)站

創(chuàng)建基本網(wǎng)站內(nèi)容：將以下內(nèi)容添加到src/index.html ：

 


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>靜態(tài)站點模板</title>
  <meta name="description" content="靜態(tài)網(wǎng)站">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">


  <h1>製作您的網(wǎng)站模板的好工作！</h1>
  <script src="js/main.js"></script>

將基本樣式添加到src/css/style.css ：

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

以及一個簡單的JavaScript函數(shù)到src/js/main.js ：

 （功能（） {
  console.log（“調(diào)用靜態(tài)站點模板JavaScript！'）;
}）（）;

運行npx @11ty/eleventy --serve以本地查看該網(wǎng)站。

GitHub存儲庫設(shè)置

初始化git存儲庫：

 git init

創(chuàng)建一個.gitignore文件以排除_site和node_modules ：

 <code>_site/ node_modules/</code>

創(chuàng)建一個github存儲庫（例如， static-site-template ）。然後，推動您的本地存儲庫：

 git添加。
git commit -m“首先提交”
git遠(yuǎn)程添加原點<your_github_repo_url>
git push -U原始大師</your_github_repo_url>

啟用模板存儲庫

在您的github存儲庫設(shè)置中，啟用“模板存儲庫”選項。將出現(xiàn)一個“使用此模板”按鈕，使您可以根據(jù)模板創(chuàng)建新項目。

擴(kuò)展模板

當(dāng)您使用模板開發(fā)新項目時，將可重複使用的組件和改進(jìn)添加回模板存儲庫，以備將來使用。

限制

雖然對類似項目有益，但模板存儲庫可能不適合具有外部依賴性或截然不同要求的複雜項目。請記住，更改模板僅影響未來的項目，而不是現(xiàn)有項目。

該增強(qiáng)指南為創(chuàng)建和利用靜態(tài)站點項目的GitHub模板存儲庫提供了一種更全面和結(jié)構(gòu)化的方法。

以上是使用github模板存儲庫來跳臺啟動靜態(tài)站點項目的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！