เผยแพร่ Claude Artifact เป็นเว็บไซต์จริงที่ออนไลน์อยู่

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

แล้วคุณก็ชนกำแพง: จะเอามันขึ้นอินเทอร์เน็ตจริง ๆ ได้อย่างไร?

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

คู่มือนี้จะแสดงวิธีเปลี่ยน Claude Artifact ให้เป็นเว็บไซต์ที่ออนไลน์และโฮสต์เรียบร้อย พร้อมที่อยู่ของตัวเอง ใบรับรอง SSL และฟอร์มติดต่อที่ใช้งานได้ ภายในไม่ถึงห้านาที

Claude Artifact คืออะไร?

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

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

ขั้นที่ 1: เอาโค้ดออกมาจาก Claude

ก่อนอื่น คุณต้องเอาไฟล์ HTML จาก Artifact มาไว้ในคอมพิวเตอร์ของคุณ มีสองวิธี

ทางเลือก ก: คัดลอกโค้ด

1. คลิกแผง Artifact ใน Claude เพื่อขยาย
2. คลิกไอคอนโค้ด (หรือ “View Source”) เพื่อดู HTML ดิบ
3. คลิก Copy เพื่อคัดลอกโค้ดทั้งบล็อก
4. เปิดโปรแกรมแก้ไขข้อความธรรมดา (Notepad บน Windows, TextEdit บน Mac โดยตรวจให้แน่ใจว่าอยู่ในโหมดข้อความธรรมดา)
5. วางโค้ดแล้วบันทึกไฟล์เป็น index.html บนเดสก์ท็อปของคุณ

ทางเลือก ข: ดาวน์โหลด Artifact

แผนบางแผนของ Claude ให้คุณดาวน์โหลด Artifact เป็นไฟล์ HTML ได้โดยตรง ถ้าคุณเห็นปุ่มดาวน์โหลดบนแผง Artifact ให้ใช้เลย เร็วกว่า แต่ตรวจให้แน่ใจว่าไฟล์ที่ดาวน์โหลดชื่อ index.html (เปลี่ยนชื่อถ้าจำเป็น)

ขั้นที่ 2: วางไว้ที่ SiteDrop

ตอนนี้คุณมีไฟล์ index.html ในคอมพิวเตอร์แล้ว เพื่อนำขึ้นอินเทอร์เน็ต

1. ไปที่ SiteDrop แล้วเข้าสู่ระบบ (เริ่มต้นใช้งานฟรี)
2. ลากไฟล์ index.html ของคุณไปวางบนแดชบอร์ด SiteDrop แค่นั้น ลากครั้งเดียว
3. ภายในไม่ถึงห้าวินาที SiteDrop นำเว็บไซต์ของคุณขึ้น CDN ทั่วโลก รักษาความปลอดภัยด้วยใบรับรอง SSL ฟรี (HTTPS) และให้ลิงก์ที่ออนไลน์อยู่

ตอนนี้ Claude Artifact ของคุณเป็นเว็บไซต์จริงแล้ว ใครในโลกก็เข้าถึงได้

ขั้นที่ 3: รับโดเมนของคุณเอง

ลิงก์ SiteDrop ฟรีใช้แชร์ได้ดีเยี่ยม แต่ถ้าคุณต้องการที่อยู่แบบมืออาชีพ (เช่น www.yourbusiness.com) คุณขอรับได้โดยตรงจากแดชบอร์ด SiteDrop

1. เปิดการตั้งค่าเว็บไซต์ของคุณในแดชบอร์ด
2. ค้นหาชื่อโดเมนที่คุณต้องการ
3. ขอรับโดเมน SiteDrop ตั้งค่า DNS ทั้งหมดให้อัตโนมัติ ไม่ต้องเข้าแดชบอร์ดของผู้จดทะเบียน ไม่ต้องตั้งค่า nameserver ไม่ต้องรอ 48 ชั่วโมง

ขั้นที่ 4: รับฟอร์มติดต่อที่ใช้งานได้ (ฟรี)

ถ้า Claude Artifact ของคุณมีฟอร์มติดต่อ (และเว็บไซต์ธุรกิจส่วนใหญ่ควรมี) SiteDrop จะเชื่อมต่อให้อัตโนมัติ ข้อความที่ส่งผ่านฟอร์มจะเข้าสู่ กล่องข้อความในตัวของ SiteDrop ไม่ต้องมีอีเมลโฮสติ้ง ไม่ต้องใช้เครื่องมือฟอร์มของบุคคลที่สาม ไม่ต้องจ่ายค่าสมาชิกรายเดือน

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

เคล็ดลับให้ได้ Claude Artifact ที่ดีขึ้น

คุณภาพของเว็บไซต์ขึ้นอยู่กับคุณภาพของพรอมต์ นี่คือเคล็ดลับให้ได้ Artifacts ที่ดีขึ้นจาก Claude

ระบุรายละเอียดธุรกิจของคุณให้ชัด

“สร้างเว็บไซต์หน้าเดียวสำหรับธุรกิจตัดขนสุนัขเคลื่อนที่ชื่อ Paws & Shine ในแมนเชสเตอร์ ให้มีส่วนหัวพร้อมแท็กไลน์ ส่วนบริการ 4 อย่างพร้อมราคา คำรีวิวจากลูกค้า และฟอร์มติดต่อ ใช้ชุดสีเขียวอมฟ้าอบอุ่นกับสีครีม พร้อมองค์ประกอบดีไซน์โค้งมนทันสมัย”

ยิ่งคุณระบุรายละเอียดมาก ผลลัพธ์ยิ่งประณีต ใส่ชื่อธุรกิจจริง บริการจริง ราคาจริง และสีที่คุณชอบ

ขอให้ทุกอย่างอยู่ในไฟล์เดียว

เพิ่ม “ใส่ CSS ทั้งหมดไว้ในไฟล์ HTML” หรือ “ทำเป็น index.html ไฟล์เดียวที่สมบูรณ์ในตัวเอง” ลงในพรอมต์ ทำให้การอัปโหลดไป SiteDrop ราบรื่น ไฟล์เดียว ลากครั้งเดียว เสร็จ

ขอให้รองรับมือถือ

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

ใช้เครื่องมือสร้างพรอมต์ของ SiteDrop

ไม่แน่ใจว่าจะเขียนพรอมต์ดี ๆ อย่างไร? เครื่องมือสร้างพรอมต์ของ SiteDrop ถามคุณไม่กี่ข้อเกี่ยวกับธุรกิจ แล้วสร้างพรอมต์ที่เหมาะสมให้คุณวางลงใน Claude จัดการรายละเอียดทางเทคนิคทั้งหมดให้

ทำไมไม่แชร์ลิงก์การสนทนา Claude เฉย ๆ?

Claude ให้คุณแชร์ลิงก์การสนทนา และผู้รับดู Artifact ได้ แล้วจะใช้ SiteDrop ทำไม? เพราะลิงก์การสนทนาที่แชร์

• ไม่ใช่ URL จริง คุณเอาลิงก์การสนทนา Claude ไปใส่บนนามบัตรหรือรายการ Google ไม่ได้
• ไม่มีโดเมน เว็บไซต์ของคุณอยู่ที่ claude.ai/share/... ไม่ใช่ที่ชื่อธุรกิจของคุณ
• เสิร์ชเอนจินเข้าไปอ่านไม่ได้ เสิร์ชเอนจินและเอนจินตอบคำถามของ AI ค้นหาหรืออ้างอิงไม่ได้
• ไม่มีฟอร์มติดต่อ ผู้เข้าชมติดต่อคุณไม่ได้
• อาจหายไป ถ้า Anthropic เปลี่ยนนโยบายการแชร์หรือคุณทำการสนทนาหาย ลิงก์จะใช้ไม่ได้
• แสดงแบรนด์ของ Claude ไม่ใช่แบรนด์ธุรกิจของคุณ

เว็บไซต์ที่โฮสต์บน SiteDrop เป็นของคุณ โดเมนของคุณ แบรนด์ของคุณ ฟอร์มติดต่อของคุณ สถิติของคุณ มันคือเว็บไซต์จริง ไม่ใช่ตัวอย่างในผลิตภัณฑ์ของคนอื่น

หลังเผยแพร่แล้วทำอะไรได้อีก?

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

ขั้นตอนทั้งหมด ทีละขั้น

1. เปิด Claude แล้วอธิบายเว็บไซต์ของคุณ (หรือใช้ เครื่องมือสร้างพรอมต์)
2. Claude สร้าง Artifact ดูตัวอย่างให้แน่ใจว่าคุณชอบ
3. คัดลอกโค้ดหรือดาวน์โหลดไฟล์ HTML
4. ลากไฟล์ไปวางที่ SiteDrop
5. เว็บไซต์ของคุณออนไลน์แล้ว จะขอรับโดเมนของคุณเองด้วยก็ได้

เวลารวม: ไม่ถึงห้านาที ค่าใช้จ่ายรวม: เริ่มต้นฟรี