What are Static Websites? [Complete Beginners Guide]
Static websites are websites that takes web pages stored on a server and deliver them to the web browsers without any alterations. A static website will always server the same files to all the users.
How Static Website Works
A static website consists of HTML, CSS, Javascript, image, video and audio files stored on a server. When the user visits the website address using a web browser, the server finds and serves the correct .html file stored on that address on the server.
Static websites are different from dynamic websites that serve content fetched from a database.
Uses of Static Websites
- Creating Bronchure Business Websites
- Creating Project Documentation Websites
- Creating Sales and marketing landing page Websites
- Creating Blog Websites
- Creating Placeholder Websites during Maintenance/ Development Phase
- Creating Personal Websites
- Creating Portfolio Websites
How to Create Static Websites
1. Writing HTML, CSS and Javascript
The most basic method of creating website is using html, css and Javascript files.
Infact, that is how the first website was made.
2. Using Static Site Generators
Static site generators were first made to avoid copy pasting repeating sections of websites. Nowadays, they do so much more.
Some of our favorite top and up-and-coming static site generators include: Next.js, Hugo, Gatsby, Jekyll, Nuxt.js, Eleventy
Static site generators are great because they can be used with git-based Content Management Systems(CMSs). Once you connect a CMS, writers can create and edit content without touching the code.
Read more on Static Site Generators
3. Using Frontend Frameworks
Using Frameworks like React, Vue and Svelte, you can create a website. Once the website is ready, you usually build the website. The framework will generate a static website in the build folder. You can take this folder that contain a static website and host it online.
Hosting Static Websites
Static websites can be hosted on any website hosting server. You just need to upload the website files on the server, point a domain name and voila, you have live website on the internet.
Advantages of Static Websites
- High speed: fast loading and can be served on a cdn
- More secure: have fewer security loop holes to exploit
Disadvantages of Static Websites
- Requires some coding knowledge to make changes to the design of the website
Static Website Examples
Some of the static sites are:
