使用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中文網其他相關文章！