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

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

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

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

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

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

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

คุณยังเริ่มจากช่องพรอมต์บน 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

บรีฟของ SamLarder Lane, York

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

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

โปรเจกต์จะเปิดที่แท็บ Studio โดยมีบทสนทนาอยู่ทางซ้ายและพรีวิวอยู่ทางขวา ก่อนวางแผนอะไร Briks จะเตรียมคำถามไว้ไม่กี่ข้อ ป้ายเหนือพรีวิวจะขึ้นว่า 'Waiting for your answers' รายละเอียดทั้งหมดอยู่ใน คำถามก่อนสร้าง

  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 เวอร์ชันแรกใช้เวลาไม่กี่นาที คุณออกจากหน้านี้ระหว่างที่กำลังสร้างได้ การสร้างจะดำเนินต่อไปและผลลัพธ์จะรออยู่เมื่อคุณกลับมา การดูการสร้าง อธิบายแต่ละขั้นตอน

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

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

การเผยแพร่ครั้งแรกเป็นพรีวิวที่ที่อยู่ซึ่งสร้างจากชื่อโปรเจกต์ ในที่นี้คือ larder-lane.briks.live หากชื่อนั้นมีคนใช้แล้ว ระบบจะเพิ่มอักขระอีกไม่กี่ตัวต่อท้าย Owner หรือ Admin เปลี่ยนได้ภายหลัง ดูที่อยู่ของเว็บไซต์คุณ

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

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

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

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

  1. กด Publish

    ที่ไหน: Top bar

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

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

    ที่ไหน: Publish to production

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

  3. ยืนยัน

    ที่ไหน: Publish to production

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

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

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

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

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

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

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

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

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

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

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

ไม่ แผน Free มี 1 โปรเจกต์ แผน Pro ขึ้นไปมีมากกว่านั้น ดูตารางแผนใน เครดิตและแผน

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

ส่งที่อยู่พรีวิวให้พวกเขา ไม่ต้องมีบัญชี ดูการแชร์พรีวิว