How to Host HTML CSS JS Static Website on Digital Ocean (Hindi)

इस पोस्ट में हम जानेंगे कि एक Static Website जो एचटीएमएल सीएसएस जावास्क्रिप्ट इत्यादि लैंग्वेज से बनी है उसे Digital Ocean पर कैसे होस्ट किया जा सकता है, ध्यान रहे ऐसे स्टेटिक वेबसाइट में डेटाबेस नहीं होता है इसलिए हम यहां पर डेटाबेस बनाना नहीं सीखेंगे सिर्फ Static Website को Digital Ocean पर होस्ट करने के लिए सर्वर बनाएंगे और फिर उसे सफलतापूर्वक होस्ट करेंगे ताकि वह लाईव हो सके।

बहुत से लोग वर्डप्रेस को पसंद नहीं करते हैं क्योंकि वो छोटा-मोटा स्टेटिक वेबसाइट बनाते हैं या कोई टुल वेबसाइट बनाते हैं उदाहरण के लिए एज कैलकुलेटर टूल या अन्य टूल जो की एचटीएमएल सीएसएस जावास्क्रिप्ट से बना होता है या कुछ टूल PHP से भी बनता है तो ऐसे बहुत ही छोटे से साइज वाले सिर्फ कुछ पेज के वेबसाइट को वर्डप्रेस पर डालना ठीक नहीं होता है इसे कस्टम बेस वेबसाइट पर ही बनना चाहिए ताकि उसका साइज काफी छोटा रहे और बहुत तेजी से लोड हो सके।

Digital Ocean पर एक एचटीएमएल वेबसाइट को होस्ट करने के लिए ड्रॉपलेट बनाने से लेकर सरवर इंस्टॉल करने एवं अपना एचटीएमएल वेबसाइट या पीएचपी वेबसाइट को उस पर अपलोड करने का पूरा प्रक्रिया नीचे दिया गया है इसे देखें सीखें और अपने टूल वेबसाइट को सर्वर पर अपलोड करके लाइव करें ताकि दुनिया में कोई भी उसे टूल को ओपन करके उसका इस्तेमाल कर सके

स्टेप 1: DigitalOcean पर अकाउंट बनाएं

1. DigitalOcean पर जाएं और साइन अप करें।
2. साइन अप के बाद, एक नया प्रोजेक्ट बनाएं।

स्टेप 2: एक Droplet (Server) बनाएं

1. Droplets सेक्शन में जाएं और “Create Droplet” पर क्लिक करें।
2. विकल्पों का चयन करें:
   • Image: Ubuntu (सिंपल और लोकप्रिय विकल्प)
   • Plan: बेसिक प्लान (Nano या Small, आपकी जरूरत के अनुसार)
   • Region: निकटतम लोकेशन चुनें।
   • Authentication: पासवर्ड या SSH Key सेट करें।
3. Droplet क्रिएट करने के बाद, आपको इसका IP Address मिलेगा।

स्टेप 3: Droplet पर वेब सर्वर इंस्टॉल करें

1. Droplet में SSH के जरिए लॉग इन करें:

ssh root@<Your-Droplet-IP>

2. वेब सर्वर इंस्टॉल करें (जैसे Nginx):

sudo apt update
sudo apt install nginx -y

3. इंस्टॉलेशन पूरा होने के बाद, ब्राउज़र में अपने Droplet के IP Address को खोलें। यदि Nginx सही से इंस्टॉल हुआ है, तो आपको “Welcome to Nginx” पेज दिखेगा।

स्टेप 4: HTML, CSS, और JavaScript फाइल्स अपलोड करें

1. Droplet के /var/www/html/ डायरेक्टरी में अपनी फाइल्स अपलोड करें

sudo rm -rf /var/www/html/*
sudo nano /var/www/html/index.html

और अपनी HTML कोड पेस्ट करें।
CSS और JavaScript फाइल्स के लिए scp या FTP का उपयोग करें

scp -r path/to/your/files root@<Your-Droplet-IP>:/var/www/html/

स्टेप 5: फायरवॉल सेट करें

1. HTTP और HTTPS को अनुमति दें

sudo ufw allow 'Nginx Full'
sudo ufw enable

स्टेप 6: डोमेन नाम जोड़ें (यदि उपलब्ध है)

1. DigitalOcean DNS मैनेजर में जाकर अपने डोमेन को सेट करें।
2. DNS A Record को Droplet के IP Address पर पॉइंट करें।
3. /etc/nginx/sites-available/default में डोमेन कंफिगर करें:

sudo nano /etc/nginx/sites-available/default

और server_name yourdomain.com www.yourdomain.com; जोड़ें।

4. और server_name yourdomain.com www.yourdomain.com; जोड़ें।

sudo systemctl reload nginx

स्टेप 7: SSL सर्टिफिकेट इंस्टॉल करें

1. Let’s Encrypt का उपयोग करें

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

2. इंस्टॉलेशन के बाद, SSL प्रमाणपत्र ऑटोमैटिक रूप से लागू हो जाएगा।

स्टेप 8: वेबसाइट लाइव चेक करें

1. अपने ब्राउज़र में अपने Droplet का IP या डोमेन खोलें।
2. आपकी एज कैलकुलेटर टूल लाइव हो जाएगी।

Also Read:- X (Twitter) Trends – Worldwide Tool कैसे बनाएं जो API के द्वारा रियल-टाइम डाटा देवे