Static Website

Overview

A static website contains Web pages with fixed content. Each page is coded in HTML and displays the same information to every visitor. Static sites are the most basic type of website and are the easiest to create. Unlike dynamic websites, they do not require any Web programming or database design.

Purpose

Static websites have basic HTML files which require less space making the hosting of these websites cheaper to that of dynamic websites. Organizations with static website save up on the costs and channel those resources to integrate Git or automated builds to incorporate the latest changes in the system

How it Works

A static website comprises a set of related HTML pages and files hosted on a computer running a web server.

A web server is software that serves web pages in response to requests from web browsers. A page request is generated when a visitor clicks a link on a web page, selects a bookmark in a browser, or enters a URL in a browser’s address text box.

The final content of a static web page is determined by the page designer and doesn’t change when the page is requested. Here’s an example:

<html>
   <head>
      <title>Trio Motors Information Page</title>
   </head>
   <body>
      <h1>About Trio Motors</h1>
      <p>Trio Motors is a leading automobile manufacturer.</p>
   </body>
</html>

Every line of the page’s HTML code is written by the designer before the page is placed on the server. Because the HTML doesn’t change once it’s on the server, this kind of page is called a static page.

NOTE

Strictly speaking, a "static" page may not be static at all. For example, a rollover image or Flash content (a SWF file) can make a static page come alive. However, this documentation refers to a page as static if it is sent to the browser without modifications.

When the web server receives a request for a static page, the server reads the request, finds the page, and sends it to the requesting browser, as shown in the following figure:

In the case of web applications, certain lines of code are undetermined when the visitor requests the page. These lines must be determined by some mechanism before the page can be sent to the browser. The mechanism is discussed in the following section.

Features

Advantages of Static Website

  • It is quick to develop.
  • It is cheaper to develop.
  • It is easier to host.
  • It is ideal for small websites.
  • It is easier for search engines to index.
  • It is faster to transfer on slow connections.

Technology

  • Prototyping (e.g. Sketch, Invision)
  • Designing (e.g. Photoshop or Illustrator or Sketch)
  • Planning (e.g. Asana)
  • Web server network (e.g. Apache, Nginx, Node.JS)
  • Database (e.g. PostgreSQL, MySQL)
  • Web Markup (HTML)
  • Style sheets (CSS)
  • Dynamic updating (JavaScript)
  • Backend language generating the markup (e.g. PHP, Python, Java, Ruby, JavaScript etc.)
  • Front end framework (e.g. jQuery, React, Vue)
  • Web framework (e.g. Laravel, WordPress, Drupal, Django, Ruby on Rails)
  • Networking (TCP/IP)
  • Domain name resolution (DNS)
  • Web server OS (Linux or Windows Server)
  • Analytics (e.g. Google Analytics)
  • Marketing (e.g. Facebook, Google AdWords, etc.)
  • Customer Service and Quality Control (e.g. ZenDesk, HotJar)
  • Version control (git)
  • Version control hosting (e.g. Beanstalk)
  • Payment integration (e.g. Stripe)
  • Telephone integration (e.g. Twilio)
  • Email integration (e.g postman, sendmail, Mandrill)
  • CDN or proxy caching (e.g. CloudFlare, varnish)
  • Cloud computing (e.g. Amazon AWS, Microsoft Azure)
  • Templating (e.g. Jinja)

FAQs

Q: What is a static website?

A static website is delivered to the user exactly as stored, in contrast to dynamic web pages which are generated by a web application. Static websites are best for sites with few authors and relatively infrequent content changes. Common use cases for static websites are personal and simple marketing websites. Static websites simply deliver the HTML, JavaScript, images, video and other files as stored to your website visitors, and contain no application code.

Q: How are static websites different from dynamic websites?

Dynamic websites are distinguished by their use of web applications to generate the individual web pages on the site. There are two main types of dynamic websites: those built on Content Management Software (CMS) and those that are built from scratch. CMS-based websites rely on software such as WordPress, Joomla and Drupal to provide website editors with features to make it easy to build and update a website. Dynamic websites built from the ground up deliver significantly more interactivity (e.g. book a flight, watch a streaming movie) and rely on application logic, such as PHP or Ruby scripts on a server to render a webpage.

Q: What is web site hosting?

The infrastructure environment used to enable end users to request, receive, and interact with your website is commonly referred to as “hosting.” Other options include managed hosting and Software-as-a-Service (SaaS). With managed hosting, a business will create and maintain the hosting environment for your site.

Q: Why should I use a static website hosting environment?

Static website hosting is the lowest cost and lowest maintenance option (for example, there are no servers to maintain) and it provides high levels of reliability and scale. If your content website has numerous authors and changes frequently, you’ll likely want to use a CMS-based website.

Q: How much will it cost to host my website?

The total cost of hosting your personal website will vary depending on your usage. Typically, it will cost $1-3/month

Q: I don’t have a website, how should I build it?

Most individuals use text editors or website design software (e.g. Dreamweaver) to build their websites. If you don’t have the skills or you’d rather not develop the site, you can hire an agency to build your site.

Q: Can I customize my website once it is hosted?

Yes. Once you website is up and running, the web programmer can re edit and upload to hosting servers.

Applications