> For the complete documentation index, see [llms.txt](https://www.saladpuk.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.saladpuk.com/cloud/azure-storage/blobs/staticweb.md).

# สร้างเว็บจากที่ฝากไฟล์บนคลาว์

ในบทความนี้เราจะมาเอาที่เก็บไฟล์บนคลาว์มาเปลี่ยนเป็นที่เก็บ static เว็บไซต์กันว่ามันจะง่าย อธิบายจบได้ภายใน 5 นาทีจริงป่าว ปะเริ่มกันเลยโม้ไว้เยอะเวลามีจำกัด

{% hint style="info" %}
บทความนี้ต้องสร้าง Azure Storage แล้วนะถ้าใครยังไม่ได้สร้างลองไปอ่านวิธีสร้างดูจากลิงค์ด้านล่างนี้\
[ลองสร้างที่เก็บไฟล์กันเลย](https://saladpuk.gitbook.io/learn/cloud/azure-storage/blobs/create)
{% endhint %}

## ตั้งค่าให้เปิดเว็บได้

ให้เราเปิดตัว Storage Account ที่สร้างไว้แล้วขึ้นมา แล้วที่เมนูด้านซ้ายให้เลือก **Static website** แล้วก็สั่ง **Enabled** ได้เลยครับ

![](/files/-Lw3uDcB5tmMvAJJLJ1B)

ถัดมาเขาจะถามว่าหน้าแรกของเว็บจะให้เปิดไฟล์ไหน กับ ถ้าเกิดหาไฟล์ไม่เจอจะให้มันเปิดไฟล์ไหน ซึ่งผมเลือกหน้าแรกเป็น `index.html` และ หน้าหาไฟล์ไม่เจอเป็น `error.html` ครับ เมื่อตั้งค่าเสร็จให้กดปุ่ม **Save** ได้เลย

![](/files/-Lw4g33STf3Qu1MmnGiF)

พอกด Save เรียบร้อยแล้วเขาก็จะเอาสร้างลิงค์สำหรับเข้าเว็บของเราออกมาครับ ลองกดปุ่ม copy แล้วไปเปิดใน web browser ได้เลยครับ

![](/files/-Lrnbi8HQ5aA9tqT1J78)

![](/files/-M1lg06rIcm16ODrzjMS)

ไม่ต้องแปลกใจครับ เพราะเรายังไม่มีไฟล์ `index.html` เลยไงล่ะ มันก็เลยบอกว่าหาไฟล์ไม่เจอ 404 ดังนั้นขั้นตอนถัดไปเราก็จะไปเขียนหน้าเว็บง่ายๆมาใส่นะครับ

## สร้างหน้าเว็บของเรากัน

ในคราวนี้ผมก็จะสร้างหน้าเว็บง่ายๆขึ้นมา 2 หน้าคือหน้า `index.html` กับหน้า `error.html` นะครับ โดยการเปิด **Visual Studio Code** ขึ้นมา แล้วจิ้มสร้างไฟล์ `index.html` แล้วเขียนหน้าเว็บง่ายๆกันเลย

![กดที่ Open Folder แล้วเลือก folder ที่จะทำงานด้วย](/files/-Ln33CRjiEQnstlWyvKa)

![สร้างไฟล์ index.html และ error.html](/files/-Lw1u94GLWdFhGNWLPrQ)

{% code title="index.html" %}

```php
<h1>Saladpuk.com</h1>
```

{% endcode %}

{% code title="error.html" %}

```php
<h1>Sorry page not found 404</h1>
```

{% endcode %}

ถัดไปก็ทำการคลิกขวาที่พื้นที่ว่างๆแล้วเลือก **Deploy to Static Website** ได้เลยครับ แล้วก็เลือก subscription กับตัว Azure Storage account ให้ถูกตัว

![](/files/-LrnauSVnd-FeRIa8wGf)

ทำเรียบร้อยแล้วก็ลองกด Browse to website โลด หรือจะเข้าผ่านลิงค์ที่ copy ไว้ก็ได้ครับ

![](/files/-M0i5iMba46_gczb0oig)

เรียบร้อยครับสวยงามตามท้องเรื่อง

![](/files/-LpD8AgM78wSzYkMEK2t)

ไหนลองเติมลิงค์มั่วๆเข้าไปหน่อยซิจะเกิดอะไรขึ้น

![](/files/-LoQbqQdTGpuX389tudt)

เยี่ยมเลยหน้า `error.html` ก็โชว์ออกมาละถ้าหา content นั้นไม่เจอ

## 🎯 บทสรุป

ถ้าเราอยากมีที่เก็บ static content แบบเร่งด่วนและไม่มีผลกระทบกับเซิฟเวอร์หลักเลย ผมแนะนำว่าตัว static website ของ Azure Storage แบบนี้ก็น่าจะประหยัดเวลาเราได้เยอะทีเดียวนะครับ และขั้นตอนการทำทั้งหมดก็แสนง่ายให้ฝ่าย IT หรือน้องๆฝึกงานมาช่วยสร้าง content ให้ก็ยังไหวครับ

{% hint style="success" %}
**การเอาไปใช้งานจริง**\
ในสถานะการจริงเวลาที่เซิฟเวอร์ต้องรับโหลดหนักๆเช่นช่วงสิ้นเดือนไรงี้ ก็อาจทำให้ server ล่มได้ง่ายๆเลย แต่ถ้าเรามี content ที่ไม่ได้เปลี่ยนบ่อย เช่น ทั้งวันข้อมูลตัวนี้ไม่เปลี่ยนเลยจนกว่าจะถึงเที่ยงคืนไรงี้ แทนที่เราจะให้ข้อมูลแบบนี้มาโหลดที่เซิฟเวอร์ เราก็เปลี่ยนมาเก็บไว้ที่ Azure Storage แบบนี้แทนก็ได้ ซึ่งเจ้า Storage นี้มันถูกออกแบบให้อ่านข้อมูลหลัก **TB** ได้แบบชิวๆเลยครับ
{% endhint %}