Chapter 7: Static Website Hosting (3 OSes × 2 Web Servers)
7.1 Why and what
Friends, in this chapter your own web page will appear live on the internet for the first time – that moment is always special in my class. Let's first understand what a static website is. Mauli Dairy's daily rates and contact page are exactly such simple files.
मित्रांनो, या चॅप्टरमध्ये तुमचं स्वतःचं वेब पेज पहिल्यांदा इंटरनेटवर लाइव्ह दिसणार – माझ्या क्लासमध्ये हा क्षण नेहमी स्पेशल असतो. आधी स्टॅटिक वेबसाइट म्हणजे काय ते समजून घेऊ. Mauli Dairy चे daily rates आणि कॉन्टॅक्ट पेज – हे असेच साधे फाइल्स आहेत.
दोस्तों, इस चैप्टर में आपका अपना वेब पेज पहली बार इंटरनेट पर लाइव दिखेगा – मेरी क्लास में ये पल हमेशा स्पेशल होता है. पहले समझते हैं कि स्टैटिक वेबसाइट क्या है. Mauli Dairy के daily rates और कॉन्टैक्ट पेज – ये ऐसी ही सादी फ़ाइलें हैं.
A static website is made only of files — HTML, CSS, JavaScript, images, fonts — that are sent to the browser exactly as stored on disk. There is no server-side code and no database. Examples: portfolio/resume sites, college fest pages, documentation, landing pages and the built output of React/Angular/Vue apps.
Why host it on EC2? It is the best way to learn web-server configuration, permissions and troubleshooting. (In production, very simple static sites are often hosted on Amazon S3 + CloudFront, but the EC2 skills here apply to every dynamic app you will host later.)
How it works: Browser → port 80 on the EC2 public IP → security group allows it → Nginx/Apache maps the URL path to a file under the document root → returns the file.
URL: http://13.233.10.25/css/style.css
root: /var/www/mysite
file: /var/www/mysite/css/style.css (root + URL path)
Ravindra Bagale's Tip
Many students think a static website means only HTML, and that a React/Angular app is not static. Remember: the built output of React/Angular/Vue (the folder you get after npm run build) is also just static files – they are hosted on Nginx the same way. A site is dynamic only if it needs server-side code or a database.
Ravindra Bagale's Tip – मराठी
खूप students ना वाटतं static website म्हणजे फक्त HTML, आणि React/Angular app static नाही. लक्षात ठेवा: React/Angular/Vue चा built output (npm run build नंतर येणारा folder) सुद्धा static files च आहेत – त्या Nginx वर अशाच host होतात. Server-side code किंवा database लागला तरच site dynamic.
Ravindra Bagale's Tip – हिंदी
बहुत students को लगता है static website मतलब सिर्फ HTML, और React/Angular app static नहीं है. याद रखो: React/Angular/Vue का built output (npm run build के बाद आने वाला folder) भी static files ही है – वो Nginx पर ऐसे ही host होती हैं. Server-side code या database चाहिए तभी site dynamic है.
Lab
Chala, kagdavar Mauli Dairy chya website che teen URLs liha (/, /css/style.css, /rates.html) aani document root /var/www/mysite gheun pratyek URL sathi server var konti file shodhli jaail te liha – root + URL path ha niyam vapra.