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

ในบทความนี้เราจะมาเอาที่เก็บไฟล์บนคลาว์มาเปลี่ยนเป็นที่เก็บ 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.saladpuk.com/cloud/azure-storage/blobs/staticweb.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.