วิธีการติดตั้ง Gatsby บน Ubuntu 20.04

ในบทความนี้ เราจะอธิบายวิธีการติดตั้ง Gatsby บน Ubuntu 20.04

Gatsby เป็นเฟรมเวิร์กโอเพนซอร์ซที่ใช้ React สำหรับสร้างเว็บไซต์และแอพ ไม่ว่าคุณจะสร้างเว็บไซต์หรือบล็อกพอร์ตโฟลิโอ หรือร้านค้าอีคอมเมิร์ซที่มีการเข้าชมสูงหรือหน้าแรกของบริษัทก็ตาม สร้างเว็บไซต์และแอพที่รวดเร็วทันใจ และควบคุมพลังของปลั๊กอินมากกว่า 2,000 รายการ สร้างเว็บไซต์ด้วยบริการที่คุณต้องการ เช่น Shopify, Stripe และ WordPress อย่างรวดเร็วและง่ายดายด้วยปลั๊กอินมากกว่า 2000+ ของ Gatsby รวมข้อมูลจากทุกที่: API, ฐานข้อมูล, CMS, ไฟล์สแตติก — หรือหลายแหล่งพร้อมกัน

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

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

• Ubuntu 20.04 ติดตั้งเซิร์ฟเวอร์เฉพาะหรือ KVM VPS
• ผู้ใช้รูทหรือผู้ใช้ปกติที่มีสิทธิ์ของผู้ดูแลระบบ sudo

ติดตั้ง Gatsby บน Ubuntu 20.04

ขั้นตอนที่ 1 - ปรับปรุงเซิร์ฟเวอร์ให้ทันสมัยอยู่เสมอ

# apt update -y && apt upgrade -y

ขั้นตอนที่ 2 - ติดตั้ง NodeJS และ NPM

ติดตั้ง NodeJS เวอร์ชันเสถียรล่าสุด

# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

# apt-get install -y nodejs

ตรวจสอบว่าการติดตั้งสำเร็จ

# node -v && npm -v

เอาท์พุท:

v15.9.0
7.5.4

ขั้นตอนที่ 3 - ติดตั้ง gatsby-cli

Gatsby CLI ( gatsby-cli ) ถูกบรรจุเป็นไฟล์ปฏิบัติการที่สามารถใช้ได้ทั่วโลก Gatsby CLI สามารถใช้ได้ผ่านทางNPM รันคำสั่งต่อไปนี้เพื่อติดตั้งgatsby-cli :

# npm install -g gatsby-cli

ตรวจสอบการติดตั้ง:

# gatsby --version

เอาท์พุท:

# Gatsby CLI version: 2.19.1

ขั้นตอนที่ 4 - ปรับใช้ไซต์ใหม่

ในการสร้างไซต์ Gatsby ใหม่ ให้รันคำสั่งต่อไปนี้:

# gatsby new

เอาท์พุท:

create-gatsby version 0.5.1

Welcome to Gatsby!

This command will generate a new Gatsby site for you in /root with the setup you select. Let’s answer some
questions:

What would you like to call your site?
· My Gatsby Site

CLI จะเรียกใช้เชลล์แบบโต้ตอบเพื่อขอตัวเลือกเหล่านี้ก่อนที่จะสร้างไซต์ Gatsby ให้กับคุณ เลือกและกรอกตามข้อกำหนดเว็บไซต์ของคุณ มันจะสร้างเว็บไซต์ Gatsby และไดเรกทอรีราก /

ดูคำสั่งทั้งหมดได้ที่ https://www.gatsbyjs.com/docs/gatsby-cli/

การสร้างไซต์ตั้งแต่เริ่มต้น

ในการสร้างไซต์ Gatsby ชื่อmy-awesome-siteโดยใช้ตัวเริ่มต้นเริ่มต้น ให้รันคำสั่งต่อไปนี้:

# gatsby new my-awesome-site

เหนือคำสั่งจะสร้างน่ากลัว-เว็บไซต์ของฉันไดเรกทอรีราก /

ดูเอกสารสำหรับผู้เริ่มต้นของ Gatsby สำหรับรายละเอียดเพิ่มเติม

พัฒนา

เมื่อคุณติดตั้งไซต์ Gatsby แล้ว ให้ไปที่ไดเร็กทอรีรากของโครงการของคุณ และเริ่มเซิร์ฟเวอร์การพัฒนาโดยใช้คำสั่งต่อไปนี้:

# cd my-awesome-site

# gatsby develop -H 0.0.0.0

ตัวเลือก:

• -H, --host ตั้งค่าโฮสต์ ค่าเริ่มต้นเป็น localhost
• -p, --port ตั้งค่าพอร์ต ค่าเริ่มต้นเป็น env.PORT หรือ 8000
• -o, --open เปิดเว็บไซต์ในเบราว์เซอร์ (ค่าเริ่มต้น) สำหรับคุณ
• -S, --https ใช้ HTTPS

คุณสามารถดูไซต์ของฉันในเบราว์เซอร์ได้แล้ว

Local: http://localhost:8000/
On Your Network: http://192.168.0.102:8000/

สร้าง

ที่รากของไซต์ Gatsby ให้คอมไพล์แอปพลิเคชันของคุณและทำให้พร้อมสำหรับการปรับใช้:

# gatsby build

ตัวเลือก

• --prefix-paths สร้างไซต์ที่มีลิงก์พา ธ นำหน้า (ตั้งค่า pathPrefix ในการกำหนดค่าของคุณ)
• --no-uglify สร้างไซต์โดยไม่ต้อง uglifying JS บันเดิล (สำหรับการดีบัก)
• --profile สร้างไซต์ด้วยการทำโปรไฟล์แบบโต้ตอบ ดูประสิทธิภาพของเว็บไซต์โปรไฟล์ด้วย React Profiler
• --open-tracing-config-file ไฟล์การกำหนดค่า Tracer (รองรับ OpenTracing) ดูการติดตามประสิทธิภาพ
• --graphql-tracing Trace (ดูด้านบน) ตัวแก้ไข graphql ทุกตัวอาจมีผลกระทบต่อประสิทธิภาพ
• --no-color, --no-colors ปิดใช้งานเอาต์พุตเทอร์มินัลสี

แค่นั้นแหละ. การติดตั้งเสร็จสมบูรณ์แล้ว