Building a Static Website - Part 1: Introduction

A couple of months ago, I help a friend set up a website for a business. Today, I had another talk with a friend about building a portfolio website and he asked me for a few resources. I couldn’t find a comprehensive one that outlines all the required steps so I’ll try my best.

What is a static website?

From ChatGPT:

Question: difference between a static and dynamic website in 2 sentences -\nAnswer: A static website consists of fixed content that remains the same for\nall users and is created using HTML/CSS, while a dynamic website uses\nserver-side technologies to generate content dynamically, allowing for\npersonalized and interactive experiences tailored to individual\nusers.

Basically:

  • Static - no server-side logic, cheaper
  • Dynamic - with server-side logic, more expensive

What makes a (static) website

Setting up a static website is basically free these days, maybe a few dollars a year if you want a custom domain. There are many free website builders out there. However, we’re going DIY with no strings attached to any one provider. Any of these components can be swapped with many alternatives out there if you so choose.

You really only need two things: your content, which is a bunch of HTML, CSS, and JavaScript files, and a hosting provider, basically a computer that serves your content 24/7.

What we will use

I’m mostly going to outline my process because it’s free (aside from the domain) and that it’s going to teach you some skills on web development.

We will need:

  • A Computer (Windows/Mac/Linux)
  • GitHub account for hosting your website with GitHub Pages
  • Some programming knowledge (very little, don’t worry)
  • Patience with my sucky writing 😭

These would be nice to have:

  • Custom domain name - if you don’t want your domain to appear as your-github-username.github.io
  • Cloudflare account - for email protection and easier DNS management

Since we are making a static website, most of the work will be done on your personal computer. The hosting provider will only be concerned with serving the final build output. For this, we would need to set up our development environment.

Stay tuned for part 2!

Charles Ancheta

Computer Engineer


My 4-part series on how to build a website

By Charles Ancheta, 2023-06-08