Unduh hugo boilerplate - Unduh Kode Sumber hugo boilerplate

hugo boilerplate

Kategori lainnya

1.0.0

Unduh

Hugo Boilerplate

Hugo Boilerplate untuk membangun situs web modern?

Boilerplate ini membungkus Hugo dengan Gulp sebagai pipa pembangunan lokal Anda.

PostCSS dan Webpack + Babel digunakan untuk CSS dan JS mengkompilasi & mentranspiling.

Browsersync digunakan untuk memberikan pengalaman pengembangan lokal modern, memungkinkan Anda untuk mempratinjau situs Anda di beberapa perangkat yang disinkronkan.

BrowserSlist digunakan untuk mengkonfigurasi dukungan browser.

SVG Sprite digunakan untuk menghasilkan sprite SVG.

Instalasi

Prasyarat

Untuk menggunakan Gulp, Anda harus menginstal Node dan NPM.

Pengaturan

Setelah prasyarat dipasang, klon repositori ke mesin lokal Anda, dan kemudian jalankan:

 npm install

Ini akan menginstal Hugo serta semua dependensi simpul yang diperlukan untuk menjalankan lingkungan Hugo Anda. Ini mungkin butuh beberapa saat!

Perkembangan

Semua tugas pengembangan dilakukan dengan menggunakan NPM Run. Lihat "scripts" di package.json untuk daftar lengkap perintah.

Pengembangan Lokal

Pengembangan lokal didukung oleh Browsersync, Anda akan dapat mengembangkan situs dengan cepat melalui:

Server pengembangan lokal di http://localhost:3000/ .
Pembaruan Otomatis CSS tanpa memuat ulang halaman
Reload Halaman Otomatis Saat Konten Diubah

Menjalankan server pengembangan lokal sesederhana berjalan:

 npm start

Ini akan menampilkan semua konten draft, tanggal di masa depan, atau kedaluwarsa, yang tidak termasuk dalam pembangunan produksi Anda.

Jika Anda ingin berkembang dengan situs karena akan muncul dalam produksi, jalankan:

 npm run preview

Pembangunan produksi

Untuk menghasilkan build produksi akhir di mesin lokal Anda dapat Anda jalankan:

 npm run build

Bangunan produksi baru dari situs Anda akan berakhir di dist/ Direktori.

Perintah Hugo

Semua perintah CLI Hugo dapat dijalankan melalui NPM dengan menjalankan:

 npm run hugo -- <command> --<param>

Misalnya:

 npm run hugo -- new posts/example-post.md
// => creates a new post at hugo/content/posts/example-post.md

Struktur proyek

 .
├── .tmp/                  // Temporary directory for development server
├── dist/                  // The production build
├── hugo/                  // The Hugo project; content, data and static files
|   ├── .forestry/         // Contains Forestry.io configuration files
|   ├── content/           // Where all site content is stored 
|   ├── data/              // TOML, YAML or JSON files containing site data 
|   ├── layouts/           // Your site's layouts
|   |   ├── partials/      // Your site's partials
|   |   └── shortcodes/    // Your site's shortcodes
|   ├── static/            // Where all static files live
|   |   ├── css/           // Where compiled CSS files live
|   |   ├── js/            // Where compiled JS files live
|   |   └── uploads/       // Where user uploads are stored
|   └── config.toml        // The Hugo configuration file
└─── src/
     ├── css               // CSS/SCSS source files to be compiled to /css/
     └── js                // JS source files to be compiled to /js/

Inline SVG

SVG apa pun yang ditemukan dalam src/img/ akan digabungkan menjadi sprite SVG tunggal di hugo/static/svg/sprite.symbol.svg .

Boilerplate ini hadir dengan parsial sederhana untuk menggunakan SVG di tata letak Anda. Anda dapat memilih SVG dengan menyerahkan ID ID.

 {{/* Using a logo stored at src/img/github.svg */}}
{{ partial "svg" (dict "id" "github" "class" "optional-class" "width" 32 "height" 32) -}}

Catatan: Param class , width , dan height adalah opsional

Pengujian

Boilerplate ini hadir dengan konfigurasi Eslint dan Stylelint standar yang akan meletakkan CSS dan JS Anda untuk kesalahan atau masalah gaya umum, yang bekerja dengan IDE paling populer.

Tes juga dapat dijalankan dari baris perintah:

JS: npm run eslint
CSS: npm run stylelint

Jika Anda ingin secara otomatis memperbaiki kesalahan serat, Anda dapat melakukan ini dari baris perintah juga:

JS: npm run eslint:fix
CSS: npm run stylelint:fix

Pembersihan

Boilerplate ini membersihkan sendiri, dan akan menghapus produksi produksi dist/ dan pengembangan .tmp/ folder setiap kali perintah dijalankan untuk memastikan bahwa isinya selalu terkini.

Jika Anda ingin membersihkan secara manual, jalankan:

 npm run clean

Konfigurasi

Semua tugas membangun ditangani oleh Gulp dan terletak di gulpfile.babel.js . Semua bagian build dapat dikonfigurasi dalam file diskrit untuk memudahkan manajemen.

Jalan setapak

Semua jalur pembuatan dan jalur tujuan dapat dikonfigurasi dari gulp.config.js .

Hugo

Perintah build untuk hugp dapat dikonfigurasi dari gulp.config.js . Perintah build diatur berdasarkan variabel lingkungan NODE_ENV . Anda secara opsional dapat memuat arg yang berbeda menggunakan variabel lingkungan GENERATOR_ARGS .

Empat opsi tersedia:

default : perintah build default yang selalu dijalankan
development : Perintah Bangunan Tambahan untuk Server Pengembangan
preview : Perintah pembuatan tambahan untuk server pengembangan produksi
production : Perintah Bangunan Tambahan untuk Bangunan Produksi

Server Pengembangan BrowserSync

Konfigurasi untuk browsersync ditemukan di .browsersyncrc.js

CSS/SASS

Konfigurasi untuk postcss ditemukan di .postcssrc.js

Javascript

Konfigurasi untuk Webpack ditemukan di .webpackrc.js

Dukungan Browser

Baik postcss dan Webpack menggunakan .browserslistrc untuk memutuskan dukungan browser saat menyusun.

Tips & Sumber Daya

Untuk belajar tentang cara berkembang dengan Hugo, lihat dokumentasi Hugo
Untuk mempelajari cara menggunakan sistem templating Hugo, lihat dokumentasi
File statis harus disimpan di hugo/static/ folder seperti yang harus muncul di situs yang dibangun misalnya, file cname harus disimpan di hugo/static/CNAME untuk menjadi /CNAME
File JavaScript dikompilasi dari root src/js/ TO js/{filename}.js
- JavaScript dapat ditulis menggunakan ES6, mendukung require() dan pernyataan import dari paket NPM dan file JS lokal
File CSS dikompilasi dari root src/css/ ke css/{filename}.css
- Pernyataan impor diselesaikan dan termasuk dalam file CSS yang dikompilasi
Untuk kompatibilitas dengan kehutanan atau CMS lainnya, pastikan bahwa file CSS dan JS yang dikompilasi di hugo/ folder selalu berkomitmen
Variabel lingkungan disediakan untuk templat Anda, yang dapat diakses dalam templat sebagai berikut: {{ getenv "HUGO_ENV" }}
- Untuk pipa pengembangan, ini sama dengan development
- Untuk pipa produksi, ini sama dengan production
- Untuk fitur pratinjau dalam aplikasi kehutanan, ini sama dengan staging

Menggunakan dengan kehutanan

Repositori ini dilengkapi dengan konten contoh dasar yang telah dikonfigurasi sebelumnya untuk bekerja dengan kehutanan, yang dapat Anda gunakan untuk mulai membangun situs Anda.