---
title: "เว็บไซต์แรกของคุณ ตั้งแต่ต้นจนจบ | Briks"
url: https://briks.dev/th/docs/your-first-site
description: "ตามดูร้านเบเกอรีเล็กๆ หนึ่งร้านตั้งแต่ New project ไปจนถึงพรีวิวบน briks.live การแก้ไขครั้งแรกในแชต และ Publish ไปยังเวอร์ชันใช้งานจริง พร้อมทุกหน้าจอตามลำดับ"
last_updated: 2026-10-08
---

# เว็บไซต์แรกของคุณ ตั้งแต่ต้นจนจบ

ตัวอย่างนี้พาไปดูธุรกิจหนึ่งตั้งแต่เวิร์กสเปซว่างเปล่าจนถึงเว็บไซต์สาธารณะ เพื่อให้คุณเห็นทุกหน้าจอหนึ่งครั้งก่อนลงมือเอง ตัวอย่างคือ Larder Lane ร้านเบเกอรีเล็กๆ ในเมืองยอร์ก สร้างด้วย 50 เครดิตของแผน Free

อ่าน 9 นาทีตรวจเทียบกับสตูดิโอเมื่อ 8 ตุลาคม 2569

## ก่อนเริ่มต้น

เตรียมสามอย่างไว้ ได้แก่ ชื่อธุรกิจ ย่อหน้าที่เล่าเกี่ยวกับธุรกิจ และรายการหน้าคร่าว ๆ แซม ผู้ดูแล Larder Lane ต้องการเว็บไซต์ที่แสดงขนมปัง รับพรีออเดอร์วันเสาร์ และบอกผู้คนว่าร้านอยู่ที่ไหนและเปิดเมื่อใด

Sam ใช้แผน Free จึงมี 50 เครดิตและมีที่สำหรับ 1 โปรเจกต์ เว็บไซต์ใหม่จะกัน 50 เครดิตไว้ระหว่างสร้าง เขาจึงเริ่มด้วยยอดเต็มและไม่ได้ใช้เครดิตกับอย่างอื่นก่อน ในฐานะเว็บไซต์แรกของเวิร์กสเปซ Free เว็บไซต์นี้จะถูกสร้างครบทั้งหมดแม้ต้องใช้มากกว่าที่เขามี

## ขั้นแรก: อธิบายธุรกิจ

ที่ไหน

1. Projects
2. New project

คุณยังเริ่มจากช่องพรอมต์บน Home แล้วกด **Continue** ได้ ไม่ว่าทางใดคุณจะไปถึงขั้นตอนตั้งค่าสั้น ๆ เจ็ดขั้น ได้แก่ **What are you making?**, **Describe it**, **Show what you like**, **Your brand**, **Pictures**, **How it is built** และ **Review and create** รายการด้านข้างแสดงว่าคุณอยู่ตรงไหน และ **Back** กับ **Next** ใช้เลื่อนระหว่างขั้นตอน สิ่งที่คุณกรอกจะถูกเก็บไว้ในเบราว์เซอร์นี้จนกว่าการสร้างจะเริ่ม คุณจึงออกไปแล้วกลับมาได้

1. เลือกประเภทและตั้งชื่อ

   ที่ไหน: What are you making?

   Sam เลือก **Website** และพิมพ์ `Larder Lane` ใน **Business or project name** ชื่อนี้จะกลายเป็นที่อยู่แรกของเว็บไซต์ด้วย

2. เขียนคำอธิบาย

   ที่ไหน: Describe it

   ช่องนี้รับได้สูงสุด 25,000 ตัวอักษรและต้องมีอย่างน้อยสิบตัวอักษร คุณพิมพ์หรือพูดก็ได้ แผงด้านล่างแสดงสิ่งที่คำอธิบายที่ดีควรบอก ได้แก่ เว็บไซต์นี้สำหรับใครและอยู่ที่ไหน เสนอหรือทำอะไร ควรให้ความรู้สึกแบบไหน และต้องมีหน้าหรือฟีเจอร์อะไรบ้าง

3. ข้ามขั้นตอนที่ไม่จำเป็น

   ที่ไหน: Show what you like, Your brand

   ทั้งสองช่องมีป้าย **Optional** และเมื่อไม่ได้กรอกอะไร ปุ่มจะแสดง **Skip** แซมไม่มีเว็บไซต์ที่อยากอ้างอิงและไม่มีสีที่กำหนดไว้ เขาจึงข้ามทั้งสองช่องและให้ Briks เลือกให้

4. เก็บรูปภาพที่มีให้ไว้

   ที่ไหน: Pictures

   ตัวเลือกแรกที่ทำเครื่องหมาย **Included** จะนำภาพที่เหมาะสมจากคลังของสตูดิโอมาใช้ และวาดภาพที่ขาดไป โดยไม่คิดค่าภาพ ตัวเลือกอื่นจะวาดทุกภาพใหม่ และเพิ่มราคาต่อภาพเข้าในค่าสร้าง

5. ตรวจดูว่าสร้างขึ้นอย่างไร

   ที่ไหน: How it is built

   **Ask about what is unclear before building** เปิดอยู่ ปล่อยไว้อย่างนั้น Sam ปิดสวิตช์อนุมัติและ **Check the published site**

6. ตรวจทานและสร้าง

   ที่ไหน: Review and create

   ทุกตัวเลือกจะแสดงเป็นรายการ พร้อมทางย้อนกลับไปแก้ไข หมายเหตุใต้รายการบอกว่าโปรเจกต์ใหม่จะกันไว้ 50 เครดิตระหว่างสร้าง ยอดคงเหลือของคุณเท่าไร และเวอร์ชันแรกใช้เวลาไม่กี่นาที หากโปรเจกต์แบบนี้มักต้องใช้มากกว่าที่คุณมี จะมีบรรทัดใต้หมายเหตุแสดงค่าประมาณ แซมกด **Build it**

บรีฟของ Sam Larder Lane, York

> ร้านเบเกอรี่เล็กๆ ในละแวกบ้านที่เมืองยอร์ก เปิดวันพุธถึงวันเสาร์ ขายซาวร์โดว์ ขนมปังไรย์ และขนมอบที่อบเองในร้านทุกเช้า ลูกค้าสั่งขนมปังล่วงหน้าเพื่อมารับวันเสาร์ผ่านฟอร์มง่ายๆ ได้ โดยกรอกชื่อ เบอร์โทร สิ่งที่ต้องการ และเวลามารับ หน้าที่ต้องมี: หน้าแรก ขนมปังของเรา สั่งล่วงหน้า มาหาเราพร้อมเวลาเปิดทำการและเส้นทาง และเรื่องราวสั้นๆ ของเราสองคน โทนอบอุ่น พูดตรงไปตรงมา สีครีมและเขียวเข้ม ใช้ภาพขนมปังขนาดใหญ่ที่ดูจริงใจ

ทำไมเป็นฟอร์มและไม่ใช่ร้านค้า

Sam ขอให้รับพรีออเดอร์ผ่านฟอร์ม ไม่ใช่ชำระเงินออนไลน์ เพราะเขาอยากเริ่มต้นแบบเรียบง่าย ลูกค้าจ่ายที่เคาน์เตอร์ หากต้องการรับชำระเงินออนไลน์ภายหลัง เขาจะเชื่อมต่อผู้ให้บริการชำระเงินของตนเองที่ **Settings**, **Payments** แล้วสั่งให้ทำในคำขอแก้ไข

ปิดขั้นตอนอนุมัติไว้ที่ 50 เครดิต

**Approve the words before building**, **Choose the look from three directions** และ **Choose the hero from four wireframes** แต่ละขั้นจะหยุดการสร้างไว้จนกว่าคุณจะตัดสินใจ การทำต่อหลังจากแต่ละขั้นจะกันเครดิตอีกสูงสุด 50 เครดิต หรือเท่าที่ยอดคงเหลือของคุณมีลงไปถึง 5 และแต่ละส่วนจะถูกคิดเครดิตตามงานที่ทำ หากตั้งไว้ที่ 50 เครดิต การสร้างที่มีหลายจุดหยุดอาจทำให้ยอดคงเหลือของคุณเหลือน้อย ดู [อนุมัติระหว่างสร้าง](https://briks.dev/th/docs/approval-steps)

## ขั้นที่สอง: ตอบคำถาม

โปรเจกต์จะเปิดที่แท็บ **Studio** โดยมีบทสนทนาอยู่ทางซ้ายและพรีวิวอยู่ทางขวา ก่อนวางแผนอะไร Briks จะเตรียมคำถามไว้ไม่กี่ข้อ ป้ายเหนือพรีวิวจะขึ้นว่า 'Waiting for your answers' รายละเอียดทั้งหมดอยู่ใน [คำถามก่อนสร้าง](https://briks.dev/th/docs/questions-before-building)

1. ติ๊กเลือกหน้า

   ที่ไหน: Studio

   Briks แนะนำหน้าต่างๆ จากบรีฟของคุณ **Home** ถูกทำเครื่องหมายเป็น **Always** ติ๊กหรือเอาเครื่องหมายออกจากหน้าที่เหลือได้ และเพิ่มหน้าของคุณเองในช่องที่ระบุว่า 'Add a page, for example Careers' เว็บไซต์เริ่มต้นได้สูงสุด 10 หน้า และทุกหน้าที่ติ๊กไว้จะถูกสร้างอย่างครบถ้วน

2. ตอบคำถามอื่นๆ

   ที่ไหน: Studio

   แต่ละข้อมีตัวเลือกที่ทำเครื่องหมาย **Recommended** และเลือกไว้ให้แล้ว เปลี่ยนข้อที่ไม่ถูกต้อง หรือเลือก **Something else** เพื่อเขียนคำตอบของคุณเอง

3. ส่งคำตอบของคุณ

   ที่ไหน: Studio

   กด **Continue** หรือกด **Decide for me** เพื่อใช้คำตอบที่แนะนำทั้งหมดแทน คุณยังพิมพ์คำตอบด้วยคำพูดของตัวเองในช่องใต้บทสนทนาได้ด้วย

สิ่งที่ Sam เลือก

> แซมเก็บหน้า Home, Our bread, Pre-orders, Visit us และ Our story ไว้ และเพิ่ม `Wholesale` สำหรับคาเฟ่สามแห่งที่เขาส่งสินค้าให้ มีคำถามหนึ่งข้อถามว่าจะรับพรีออเดอร์อย่างไร เขาเลือกคำตอบที่แนะนำ

หกหน้า แล้วกด Continue การสร้างเริ่มทันที

## ขั้นที่สาม: ดูการสร้าง

บทสนทนาจะแสดงแต่ละขั้นตอนตามที่เกิดขึ้น เช่น **Planning the site and its pictures**, **Designing and building**, **Verifying build** และ **Publishing** เวอร์ชันแรกใช้เวลาไม่กี่นาที คุณออกจากหน้านี้ระหว่างที่กำลังสร้างได้ การสร้างจะดำเนินต่อไปและผลลัพธ์จะรออยู่เมื่อคุณกลับมา [การดูการสร้าง](https://briks.dev/th/docs/watching-a-build) อธิบายแต่ละขั้นตอน

เมื่อเผยแพร่เว็บไซต์แล้ว พรีวิวจะแสดงเนื้อหา และป้ายด้านบนจะเปลี่ยนเป็น **Live preview** ปุ่มเหนือพรีวิวให้คุณดูในความกว้างแบบเดสก์ท็อป แท็บเล็ต และโทรศัพท์ โหลดใหม่ เปิดเต็มหน้าจอ หรือเปิดในแท็บใหม่ที่ที่อยู่ของมันเอง เพื่อคลิกดูทุกหน้าเหมือนผู้เข้าชม

เปลี่ยนใจระหว่างสร้าง?

**Stop** จะหยุดการสร้างที่กำลังทำงานก่อนเผยแพร่ เว็บไซต์จึงคงเดิม คุณถูกเรียกเก็บเฉพาะงานที่ทำไปจนถึงตอนหยุด

หากการสร้างรอเครดิตอยู่

ในเว็บไซต์ถัดๆ ไป หรือบนแพ็กเกจแบบชำระเงิน การสร้างที่ส่วนที่เหลือมักใช้เครดิตมากกว่าที่คุณมีจะหยุดเมื่อวางแผนเสร็จ การสนทนาแสดง **Waiting for credits** พร้อมค่าประมาณและเครดิตที่คุณมี และแผนจะถูกเก็บไว้ กด **Get credits** แล้วกด **Resume building** เมื่อมีเครดิต ระบบจะไม่ทำต่อเอง ดู [เครดิตและแพ็กเกจ](https://briks.dev/th/docs/credits-and-plans)

## ขั้นตอนที่สี่: เปิดพรีวิว

การเผยแพร่ครั้งแรกเป็นพรีวิวที่ที่อยู่ซึ่งสร้างจากชื่อโปรเจกต์ ในที่นี้คือ `larder-lane.briks.live` หากชื่อนั้นมีคนใช้แล้ว ระบบจะเพิ่มอักขระอีกไม่กี่ตัวต่อท้าย Owner หรือ Admin เปลี่ยนได้ภายหลัง ดู[ที่อยู่ของเว็บไซต์คุณ](https://briks.dev/th/docs/site-address)

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

- อ่านทุกหน้าบนโทรศัพท์ของคุณเอง ไม่ใช่ดูแค่ในหน้าต่างพรีวิว
- เปิดเมนูและตรวจดูว่าแต่ละหน้าที่คุณเลือกไว้อยู่ในนั้น
- ส่งพรีออเดอร์ทดสอบผ่านแบบฟอร์ม แล้วหาได้ใน **Forms** ของโปรเจกต์

ที่ไหน

1. Projects
2. Larder Lane
3. Settings
4. Forms

## ขั้นตอนที่ห้า: ลองเปลี่ยนหนึ่งอย่าง

แซมสังเกตว่าเวลาเปิดทำการอยู่ค่อนไปทางล่างของหน้า Visit us และรูปในหน้าแรกเป็นครัวซองต์ ทั้งที่เขาขึ้นชื่อเรื่องขนมปังซาวร์โดว์ เขาพิมพ์ข้อความเดียวในช่องใต้บทสนทนา ช่องที่เขียนว่า 'Change the hero, add a page, adjust the colours…'

1. เขียนสิ่งที่ต้องการเปลี่ยน

   ที่ไหน: Studio

   บอกว่าต้องการเปลี่ยนอะไรและตรงไหนด้วยภาษาธรรมดา หนึ่งข้อความใส่การเปลี่ยนแปลงที่เกี่ยวข้องกันได้หลายอย่าง ยาวสูงสุด 6,000 ตัวอักษร และแนบรูปภาพหรือวิดีโอได้สูงสุดหกรายการ

2. ตัดสินใจจากการตรวจ

   ที่ไหน: Studio

   ใต้กล่องข้อความ **Check the site after this change** จะตรวจเว็บไซต์ที่เผยแพร่แล้วในหน้าจอสี่ขนาด และแก้ส่วนที่แสดงผลผิดพลาด ซึ่งใช้เวลาเพิ่มอีกไม่กี่นาทีและใช้เครดิตบางส่วน จึงควรปิดไว้สำหรับการเปลี่ยนแปลงเล็ก ๆ แบบนี้

3. ส่ง

   ที่ไหน: Studio

   กดปุ่มส่ง **Send** การเปลี่ยนแปลงกันเครดิตไว้ 5 เครดิตระหว่างทำงาน หากมีการสร้างกำลังทำงานอยู่ ปุ่มจะกลายเป็น **Queue**: ข้อความจะรอและทำงานเมื่อการสร้างนั้นเสร็จ

การเปลี่ยนแปลงของ Sam

> ที่หน้า Visit us ใส่เวลาเปิดทำการไว้ด้านบนด้วยตัวอักษรขนาดใหญ่: วันพุธถึงวันเสาร์ 8 โมงเช้าถึงบ่ายสอง ที่หน้าแรก เปลี่ยนรูปใหญ่เป็นภาพระยะใกล้ของขนมปังซาวร์โดวบนเขียงไม้

Briks สร้างการเปลี่ยนแปลงและเผยแพร่ไปยังที่อยู่เดิม แล้วพรีวิวก็โหลดใหม่ เวอร์ชันก่อนหน้ายังอยู่ในเวอร์ชันของโปรเจกต์ เผื่อ Sam ต้องการกลับไปใช้

เคล็ดลับ

การพิมพ์คำถามแทนการขอเปลี่ยนแปลง เช่น ‘หน้าไหนมีฟอร์มบ้าง’ จะได้คำตอบในการสนทนา โดยไม่มีการสร้างและไม่มีการกันเครดิต ดู [การถามคำถาม](https://briks.dev/th/docs/asking-questions) และ [การทำการเปลี่ยนแปลง](https://briks.dev/th/docs/making-changes)

## ขั้นตอนที่หก: เผยแพร่เป็นเวอร์ชันใช้งานจริง

เวอร์ชันใช้งานจริงจะเปิดเว็บไซต์เป็นสาธารณะเต็มรูปแบบ เสิร์ชเอนจินจะแสดงเว็บไซต์ในผลการค้นหาได้ และข้อความจากฟอร์มของเว็บไซต์จะถูกส่งถึงคุณทางอีเมล

1. กด Publish

   ที่ไหน: Top bar

   เมื่อเผยแพร่เว็บไซต์แล้ว แถบด้านบนจะแสดง **Preview** และปุ่ม **Publish** ให้กดปุ่มนั้น

2. อ่านหน้าต่างโต้ตอบ

   ที่ไหน: Publish to production

   อธิบายว่าอะไรจะเปลี่ยน Briks ตรวจเว็บไซต์ก่อน รวมถึงลิงก์ หากมีสิ่งที่ต้องแก้ จะไม่มีอะไรเปลี่ยน และสตูดิโอจะบอกคุณว่าต้องแก้อะไร

3. ยืนยัน

   ที่ไหน: Publish to production

   กด **Publish to production** เมื่อเสร็จแล้ว ปุ่มในแถบด้านบนจะแสดง **In production**

การเผยแพร่เป็นเวอร์ชันใช้งานจริง และการย้อนกลับด้วย **Back to preview** ไม่ใช้เครดิต เมื่อเว็บไซต์อยู่ในเวอร์ชันใช้งานจริงแล้ว ทุกการเปลี่ยนแปลงที่คุณส่งจะถูกเผยแพร่ไปที่นั่นด้วย ดูเพิ่มเติมที่ [เผยแพร่เป็นเวอร์ชันใช้งานจริง](https://briks.dev/th/docs/publish-to-production)

## ขั้นตอนที่เจ็ด: โดเมนของคุณเอง

ในแผน Free เว็บไซต์จะอยู่ที่ที่อยู่ `briks.live` ซึ่งใช้งานเป็นเวอร์ชันใช้งานจริงได้เช่นกัน การเชื่อมต่อโดเมนของคุณเอง เช่น `larderlane.co.uk` เริ่มที่แผน Starter

ที่ไหน

1. Projects
2. Larder Lane
3. Settings
4. Domain

ที่นั่นคุณพิมพ์โดเมนใน **Your domain** แล้วกด **Connect domain** จากนั้นเพิ่มระเบียนสามรายการที่บริษัทซึ่งคุณซื้อโดเมนมา ระเบียนคือการตั้งค่าสั้น ๆ ที่บอกอินเทอร์เน็ตว่าโดเมนของคุณชี้ไปที่ใด ในที่นี้คือระเบียน A, CNAME สำหรับ `www` ที่ชี้ไปที่ `edge.briks.live` และระเบียน TXT ชื่อ `_briks` ที่พิสูจน์ว่าโดเมนเป็นของคุณ Briks ตรวจซ้ำทุก 2 นาทีและออกใบรับรองความปลอดภัยให้คุณ [เชื่อมต่อโดเมนของคุณ](https://briks.dev/th/docs/custom-domains) อธิบายขั้นตอนไว้ครบ

## หากเกิดข้อผิดพลาด

### การสร้างล้มเหลว ฉันถูกหักเครดิตไหม

ไม่ คำขอที่ล้มเหลวจะไม่ถูกหักเครดิต และเครดิตที่กันไว้จะกลับเข้ายอดของคุณ โปรเจกต์จะแสดง **Needs attention** ให้อ่านข้อความสุดท้ายในการสนทนา แล้วส่งข้อความถัดไปเพื่อทำต่อ

### ฉันมีเครดิตไม่พอสำหรับการเปลี่ยนแปลง

สตูดิโอจะบอกว่าการเปลี่ยนแปลงนั้นประกอบด้วยอะไรและยอดคงเหลือของคุณเท่าไร และจะไม่เริ่มทำงาน การเปลี่ยนแปลงที่เพิ่มหน้าเว็บอาจถูกปฏิเสธได้เช่นกันเมื่อโดยปกติต้องใช้มากกว่าที่คุณมี พร้อมค่าประมาณ เว็บไซต์ของคุณยังออนไลน์อยู่ Owner สามารถเปลี่ยนไปใช้แผนที่มีเครดิตมากกว่าได้จากหน้าต่างที่เปิดขึ้น หรือจาก **Billing** ดู [เครดิตและแผน](https://briks.dev/th/docs/credits-and-plans)

### สร้างเว็บไซต์ที่สองบนแผน Free ได้ไหม

ไม่ แผน Free มี 1 โปรเจกต์ แผน Pro ขึ้นไปมีมากกว่านั้น ดูตารางแผนใน [เครดิตและแผน](https://briks.dev/th/docs/credits-and-plans)

### ควรมีคนอื่นดูก่อนเผยแพร่

ส่งที่อยู่พรีวิวให้พวกเขา ไม่ต้องมีบัญชี ดู[การแชร์พรีวิว](https://briks.dev/th/docs/sharing-a-preview)

## อ่านต่อ

- [กำลังสร้าง **เริ่มโปรเจกต์ใหม่** ทุกตัวเลือกในหน้า New project ทีละขั้น: ประเภทโปรเจกต์ บรีฟของคุณ เว็บไซต์ที่ชอบ แบรนด์ รูปภาพ ตัวเลือกการสร้าง และค่าใช้จ่ายเมื่อเริ่มต้น](https://briks.dev/th/docs/new-project)
- [กำลังสร้าง **วิธีเขียนบรีฟที่ดี** สิ่งที่ควรใส่ในบรีฟเพื่อให้การสร้างครั้งแรกตรงใจ: ธุรกิจ ผู้ชม หน้าเว็บ การกระทำหลัก ข้อเท็จจริงและน้ำเสียง พร้อมตัวอย่างก่อนและหลัง 6 ชุด](https://briks.dev/th/docs/writing-a-brief)
- [กำลังทำงานในโปรเจกต์**การแก้ไขเว็บไซต์** วิธีแก้ไขเว็บไซต์ด้วยการเขียนถึง Briks: พูดอะไร เพิ่มรูปภาพ การเปลี่ยนแปลงหนึ่งครั้งมีอะไรและใช้เครดิตเท่าไร หน้าภายใน คำขอที่รอคิว และการแก้เมื่อพลาด](https://briks.dev/th/docs/making-changes)
- [การเผยแพร่และโดเมน **เผยแพร่เป็นเวอร์ชันใช้งานจริง** นำเว็บไซต์ Briks จากพรีวิวสู่เวอร์ชันใช้งานจริง: การตรวจก่อนเปิดตัวอ่านอะไร อะไรที่ทำให้เปิดตัวไม่ได้ วิธีแก้แต่ละข้อ และวิธีย้อนกลับไปพรีวิว](https://briks.dev/th/docs/publish-to-production)

ยังติดปัญหาอยู่ไหม

เขียนถึง [hello@briks.dev](mailto:hello@briks.dev) พร้อมชื่อโปรเจกต์และสิ่งที่คุณคาดว่าจะเห็น ภาพหน้าจอช่วยได้