ดาวน์โหลด hugo boilerplate - hugo boilerplate Source Source Download

hugo boilerplate

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

Hugo Boilerplate

Hugo Boilerplate สำหรับการสร้างเว็บไซต์ที่ทันสมัย?

แผ่นหม้อไอน้ำนี้ห่อหุ้มฮังโกะด้วยอึกขณะที่การพัฒนาในพื้นที่ของคุณสร้างท่อส่ง

POSTCSS และ WebPack + Babel ใช้สำหรับ CSS และ JS Compiling & Transpiling

Browsersync ใช้สำหรับมอบประสบการณ์การพัฒนาท้องถิ่นที่ทันสมัยช่วยให้คุณสามารถดูตัวอย่างไซต์ของคุณบนอุปกรณ์หลายเครื่องที่ซิงค์

เบราว์เซอร์ลิสต์ใช้สำหรับการกำหนดค่าการสนับสนุนเบราว์เซอร์

SVG Sprite ใช้เพื่อสร้างสไปรต์ SVG

การติดตั้ง

ข้อกำหนดเบื้องต้น

ในการใช้อึกคุณต้องติดตั้งโหนดและ NPM

การตั้งค่า

เมื่อมีการติดตั้งสิ่งที่จำเป็นต้องมี

 npm install

สิ่งนี้จะติดตั้ง Hugo รวมถึงการพึ่งพาโหนดทั้งหมดที่จำเป็นในการเรียกใช้สภาพแวดล้อม Hugo ของคุณ อาจใช้เวลาสักครู่!

การพัฒนา

งานการพัฒนาทั้งหมดดำเนินการโดยใช้ NPM Run ดู "scripts" ใน package.json สำหรับรายการคำสั่งทั้งหมด

การพัฒนาท้องถิ่น

การพัฒนาในท้องถิ่นใช้พลังงานจาก Browsersync คุณจะสามารถพัฒนาเว็บไซต์ได้อย่างรวดเร็ว:

เซิร์ฟเวอร์การพัฒนาท้องถิ่นที่ http://localhost:3000/
การอัปเดต CSS อัตโนมัติโดยไม่ต้องโหลดหน้าใหม่
การโหลดหน้าอัตโนมัติเมื่อมีการเปลี่ยนแปลงเนื้อหา

การรันเซิร์ฟเวอร์การพัฒนาในพื้นที่นั้นง่ายเหมือนการทำงาน:

 npm start

สิ่งนี้จะแสดงเนื้อหาทั้งหมดในอนาคตหรือเนื้อหาที่หมดอายุซึ่งไม่รวมอยู่ในการสร้างการผลิตของคุณ

หากคุณต้องการพัฒนากับไซต์ตามที่ปรากฏในการผลิต Run:

 npm run preview

การผลิต

ในการสร้างการสร้างการผลิตขั้นสุดท้ายบนเครื่องในพื้นที่ของคุณคุณสามารถเรียกใช้:

 npm run build

การผลิตใหม่ของเว็บไซต์ของคุณจะจบลงใน dist/ Directory

คำสั่ง Hugo

คำสั่ง CLI ของ Hugo ทั้งหมดสามารถเรียกใช้ผ่าน NPM ได้โดยเรียกใช้:

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

ตัวอย่างเช่น:

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

โครงสร้างโครงการ

 .
├── .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/

SVG แบบอินไลน์

SVG ใด ๆ ที่พบใน src/img/ จะรวมกันเป็นสไปรต์ SVG เดียวที่ hugo/static/svg/sprite.symbol.svg

แผ่นหม้อไอน้ำนี้มาพร้อมกับบางส่วนง่าย ๆ สำหรับการใช้ SVGs ในเลย์เอาต์ของคุณ คุณสามารถเลือก SVG โดยผ่าน ID ของมัน

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

หมายเหตุ: พารามิเตอร์ class width และ height เป็นทางเลือก

การทดสอบ

แผ่นหม้อไอน้ำนี้มาพร้อมกับการกำหนดค่า ESLINT และ StyleLint ที่จะเป็นมาตรฐาน CSS และ JS ของคุณสำหรับข้อผิดพลาดหรือปัญหาสไตล์ทั่วไปซึ่งทำงานกับ IDE ที่ได้รับความนิยมมากที่สุด

การทดสอบสามารถเรียกใช้จากบรรทัดคำสั่ง:

JS: npm run eslint
CSS: npm run stylelint

หากคุณต้องการแก้ไขข้อผิดพลาดของผ้าสำลีโดยอัตโนมัติคุณสามารถทำได้จากบรรทัดคำสั่งเช่นกัน:

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

การทำความสะอาด

แผ่นหม้อต้มนี้เป็นการทำความสะอาดตัวเองและจะลบการผลิต dist/ และการพัฒนา .tmp/ โฟลเดอร์ทุกครั้งที่คำสั่งทำงานเพื่อให้แน่ใจว่าเนื้อหาของพวกเขาเป็นข้อมูลล่าสุดเสมอ

หากคุณต้องการทำความสะอาดด้วยตนเอง Run:

 npm run clean

การกำหนดค่า

งานสร้างทั้งหมดได้รับการจัดการโดยอึกและตั้งอยู่ใน gulpfile.babel.js ทุกส่วนของบิลด์สามารถกำหนดค่าได้ในไฟล์ที่ไม่ต่อเนื่องเพื่อให้การจัดการง่ายขึ้น

เส้นทาง

เส้นทางการสร้างและเส้นทางปลายทางทั้งหมดสามารถกำหนดค่าได้จาก gulp.config.js

Hugo

คำสั่ง build สำหรับ Hugp สามารถกำหนดค่าได้จาก gulp.config.js คำสั่ง build ถูกตั้งค่าตามตัวแปรสภาพแวดล้อม NODE_ENV คุณสามารถเลือกโหลด args ที่แตกต่างกันโดยใช้ตัวแปรสภาพแวดล้อม GENERATOR_ARGS

มีสี่ตัวเลือก:

default : คำสั่ง build เริ่มต้นที่ทำงานอยู่เสมอ
development : คำสั่ง build เพิ่มเติมสำหรับเซิร์ฟเวอร์การพัฒนา
preview : คำสั่ง build เพิ่มเติมสำหรับเซิร์ฟเวอร์การพัฒนาการผลิต
production : คำสั่งบิลด์เพิ่มเติมสำหรับการผลิต

เซิร์ฟเวอร์การพัฒนาเบราว์เซอร์ซินซี

การกำหนดค่าสำหรับ Browsersync พบได้ใน .browsersyncrc.js

CSS/SASS

การกำหนดค่าสำหรับ postcss พบได้ใน .postcssrc.js

จาวาสคริปต์

การกำหนดค่าสำหรับ webpack พบได้ใน .webpackrc.js

การสนับสนุนเบราว์เซอร์

ทั้ง postcss และ webpack ใช้ .browserslistrc เพื่อตัดสินใจเกี่ยวกับการสนับสนุนเบราว์เซอร์เมื่อรวบรวม

เคล็ดลับและทรัพยากร

หากต้องการเรียนรู้เกี่ยวกับวิธีการพัฒนากับ Hugo ดูเอกสารของ Hugo
หากต้องการเรียนรู้วิธีใช้ระบบเทมเพลตของ Hugo ดูเอกสารประกอบ
ไฟล์คงที่ควรเก็บไว้ใน hugo/static/ Folder เนื่องจากควรปรากฏในไซต์ที่สร้างขึ้น เช่นไฟล์ CNAME ควรเก็บไว้ที่ hugo/static/CNAME เพื่อเป็น /CNAME
ไฟล์ JavaScript รวบรวมจากรูทของ src/js/ to js/{filename}.js
- JavaScript สามารถเขียนได้โดยใช้ ES6, สนับสนุน require() และคำสั่ง import จากแพ็คเกจ NPM และไฟล์ JS ในเครื่อง
ไฟล์ CSS รวบรวมจากรูทของ src/css/ ถึง css/{filename}.css
- คำสั่งนำเข้าได้รับการแก้ไขและรวมอยู่ในไฟล์ CSS ที่รวบรวม
สำหรับความเข้ากันได้กับป่าไม้หรือ CMS อื่น ๆ ให้แน่ใจว่าไฟล์ CSS และ JS ที่รวบรวมในโฟลเดอร์ hugo/ Folder นั้นมีความมุ่งมั่นเสมอ
ตัวแปรสภาพแวดล้อมมีไว้สำหรับเทมเพลตของคุณซึ่งสามารถเข้าถึงได้ในเทมเพลตดังนี้: {{ getenv "HUGO_ENV" }}
- สำหรับท่อพัฒนาสิ่งนี้เท่ากับ development
- สำหรับท่อผลิตสิ่งนี้เท่ากับ production
- สำหรับคุณสมบัติการดูตัวอย่างในแอพของ Forestry สิ่งนี้เท่ากับ staging