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

與使用另一個(gè)開(kāi)發(fā)人員代碼的分叉不同，模板存儲(chǔ)庫(kù)使您可以重復(fù)使用自己的代碼，并確保每個(gè)新項(xiàng)目都保持自己的獨(dú)立GIT歷史記錄。

本指南展示了使用高度項(xiàng)目以示例來(lái)設(shè)置精簡(jiǎn)的工作流程（盡管適用于Hugo，Jekyll，Nuxt或其他）。完整的示例存儲(chǔ)庫(kù)可供參考。

創(chuàng)建模板

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

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

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

節(jié)點(diǎn)項(xiàng)目初始化

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

 npm init

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

安裝高度

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

 NPM安裝-D @11TY/Eleventy

這將高度添加到package.json中。json并將其安裝到node_modules文件夾中。 package.json確保跨不同機(jī)器的項(xiàng)目設(shè)置一致。

高度配置

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

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

要配置高度以使用src目錄并復(fù)制css和js文件，請(qǐng)創(chuàng)建.eleventy.js ：

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

通過(guò)運(yùn)行測(cè)試配置：

 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)站點(diǎn)模板</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;
}

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

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

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

GitHub存儲(chǔ)庫(kù)設(shè)置

初始化git存儲(chǔ)庫(kù)：

 git init

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

 <code>_site/ node_modules/</code>

創(chuàng)建一個(gè)github存儲(chǔ)庫(kù)（例如， static-site-template ）。然后，推動(dòng)您的本地存儲(chǔ)庫(kù)：

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

啟用模板存儲(chǔ)庫(kù)

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

擴(kuò)展模板

當(dāng)您使用模板開(kāi)發(fā)新項(xiàng)目時(shí)，將可重復(fù)使用的組件和改進(jìn)添加回模板存儲(chǔ)庫(kù)，以備將來(lái)使用。

限制

雖然對(duì)類似項(xiàng)目有益，但模板存儲(chǔ)庫(kù)可能不適合具有外部依賴性或截然不同要求的復(fù)雜項(xiàng)目。請(qǐng)記住，更改模板僅影響未來(lái)的項(xiàng)目，而不是現(xiàn)有項(xiàng)目。

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

以上是使用github模板存儲(chǔ)庫(kù)來(lái)跳臺(tái)啟動(dòng)靜態(tài)站點(diǎn)項(xiàng)目的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！