Meet Instatic: Open-Source Alternative to Webflow, Framer & WordPress

1
00:00:00,000 --> 00:00:03,148
ถึงเวลาแล้วที่เราจะได้รู้จักกับ Instatic — CMS แบบ

2
00:00:03,148 --> 00:00:06,171
static ที่เป็น open source และ self-hostable ได้

3
00:00:06,171 --> 00:00:09,193
พร้อมด้วย page builder (เครื่องมือสร้างหน้าเว็บ)

4
00:00:09,193 --> 00:00:13,349
ที่ทรงพลังในตัวของมันเอง Instatic มาพร้อมเครื่องมือจัดการคอนเทนต์,

5
00:00:13,349 --> 00:00:16,497
ระบบปลั๊กอินที่ปลอดภัย, การเชื่อมต่อแบบ Bring Your

6
00:00:16,497 --> 00:00:19,583
Own Key (BYOK — ใช้คีย์ API ของคุณเอง), การนำเข้า

7
00:00:19,583 --> 00:00:23,613
HTML และเว็บไซต์ทั้งเว็บ และอีกมากมาย จุดเด่นที่สุดอย่างหนึ่งคือ

8
00:00:23,613 --> 00:00:26,761
มันเผยแพร่เว็บเป็น static HTML, CSS และ JavaScript

9
00:00:26,761 --> 00:00:29,784
พร้อมช่องไดนามิกในสไตล์ของ Astro dynamic islands

10
00:00:29,784 --> 00:00:32,869
(เทคนิคการแทรกส่วนที่อัปเดตได้ลงในหน้าแบบ static)

11
00:00:32,869 --> 00:00:40,047
ทำให้คุณแสดงคอนเทนต์จากฐานข้อมูลในตัวได้ง่าย ๆ ขณะเดียวกันก็ยังได้ประโยชน์จากประสิทธิภาพอันยอดเยี่ยมของหน้าเว็บแบบ

12
00:00:40,047 --> 00:00:43,762
static Instatic ยังอยู่ในช่วง pre-alpha (ก่อนเวอร์ชันอัลฟา)

13
00:00:43,762 --> 00:00:46,911
แต่เราตื่นเต้นที่จะให้คุณได้เห็นว่า CMS แบบ static

14
00:00:46,911 --> 00:00:50,122
ที่เป็น open source และ self-hostable ควรเป็นแบบไหน

15
00:00:50,122 --> 00:00:53,774
มาดูกันให้ละเอียดขึ้นดีกว่า Instatic ถูกสร้างขึ้นสำหรับยุค

16
00:00:53,774 --> 00:00:56,923
AI จริง ๆ แค่ใส่คีย์ของคุณจากผู้ให้บริการที่คุณชอบ

17
00:00:56,923 --> 00:01:00,323
จากนั้นก็เริ่มใช้ AI ได้ทันทีภายใน Instatic ใช้ได้ทั้ง

18
00:01:00,323 --> 00:01:03,534
Anthropic, OpenAI หรือแม้แต่โมเดลท้องถิ่นที่รันผ่าน

19
00:01:03,534 --> 00:01:06,557
Ollama หรือถ้าอยากได้ตัวเลือกที่หลากหลายกว่านั้น

20
00:01:06,557 --> 00:01:09,831
ก็ใช้ OpenRouter เพื่อเข้าถึงโมเดลกว่า 400 ตัว ภายใน

21
00:01:09,831 --> 00:01:12,979
Instatic คุณสามารถเปิดแผง AI assistant ได้ผ่านปุ่ม

22
00:01:12,979 --> 00:01:15,939
AI หรือคำสั่งลัด Command + I (หรือ Control + I)

23
00:01:15,939 --> 00:01:20,158
เลือกโมเดลของคุณ แล้วเริ่มทำงานกับ assistant เพื่อสร้างหรือปรับแต่ง

24
00:01:20,158 --> 00:01:23,180
design tokens (ตัวแปรกำหนดค่าการออกแบบ) สำหรับสี

25
00:01:23,180 --> 00:01:27,147
ขนาด และระยะห่าง, สร้างหน้าเว็บ, เทมเพลต หรือโครงสร้างทั้งระบบ,

26
00:01:27,147 --> 00:01:30,547
เขียนคอนเทนต์ หรือแม้แต่ช่วยจัดระเบียบไฟล์มีเดียของคุณ

27
00:01:30,547 --> 00:01:34,514
Visual builder (เครื่องมือสร้างเว็บแบบเห็นภาพ) ถูกออกแบบมาเพื่อ

28
00:01:34,514 --> 00:01:37,915
responsive design (การออกแบบที่ปรับตามขนาดจอ) โดยเฉพาะ

29
00:01:37,915 --> 00:01:40,874
โดยมุมมองเริ่มต้นเป็นผืนผ้าใบแบบหลาย breakpoint

30
00:01:40,874 --> 00:01:43,959
(จุดแบ่งขนาดจอ) คุณจะเห็น breakpoint ของ desktop,

31
00:01:43,959 --> 00:01:47,863
tablet และ mobile พร้อมกันทั้งหมด และสลับไปมาระหว่างมันได้ง่าย

32
00:01:47,863 --> 00:01:51,075
ๆ เพื่อปรับแต่งดีไซน์ หรือจะซูมเข้าไปที่ breakpoint

33
00:01:51,075 --> 00:01:54,853
เฉพาะโดยสลับไปโหมด live เพื่อโฟกัสกับเลย์เอาต์ที่ต้องการปรับ

34
00:01:54,853 --> 00:01:59,512
คุณสามารถเห็นโครงสร้างทั้งหน้าได้ในแผง layers ซึ่งจัดเรียงอย่างเป็นระเบียบ

35
00:01:59,512 --> 00:02:03,165
พร้อมป้าย (badge) ที่มองเห็นความแตกต่างได้ชัดเจนสำหรับโหนด

36
00:02:03,165 --> 00:02:08,958
(node) แต่ละประเภท เจาะลึกลงไปแล้วเลือกโหนดใดก็ได้เพื่อเข้าถึงอินเทอร์เฟซการออกแบบแบบเห็นภาพ

37
00:02:08,958 --> 00:02:11,980
ซึ่งให้คุณเข้าถึงคุณสมบัติ CSS ทั้งหมดที่ต้องการ

38
00:02:11,980 --> 00:02:14,939
รวมถึง custom properties และแม้แต่ interactions

39
00:02:14,939 --> 00:02:18,088
(การโต้ตอบ) ระบบออกแบบแบบ class-based (ยึดคลาส CSS

40
00:02:18,088 --> 00:02:22,244
เป็นหลัก) ทำให้ง่ายต่อการสร้างดีไซน์ที่นำกลับมาใช้ซ้ำและขยายต่อได้

41
00:02:22,244 --> 00:02:25,644
และแผง selectors (ตัวเลือกองค์ประกอบ) ช่วยให้คุณจัดการ

42
00:02:25,644 --> 00:02:30,241
selectors ทั้งหมดได้ รวมถึงช่องค้นหาที่รวดเร็วและตัวเลือกในการเปลี่ยนชื่อ

43
00:02:30,241 --> 00:02:33,830
selectors ที่สร้างไว้แล้ว ล็อกดีไซน์ซิสเต็มของคุณผ่านแท็บ

44
00:02:33,830 --> 00:02:37,419
colors (สี), typography (ตัวอักษร) และ spacing (ระยะห่าง)

45
00:02:37,419 --> 00:02:40,945
ใช้ CSS variables กำหนดระบบสีของคุณ Instatic สามารถสร้าง

46
00:02:40,945 --> 00:02:44,219
utility classes (คลาสยูทิลิตี้), สีเข้มขึ้น (shades)

47
00:02:44,219 --> 00:02:47,871
และสีอ่อนลง (tints) ให้อัตโนมัติสำหรับแต่ละสีตามความจำเป็น

48
00:02:47,871 --> 00:02:51,964
เพิ่ม Google Fonts หรืออัปโหลดฟอนต์ของคุณเอง และสร้างสเกลตัวอักษร

49
00:02:51,964 --> 00:02:55,554
(typography scales) ที่ทรงพลังเพื่อขนาดข้อความที่สม่ำเสมอ

50
00:02:55,554 --> 00:02:58,702
สร้างสเกลระยะห่างที่นำกลับมาใช้ซ้ำได้ในแผง spacing

51
00:02:58,702 --> 00:03:02,228
ซึ่งมีอินเทอร์เฟซที่เป็นมิตรสำหรับสร้างตัวแปรระยะห่างและ

52
00:03:02,228 --> 00:03:05,754
utility classes ที่ใช้งานได้หลากหลายทั่วทั้งดีไซน์ของคุณ

53
00:03:05,754 --> 00:03:11,295
แผงเหล่านี้คืออินเทอร์เฟซแบบเห็นภาพของคุณสำหรับการสร้างและดูแลดีไซน์ซิสเต็มทั้งหมดของคุณ

54
00:03:11,295 --> 00:03:15,073
ช่วยให้การเปลี่ยนแปลงที่ต้องทำทีหลังเป็นเรื่องง่ายและรวดเร็ว

55
00:03:15,073 --> 00:03:18,977
Instatic ยังมีระบบจัดการผู้ใช้และบทบาท (roles) อย่างเต็มรูปแบบ

56
00:03:18,977 --> 00:03:23,448
ดูระดับการเข้าถึง, การเข้าสู่ระบบล่าสุด, สร้างและจัดการผู้ใช้ได้จากแท็บ

57
00:03:23,448 --> 00:03:27,163
users ภายใต้ users roles คุณสามารถดูและจัดการบทบาทที่มีอยู่

58
00:03:27,163 --> 00:03:31,571
รวมถึงสร้างบทบาทใหม่ได้ สิทธิความสามารถของบทบาทก็ละเอียดย่อยมากเช่นกัน

59
00:03:31,571 --> 00:03:36,608
ตัวอย่างเช่น บทบาท client ในตัวสามารถเห็นดีไซน์ของเว็บและแก้ไขข้อความคอนเทนต์ได้

60
00:03:36,608 --> 00:03:41,835
แต่ไม่สามารถลากวาง, จัดโครงสร้างใหม่ หรือเปลี่ยนแปลงเว็บในระดับที่รุนแรงกว่านั้นได้

61
00:03:41,835 --> 00:03:45,361
แถมคุณยังสามารถจับตาดูการกระทำของผู้ใช้ทั้งหมดได้ที่แท็บ

62
00:03:45,361 --> 00:03:50,146
users audit นี่ทำให้ Instatic เป็น CMS ที่สมบูรณ์แบบสำหรับการส่งมอบให้ลูกค้า

63
00:03:50,146 --> 00:03:56,695
(client handoff) บนเว็บที่คุณยังคงดูแลอยู่ ช่วยให้คุณมอบการควบคุมที่ลูกค้าและผู้มีส่วนได้ส่วนเสียต้องการ

64
00:03:56,695 --> 00:04:00,599
ขณะที่ยังล็อกความสามารถที่เทคนิคหรืออ่อนไหวกว่าไว้อย่างปลอดภัย

65
00:04:00,599 --> 00:04:04,062
CMS แบบ static ใหม่ ๆ หลายตัวขาดความสามารถในการขยายระบบ

66
00:04:04,062 --> 00:04:08,155
(extensibility) ที่ทำให้ CMS อย่าง WordPress ปรับตัวได้ดีขนาดนั้น

67
00:04:08,155 --> 00:04:11,996
Instatic มาพร้อมระบบปลั๊กอินเป็นฟีเจอร์ระดับแนวหน้าตั้งแต่แรก

68
00:04:11,996 --> 00:04:16,908
แต่ทำในแบบที่ทันสมัยและปลอดภัย Developer SDK (ชุดพัฒนาซอฟต์แวร์สำหรับนักพัฒนา)

69
00:04:16,908 --> 00:04:19,867
ช่วยให้นักพัฒนาได้ API ที่ชัดเจนในการสื่อสารกับ

70
00:04:19,867 --> 00:04:22,827
CMS ผ่านขอบเขตของระบบสิทธิ์ (permission system)

71
00:04:22,827 --> 00:04:26,794
ในตัว ผู้ใช้จะเห็นชัดเจนว่าปลั๊กอินแต่ละตัวเข้าถึงได้ในระดับไหน

72
00:04:26,794 --> 00:04:30,131
และ URL ภายนอกใดบ้างที่อยู่ในรายการอนุญาต (whitelist)

73
00:04:30,131 --> 00:04:35,231
หากจำเป็นต้องใช้เพื่อให้ปลั๊กอินทำงาน สิ่งนี้ช่วยจำกัดขอบเขตที่ปลั๊กอินเข้าถึงได้

74
00:04:35,231 --> 00:04:39,135
ทำให้เว็บ Instatic ของคุณยังคงปลอดภัยแม้ต้องเพิ่มฟังก์ชันเสริม

75
00:04:39,135 --> 00:04:42,284
การเริ่มสร้างจากศูนย์ในอินเทอร์เฟซใหม่อาจดูน่ากลัว

76
00:04:42,284 --> 00:04:46,439
และแม้ว่าอินเทอร์เฟซของ Instatic จะเป็น GUI (อินเทอร์เฟซแบบกราฟิก)

77
00:04:46,439 --> 00:04:53,051
ของ HTML และ CSS โดยพื้นฐาน แต่การเริ่มโปรเจกต์ของคุณด้วยเทมเพลตหรืออย่างน้อยก็ดีไซน์พื้นฐานจะเร็วกว่ามาก

78
00:04:53,051 --> 00:04:56,136
นั่นคือจุดที่ตัวเลือก site import และ HTML import

79
00:04:56,136 --> 00:04:59,285
ช่วยชีวิตคุณได้จริง ๆ ก่อนอื่นมาพูดถึง site import

80
00:04:59,285 --> 00:05:02,307
กัน คุณสามารถลากโฟลเดอร์เว็บไซต์ที่มี HTML, CSS,

81
00:05:02,307 --> 00:05:06,400
รูปภาพและฟอนต์ทั้งหมดเข้ามา แล้ว Instatic จะประมวลผลไฟล์เหล่านั้น

82
00:05:06,400 --> 00:05:09,548
มันจะแยกทุกอย่างออกเป็น nodes, selectors, ไฟล์ และ

83
00:05:09,548 --> 00:05:14,775
design tokens ของ Instatic จากนั้นคุณก็สามารถแก้ไขเว็บที่นำเข้ามาด้วยอินเทอร์เฟซของ

84
00:05:14,775 --> 00:05:18,175
Instatic ได้เลย แต่ถ้าคุณอยากนำเข้าอะไรที่ง่ายกว่านั้น

85
00:05:18,175 --> 00:05:21,323
เช่น section หรือ component HTML เดี่ยว ๆ ตัวเลือก

86
00:05:21,323 --> 00:05:24,346
HTML import ก็เหมาะมาก แค่วาง HTML ลงไป Instatic

87
00:05:24,346 --> 00:05:27,872
จะประมวลผลเป็น nodes สำหรับ builder แล้วก็เสร็จเรียบร้อย

88
00:05:27,872 --> 00:05:31,524
การดีพลอย์ (deploy) Instatic instance ของคุณเองนั้นง่ายสุด

89
00:05:31,524 --> 00:05:35,428
ๆ ใช้ลิงก์ดีพลอย์แบบคลิกเดียวใน GitHub ของเราเพื่อดีพลอย์ไปยัง

90
00:05:35,428 --> 00:05:38,639
Railway ภายในไม่กี่นาที โดยใช้ SQLite หรือ Postgres

91
00:05:38,639 --> 00:05:41,725
เป็นฐานข้อมูล ถ้าอยากดีพลอย์ที่อื่น Instatic ก็มี

92
00:05:41,725 --> 00:05:45,692
Docker image ที่สะดวกและเอกสารที่ละเอียด ช่วยให้คุณดีพลอย์ไปยัง

93
00:05:45,692 --> 00:05:48,651
Railway, Render, VPS (เซิร์ฟเวอร์เสมือนส่วนตัว)

94
00:05:48,651 --> 00:05:52,555
ที่โฮสต์เองผ่าน Docker Compose และแพลตฟอร์มใดก็ได้ที่สามารถรัน

95
00:05:52,555 --> 00:05:55,578
Docker file และ image ได้ เราทำให้ Instatic เป็น

96
00:05:55,578 --> 00:05:59,671
open source เต็มรูปแบบ, ใช้สัญญาอนุญาต MIT และใช้งานฟรีโดยสมบูรณ์

97
00:05:59,671 --> 00:06:04,330
โค้ดทั้งหมดอยู่บน GitHub และเรายินดีต้อนรับผู้มีส่วนร่วมจากบุคคลที่สามด้วย

98
00:06:04,330 --> 00:06:09,934
ดังนั้นถ้าคุณไม่เพียงแต่อยากใช้ Instatic ฟรี แต่ยังอยากช่วยกำหนดทิศทางการเติบโตของมันด้วย

99
00:06:09,934 --> 00:06:13,209
คุณก็ทำได้ และเราอยากเห็นสิ่งที่คุณจะสร้างสรรค์ออกมา

100
00:06:13,209 --> 00:06:19,317
ภายใน Instatic ยังมีอีกหลายอย่างที่เราอยากทำ เราจึงตื่นเต้นกับฟีดแบ็กที่จะได้รับจากผู้ใช้อย่างคุณ

101
00:06:19,317 --> 00:06:22,843
แต่นี่คือบางอย่างที่อยู่ใน roadmap (แผนพัฒนา) ของเราแล้ว

102
00:06:22,843 --> 00:06:27,250
อินเทอร์เฟซกำลังไปในทิศทางที่ถูกต้อง แต่เราอยากขัดเกลามันให้มากขึ้นอีก

103
00:06:27,250 --> 00:06:33,925
เพื่อให้ใช้งานง่ายและลดจุดที่ติดขัด เราจะขยายคลังคอนเทนต์อย่างรวดเร็วเพื่อช่วยให้ผู้ใช้เริ่มต้นได้เร็วขึ้น

104
00:06:33,925 --> 00:06:38,081
เราวางแผนที่จะเริ่มสร้างปลั๊กอิน, โมดูล และอินทิเกรชันจากทีมเราเอง

105
00:06:38,081 --> 00:06:43,244
เพื่อขยาย Instatic ไปไกลกว่าฟีเจอร์พื้นฐาน และยังมีอีกมากที่เรายังไม่พร้อมจะพูดถึง

106
00:06:43,244 --> 00:06:48,093
ติดตามกันได้บน GitHub และอย่าลืมกดดาวให้โปรเจกต์โดยคลิกไอคอนรูปดาวที่มุมขวาบน

107
00:06:48,093 --> 00:06:52,563
ถ้าคุณตื่นเต้นที่จะร่วมเดินทางไปกับเรา คุณสามารถเรียนรู้เพิ่มเติมได้ที่

108
00:06:52,563 --> 00:06:53,319
Instatic.com