Githubテンプレートリポジトリを使用して、静的サイトプロジェクトをジャンプします

GitHubテンプレートリポジトリを活用して、静的サイトジェネレータープロジェクトを合理化し、セットアップ時間を大幅に短縮します。ほとんどの静的サイトジェネレーターは簡単なインストールを提供しますが、プロジェクトの構成は繰り返しのタスクのままです。同様のプロジェクトを頻繁に作成し、フォルダー構造を繰り返し再作成し、構成ファイルをコピーし、ボイラープレートコードを頻繁に作成する場合、このアプローチは特に有益です。

別の開発者のコ​​ードを利用するフォーキングとは異なり、テンプレートリポジトリを使用すると、独自のコードを再利用して、新しいプロジェクトごとに独自の独立したGit履歴を維持することができます。

このガイドは、例として、Eleventy Projectを使用して合理化されたワークフローのセットアップを示しています（Hugo、Jekyll、Nuxtなどに適応可能です）。記入済みのサンプルリポジトリは参照できます。

テンプレートを作成します

コマンドラインを使用してプロジェクトディレクトリを作成することから始めます。

 CD〜
mkdir static-site-template
CD static-site-template

これは、ホームディレクトリに移動し、新しいディレクトリを作成し、入力します。

ノードプロジェクトの初期化

node.jsが必要です。これにより、パッケージインストールのためにWebブラウザーの外でJavaScriptの実行が可能になり、NPM（ノードパッケージマネージャー）が必要です。 node.jsがインストールされていると仮定して、実行してください。

 npm init

これにより、 package.jsonが生成され、プロジェクトメタデータの提供が求められます。

インストール

package.jsonが作成されて、開発依存関係としてEleventyをインストールします。

 npm install -d @11ty/ロー

これにより、 package.jsonにEleventyが追加され、 node_modulesフォルダーにインストールされます。 package.json 、さまざまなマシン間で一貫したプロジェクトのセットアップを保証します。

110の構成

このチュートリアルでは、Webサイトソースコードをプロジェクトファイルから分離する構成を使用して、HTMLドキュメント、CSS、およびJavaScriptが含まれています。必要なディレクトリ構造を作成します。

 MKDIR SRC SRC/CSS SRC/JS
index.html css/style.css js/main.jsをタッチします

srcディレクトリを使用してcssおよびjsファイルをコピーするようにEleventyを構成するには、 .eleventy.jsを作成します。

 module.exports = function（eleventyconfig）{
  Eleventyconfig.addpassthroughcopy（ "src/css"）;
  Eleventyconfig.addpassthroughcopy（ "src/js"）;
  戻る {
    dir：{
      入力：「SRC」
    }
  };
};

実行して構成をテストします。

 npx @11ty/leeventy

これにより、 _siteディレクトリでWebサイトが生成されます。

ボイラープレートのウェブサイトの構築

基本的なWebサイトのコンテンツを作成します： 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;
}

そして、 src/js/main.jsの単純なJavaScript関数：

 （関数（） {
  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 add。
gitcump -m「最初のコミット」
Git Remote Add Origin<your_github_repo_url>
Git Push -U Origin Master</your_github_repo_url>

テンプレートリポジトリを有効にします

GitHubリポジトリ設定では、「テンプレートリポジトリ」オプションを有効にします。 「このテンプレートを使用」ボタンが表示され、テンプレートに基づいて新しいプロジェクトを作成できます。

テンプレートを拡張します

テンプレートを使用して新しいプロジェクトを開発するときは、再利用可能なコンポーネントと改善をテンプレートリポジトリに追加して将来使用して追加します。

制限

同様のプロジェクトには有益ですが、テンプレートリポジトリは、外部依存関係や非常に異なる要件を備えた複雑なプロジェクトに適していない場合があります。テンプレートの変更は、既存のプロジェクトではなく、将来のプロジェクトにのみ影響することに注意してください。

この拡張ガイドは、静的サイトプロジェクトのGitHubテンプレートリポジトリを作成および利用するための、より包括的で構造化されたアプローチを提供します。

以上がGithubテンプレートリポジトリを使用して、静的サイトプロジェクトをジャンプしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。