Menggunakan repos template github untuk memulakan projek tapak statik

Leverage GitHub Template Repositori untuk menyelaraskan projek penjana tapak statik anda dan mengurangkan masa persediaan dengan ketara. Walaupun kebanyakan penjana tapak statik menawarkan pemasangan mudah, konfigurasi projek tetap menjadi tugas berulang. Pendekatan ini amat bermanfaat jika anda sering membuat projek yang sama, berulang kali mencipta struktur folder, menyalin fail konfigurasi, dan kod boilerplate.

Tidak seperti Forking, yang menggunakan kod pemaju lain , repositori template membolehkan anda menggunakan semula kod anda sendiri , memastikan setiap projek baru mengekalkan sejarah git bebasnya sendiri .

Panduan ini menunjukkan menubuhkan aliran kerja yang diselaraskan menggunakan projek sebanyak sebelas sebagai contoh (walaupun boleh disesuaikan dengan Hugo, Jekyll, Nuxt, atau lain -lain). Repositori contoh yang lengkap tersedia untuk rujukan.

Membuat templat anda

Mulakan dengan membuat direktori projek menggunakan baris arahan:

 cd ~
MKDIR-Template-template
CD-statik tapak-templat

Ini menavigasi ke direktori rumah anda, mewujudkan direktori baru, dan memasukinya.

Inisialisasi projek nod

Sebelas memerlukan Node.js, yang membolehkan pelaksanaan JavaScript di luar pelayar web, dan NPM (Pengurus Pakej Node) untuk pemasangan pakej. Dengan mengandaikan node.js dipasang, jalankan:

 NPM INIT

Ini menjana package.json , mendorong anda untuk menyediakan metadata projek.

Memasang Eleventy

Dengan package.json dicipta, pasang Eleventy sebagai kebergantungan pembangunan:

 NPM Install -d @11ty/Eleventy

Ini menambah Eleventy ke package.json dan memasangnya ke folder node_modules . package.json memastikan persediaan projek yang konsisten merentasi mesin yang berbeza.

Sebelas konfigurasi

Tutorial ini menggunakan konfigurasi yang memisahkan kod sumber laman web dari fail projek, termasuk dokumen HTML, CSS, dan JavaScript. Buat struktur direktori yang diperlukan:

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

Untuk mengkonfigurasi Eleventy untuk menggunakan direktori src dan menyalin fail css dan js , buat .eleventy.js :

 modul.exports = fungsi (EleventyConFig) {
  EleventyConfig.addpassthroughCopy ("src/css");
  ELEVENTYCONFIG.ADDPASSTHOUGHCOPY ("SRC/JS");
  kembali {
    dir: {
      Input: "SRC"
    }
  };
};

Uji konfigurasi dengan menjalankan:

 NPX @11Ty/Eleventy

Ini menjana laman web dalam direktori _site .

Membina laman web boilerplate

Buat Kandungan Laman Web Asas: Tambahkan yang berikut ke src/index.html :

 


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Templat tapak statik</title>
  <meta name="description" content="Laman web statik">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">


  <h1 id="Kerja-yang-hebat-menjadikan-template-laman-web-anda">Kerja yang hebat menjadikan template laman web anda!</h1>
  <script src="js/main.js"></script>

Tambah gaya asas ke src/css/style.css :

 badan {
  font-family: sans-serif;
}

Dan fungsi JavaScript mudah untuk src/js/main.js :

 (fungsi () {
  Console.log ('Memohon template tapak statik JavaScript!');
}) ();

Jalankan npx @11ty/eleventy --serve untuk melihat laman web secara tempatan.

Persediaan repositori GitHub

Memulakan repositori Git:

 git init

Buat fail .gitignore untuk mengecualikan _site dan node_modules :

 <code>_site/ node_modules/</code>

Buat repositori GitHub (contohnya, static-site-template ). Kemudian, tolak repositori tempatan anda:

 tambah git.
git komit -m "komit pertama"
Git Jauh Tambah Asal<your_github_repo_url>
Git Push -U Asal Master</your_github_repo_url>

Membolehkan repositori templat

Dalam tetapan repositori GitHub anda, aktifkan pilihan "Repositori Template". Butang "Gunakan Templat Ini" akan muncul, membolehkan anda membuat projek baru berdasarkan templat anda.

Memperluas templat

Semasa anda membangunkan projek baru menggunakan templat, tambahkan komponen yang boleh diguna semula dan penambahbaikan kembali ke repositori templat untuk kegunaan masa depan.

Batasan

Walaupun bermanfaat untuk projek yang sama, repositori templat mungkin tidak sesuai untuk projek -projek yang kompleks dengan kebergantungan luaran atau keperluan yang sangat berbeza. Ingatlah bahawa perubahan pada template hanya mempengaruhi projek masa depan, bukan yang ada.

Panduan yang dipertingkatkan ini memberikan pendekatan yang lebih komprehensif dan berstruktur untuk mewujudkan dan menggunakan repositori templat GitHub untuk projek tapak statik.

Atas ialah kandungan terperinci Menggunakan repos template github untuk memulakan projek tapak statik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!