The Static Site Guide

Introduction

If you’ve ever wondered how a website works and wanted to build your own, this book is for you. The Static Site Guide walks you through the process of building a website from scratch by using hands-on examples. You’ll learn what a website is and how the most popular website technology works. By the time you reach the end, you’ll have built your very own website, and you’ll know how to do it again on your own.

Websites are an essential technology that most of us take for granted. We read news websites to stay up-to-date on current affairs, connect with friends and family on social networking websites, and order pizza from the local restaurant’s website.

But very few people know how to build a website from scratch. That’s a shame. Building a website is something that anybody can do, and I think that everyone should know how to do it. I created this book to show you how to build one.

I’m not saying it will be easy. Building a website isn’t exactly difficult, but it’s no walk in the park either. There are lots of moving parts, and it takes time and patience. You’ll have to stick with it over a period of days. You’ll make mistakes and learn how to fix your errors.

I promise you this: If you read The Static Site Guide and follow along with the hands-on examples, you’ll learn how to build a website from scratch, and you’ll have obtained a valuable new skill set that you can use at home and work.

What’s a Static Website?

As you probably guessed from the title, this book covers static websites. But what’s a static website, and how is it different from a dynamic website?

Static websites consist of static assets like HTML, CSS, and image files on a web server. To add a new web page to a static website, you create a file in a text editor, save the file along with any images to the website’s directory on your computer, and then upload them to a web server. When a user requests the web page, the files are delivered to a user’s web browser exactly as they’re stored on the web server.

On the other hand, dynamic websites are generated by database-driven, server-side applications in the form of commercial website-building services like Wix or content management systems like WordPress. To add a new web page to a dynamic website, you log in to your website’s administration console to create the content and upload images, all of which are stored in a database. When a user requests the web page, the server-side application queries the database for the blog post and images, builds the web page, and delivers it to the user’s web browser.

Dynamic websites have powerful collaborative and interactive features, but the added complexity makes them more expensive to create and maintain than static websites. They’re overkill for the majority of people.

Static websites are easy to build, inexpensive to host, and virtually impossible to hack. They’re elegant, fast, and simple. But simple doesn’t mean boring. Static websites are some of the most ground-breaking and beautifully designed websites today. Take a look at these examples.

Not all static websites are beautiful, and there’s nothing wrong with that! Some of the best static websites prioritize practicality over design. Take a look at the examples below. These static websites won’t win design awards, but they’re efficient and effective. They’re popular because they present great content in an easy-to-read format.

The Static Site Guide only covers static websites because I think static websites are the best option for most people. You can use static websites for blogs, marketing websites, personal portfolios, and more. But even if you decide to create a dynamic website using WordPress or a commercial website-building service, knowing how static websites work can help you build a better dynamic website.

Is a Static Website Right for Your Project?

Anyone who has tackled a home improvement project can tell you that tools are designed for specific tasks. You wouldn’t use a screwdriver to hammer a nail, just like you wouldn’t use a hammer to loosen a screw.

Website technology is similar. Static websites are the obvious choice for some projects, and dynamic websites are the clear winner for others. You should pick the right tool for the job.

To help you decide which type of website is right for you, I’ve compiled a list of projects and how I would categorize them.

Use dynamic websites for projects that require account-based access controls. For example, if your organization accepts content from customers and restricts access to certain employees, you’ll want a dynamic website with a database.

I recommend static websites for virtually every other type of project. They’re a great choice for projects with content that doesn’t change very often, like blogs.

Who Should Read This Book

This book is for people who have the time and inclination to learn how to build a static website from scratch. Maybe you want to build a blog. Maybe you want to create a website for your business or non-profit organization. Maybe you want to make a portfolio of work samples that you can show potential employers. Maybe you just want to learn something new.

Whatever the case, if you’re the type of curious person who enjoys trying new technical challenges, you’re in the right place. You don’t need any prerequisite technology skills, although having some technical background is helpful.

This book is not for those who need to create a website as soon as possible, and it’s also not for those who are hoping to build a complex web-based application with a lot of whiz-bang features.

I should warn you that this book is highly opinionated. I have strong views on some of these topics, and I know that might irritate some readers. Not everyone will agree with the tools, procedures, and services I’m presenting here.

The truth is that there isn’t a right or wrong way to build a static website—it’s all a matter of personal preference. Ask ten developers about their preferred method of creating a static website, and you’ll get ten different answers. But when you’re just starting out, the most important thing is to get going and keep going so you learn something. My recommendation is to learn the basics by reading this book. You can explore other technologies and form your own preferences later.

What’s in This Book

I believe that people learn best by trying things on their own. That’s why this book favors practical examples over theoretical information. You don’t need to use your computer to follow the project-based examples, but it’s best if you do. You’ll learn more by creating files, editing code, and setting up systems with the help of the examples in this book.

The book contains three parts. Part One shows you how to write HTML code using a text editor. You’ll learn how to add elements like links and images to your web pages, change the look and feel of HTML elements with CSS, upload the files to a cloud hosting service, and share your website’s URL with friends and family.

Part Two walks you through the process of creating a website using the Hugo static site generator. You’ll learn how to install Hugo on your computer, select and customize a theme, add Markdown-formatted content, and build the site and upload it to a cloud hosting service.

Part Three shows you how to put the finishing touches on your website and deal with practical matters like launching and hosting. You’ll learn how to buy a custom domain name and add DNS records to connect the domain name to your website, use version control to track changes, automatically deploy with continuous integration, submit your sitemap to search engines, and start monetizing traffic.

All of this—except for purchasing the domain name—is completely free.

Why I Wrote This Book

I wrote this book for my son Finn, who was eleven years old when I started writing. Most of the tutorials and books in this genre are terrible. The tutorials contain lots of affiliate links and propose complicated solutions. The books try to be comprehensive, resulting in daunting textbook-sized paperweights.

I set out to create something different.

This book demonstrates how to build static websites using real examples, with only the information I think is essential and pertinent. I’ve omitted the exhaustive lists of HTML elements and CSS attributes you often find in comparable books in this genre. Instead, I briefly introduce concepts, present examples, and then show you where to learn more if you need additional reference documentation.

“Why can’t I use <insert name of product or service>?”

Maybe you’re still not sure whether or not you want to build a static website. That’s okay! There are hundreds of products, applications, and services that you can use to make a dynamic website. For example, you could use a website building service like Wix or Squarespace, or a content management system like WordPress or Ghost.

If ease of development and push-button simplicity are top priorities for you, I encourage you to consider using one of the many available website building services or content management systems. Those are certainly viable options.

But there’s no free lunch. By using one of those options, you make tradeoffs that may limit your website.

Cost

Static websites are free to create and, in most cases, host. Website building services have recurring subscription fees, and content management systems incur monthly hosting expenses. Purchasing additional functionality for website building services and content management systems in the form of plugins and themes can get expensive fast.

Portability

Static websites are completely portable, so you can move your HTML files and assets to another host. Website building services make it hard to export your content. Even if an export option is provided, the files can be so full of obscure code that they’re essentially unusable. Similarly, most content management systems don’t provide an easy way to export content.

Control and Ownership

Static websites provide you with complete control and ownership of your content, and static site generators are open-source software. Website building services are proprietary and closed source, so you can’t add features or fix bugs in the software. And if your website building service ever goes out of business, you could lose your entire website. Most content management systems are open source, but they can come with the additional burden of system administration if you decide to host it yourself by running a web server with a database.

Ease of Use

Static websites can require a fairly significant upfront time investment since you need to know HTML and how to use the necessary tools. But after that, it’s mostly smooth sailing. Updates and changes require minimal amounts of time.

Website building services and content management systems have a lower barrier to entry. Publishing a website can be as easy as signing up, filling out a few forms, and clicking a button. But what you gain in convenience, you lose in control and configurability. The complexity inherent in these systems is hidden and doesn’t become apparent until you try to perform more advanced tasks. In some cases, you might discover that you’re locked into a service that can’t do what you want or need.

Speed

When it comes to how long it takes a web browser to load a website, speed is an underrated attribute. Static websites load incredibly fast because they only contain text and images. Websites generated by website building services and content management systems will always load slower than static websites. The cruft code, database-driven features, and server-side logic conspire to slow them down.

Security

Security might not be top of mind before you build your website, but it should be. Content management systems require regular maintenance—if you don’t promptly apply security patches, someone could hack your website. A static website can have dependencies that need to be updated, but after you’ve built and published the website, it’s practically unhackable.

A Brief History of the Web

When the internet opened to the public in the 1990s, hobbyists and technological tinkers rejoiced. By acquiring some technical knowledge and putting in some elbow grease, anyone could create a website and publish it on the web. It’s not an exaggeration to say this was a milestone in human history much like the invention of Gutenberg’s printing press.

The ability to publish was democratized on a global scale. Instead of begging a publishing house or a broadcasting company to share your opinions or scientific breakthroughs, you could create a website that anyone with internet access could read. It was empowering, exhilarating, and completely legal.

Best of all, thanks to the power of decentralization, every website was on an equal footing. Since people had to use directories and word of mouth to discover websites, a farmer in Nebraska had as good a shot at creating a popular website as a Fortune 500 company. It was a golden age of information freedom and technological equality.

Individuals can still create websites today, but you probably don’t need me to tell you that the web is less open and free. Due to a combination of intentional choices and unintended consequences, the web is increasingly becoming closed and centralized. Those who want to build and operate personal websites today face unprecedented challenges.

Companies segmented the web to make it more profitable for themselves. One created a virtual monopoly on search. Others amassed “walled gardens” of user-generated content exclusively available to registered users. Some created closed devices and systems that encourage people to use proprietary applications instead of websites. Welcome to what I call the private web: A collection of centralized and tightly controlled services.

Some of these services are used by so many people that they could be considered essential services, or perhaps even public infrastructure. But these services are owned by for-profit corporations that will always act in their self-interest. Search engines have no obligation to index your website or display it in search results. Social media companies can create arbitrary rules that disallow certain types of content, and your account could be permanently banned if you violate them. There is no recourse. Private companies make their own rules—they’re the judge and the jury.

And what of the technology available today to hobbyists who want to create a website? To be sure, there have been major advances—just look around. But in a cruel paradox, most of the technologies that have made possible the incredible products and services we enjoy today are too complicated and over-engineered for the part-time hobbyist. As a result, the world is increasingly divided into two groups: The small group of specialists who know how to use these technologies, and everyone else. It’s no wonder there’s now a massive market for expensive “no-code” and “low-code” tools that purport to help non-specialists create websites and web-based applications.

All of this probably paints a pretty grim picture of the modern web. But believe it or not, I have some good news. You can still create a static website the old-fashioned way. It’s true! You don’t need any centralized services, and you don’t need a NoSQL database or JavaScript framework.

By using tried and true technologies from the 1990s, as well as select new ones that have been introduced in recent years, you can make a professional-looking website that looks virtually indistinguishable from those made by your friends using “no-code” tools.

There are still a lot of fun and funky websites out there made by individuals like yourself. Let’s keep the spirit of the open and free web alive. By acquiring some technical skills and doing things yourself, you too can make a website and recapture the excitement people felt when the internet opened to the public all those years ago.

Here’s to new beginnings!