ดาวน์โหลด staticfy - staticfy ดาวน์โหลดซอร์สโค้ด

staticfy

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

1.0.0

ดาวน์โหลด

คงที่

ชุดเริ่มต้นพื้นฐานสำหรับไซต์คงที่ที่ใช้ Gatsby.js

เริ่มต้นอย่างรวดเร็ว

เริ่มพัฒนา.

นำทางไปยังไดเร็กทอรีของไซต์ใหม่ของคุณแล้วเริ่มต้นใหม่

 cd my-site/
gatsby develop

เปิดซอร์สโค้ดและเริ่มแก้ไข!

ขณะนี้เว็บไซต์ของคุณทำงานที่ http://localhost:8000 !

หมายเหตุ: คุณจะเห็นลิงก์ที่สอง: http://localhost:8000/___graphql นี่เป็นเครื่องมือที่คุณสามารถใช้เพื่อทดลองค้นหาข้อมูลของคุณได้ เรียนรู้เพิ่มเติมเกี่ยวกับการใช้เครื่องมือนี้ในบทช่วยสอน Gatsby

เปิดไดเร็กทอรี my-site ในโปรแกรมแก้ไขโค้ดที่คุณเลือกและแก้ไข src/pages/index.js บันทึกการเปลี่ยนแปลงของคุณ แล้วเบราว์เซอร์จะอัปเดตแบบเรียลไทม์!

- มีอะไรอยู่ข้างใน

คุณสมบัติ

แกสบี้
TypeScript
Sass, Spectre.css, PostCSS
ทีเอสลินท์
สวยกว่า
สไตล์ลินท์
Lint-staged, Husky, Git Hooks

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

ดูไฟล์และไดเร็กทอรีระดับบนสุดอย่างรวดเร็วที่คุณจะเห็นในโครงการ Gatsby

 .
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

/node_modules : ไดเร็กทอรีนี้ประกอบด้วยโมดูลโค้ดทั้งหมดที่โปรเจ็กต์ของคุณขึ้นอยู่กับ (แพ็คเกจ npm) ที่ได้รับการติดตั้งโดยอัตโนมัติ

/src : ไดเร็กทอรีนี้จะมีโค้ดทั้งหมดที่เกี่ยวข้องกับสิ่งที่คุณจะเห็นในส่วนหน้าของไซต์ของคุณ (สิ่งที่คุณเห็นในเบราว์เซอร์) เช่น ส่วนหัวของไซต์หรือเทมเพลตหน้า src เป็นแบบแผนสำหรับ "ซอร์สโค้ด"

.gitignore : ไฟล์นี้จะบอก git ว่าไฟล์ใดที่ไม่ควรติดตาม / ไม่เก็บประวัติเวอร์ชันไว้

.prettierrc : นี่คือไฟล์กำหนดค่าสำหรับ Prettier Prettier เป็นเครื่องมือที่ช่วยให้การจัดรูปแบบของโค้ดของคุณสอดคล้องกัน

gatsby-browser.js : ไฟล์นี้เป็นที่ที่ Gatsby คาดว่าจะพบการใช้งาน API ของเบราว์เซอร์ Gatsby (ถ้ามี) สิ่งเหล่านี้อนุญาตให้ปรับแต่ง/ขยายการตั้งค่าเริ่มต้นของ Gatsby ที่ส่งผลต่อเบราว์เซอร์

gatsby-config.js : นี่คือไฟล์การกำหนดค่าหลักสำหรับไซต์ Gatsby นี่คือที่ที่คุณสามารถระบุข้อมูลเกี่ยวกับไซต์ของคุณ (ข้อมูลเมตา) เช่น ชื่อไซต์และคำอธิบาย ปลั๊กอิน Gatsby ใดที่คุณต้องการรวม ฯลฯ (ดูรายละเอียดเพิ่มเติมในเอกสารการตั้งค่า)

gatsby-node.js : ไฟล์นี้เป็นที่ที่ Gatsby คาดว่าจะพบการใช้งาน Gatsby Node API (ถ้ามี) สิ่งเหล่านี้อนุญาตให้ปรับแต่ง/ขยายการตั้งค่าเริ่มต้นของ Gatsby ที่ส่งผลต่อกระบวนการสร้างไซต์

gatsby-ssr.js : ไฟล์นี้เป็นที่ที่ Gatsby คาดว่าจะพบการใช้งาน API การเรนเดอร์ฝั่งเซิร์ฟเวอร์ Gatsby (ถ้ามี) สิ่งเหล่านี้อนุญาตให้ปรับแต่งการตั้งค่าเริ่มต้นของ Gatsby ที่ส่งผลต่อการเรนเดอร์ฝั่งเซิร์ฟเวอร์

LICENSE : Gatsby ได้รับอนุญาตภายใต้ใบอนุญาต MIT

package-lock.json (ดู package.json ด้านล่างก่อน) นี่คือไฟล์ที่สร้างขึ้นโดยอัตโนมัติตามเวอร์ชันที่แน่นอนของการพึ่งพา npm ของคุณที่ติดตั้งสำหรับโปรเจ็กต์ของคุณ (คุณจะไม่เปลี่ยนไฟล์นี้โดยตรง)

package.json : ไฟล์ Manifest สำหรับโปรเจ็กต์ Node.js ซึ่งประกอบด้วยสิ่งต่างๆ เช่น ข้อมูลเมตา (ชื่อโปรเจ็กต์ ผู้เขียน ฯลฯ) รายการนี้คือวิธีที่ npm รู้ว่าควรติดตั้งแพ็คเกจใดสำหรับโปรเจ็กต์ของคุณ

README.md : ไฟล์ข้อความที่มีข้อมูลอ้างอิงที่เป็นประโยชน์เกี่ยวกับโครงการของคุณ

yarn.lock : Yarn เป็นทางเลือกผู้จัดการแพ็คเกจแทน npm คุณสามารถใช้เส้นด้ายหรือ npm ก็ได้ แม้ว่าเอกสาร Gatsby ทั้งหมดจะอ้างอิงถึง npm ก็ตาม ไฟล์นี้มีจุดประสงค์หลักเดียวกันกับ package-lock.json สำหรับระบบการจัดการแพ็คเกจอื่นเท่านั้น