The static site idea
Most people picture a website as software that builds each page when you visit it: a program looks up content in a database, fills in a template and sends the result. A static site reverses that. The pages are built once, in advance, and the server simply hands out ready-made files. Nothing needs to run when a visitor arrives.
Hugo is one popular static site generator. You write your content as text files, supply templates that define the layout, and run a build step. The output is a folder of plain HTML, CSS and any images or scripts, which any ordinary web host can serve.
The exact commands, configuration options and theme details change between versions, so use the project’s current documentation for specifics. What follows is the underlying approach.
Writing in Markdown
Markdown is a lightweight way to write formatted text using plain characters. A line starting with a hash becomes a heading, asterisks make emphasis, a dash starts a list item and square brackets with parentheses make a link. You can read it comfortably even before it is converted.
For a personal site the benefits are practical:
- You can write in any text editor, with no special software.
- The files are plain text, so they work well with version control. You can see exactly what changed, undo mistakes and keep a full history, as described in version control.
- Your content is portable. If you later switch tools, your writing remains in a simple, widely understood format.
- The writing is separate from the design, so you can change how the site looks without rewriting pages.
Most generators let you add a small block of metadata at the top of each file, often called front matter, for things like the title, date and whether it is a draft. Templates can then use that information to build listings, menus and feeds.
How templates fit in
Templates define how content becomes a full page. A base template usually contains the shared parts, such as the header, navigation, footer and links to styles. Other templates define how a single article, a list of articles or the home page should look. The generator combines your content with the right template for each page.
This solves a common problem of hand-written sites, where the same header and footer must be copied into every page. With templates, you change the header once and every page updates on the next build. If you are starting from scratch, learning how a hand-coded website works first makes templates easier to understand, because you will see what they are generating.
Many people begin with a ready-made theme, which is a set of templates and styles shared by others, and adjust it later. Check the theme’s licence, how actively it is maintained and whether its approach to layout suits you.
Building, previewing and publishing
The workflow is roughly:
- Write or edit a Markdown file.
- Preview locally. Generators typically include a local preview server that rebuilds quickly when you save.
- Run the build to produce the output folder.
- Upload that folder to a host, or let a hosting service build it for you from your repository.
Because builds are quick for a small site, this is a pleasant loop. If you later set up automated builds that run when you push changes, you are using the same ideas described in CI pipelines.
Keep your source files, not just the generated output, in version control and backed up. The output can be rebuilt, but your Markdown, templates and settings are the real work. A simple backup strategy is enough for most personal sites.
Hosting trade-offs
Because a static site is just files, hosting options are broad and often inexpensive. Many hosts specialise in static sites, and you can also serve the files from your own server. Running it at home is possible, though that brings network and security duties covered in home web server and remote access.
Advantages of static hosting include:
- Speed. Pages are ready to send, so there is little for the server to do.
- Simplicity. There is no database or server-side program to maintain.
- Security. With no code running on the server for each visit, there is a smaller attack surface. This does not make the site immune; accounts, hosting settings and any third-party scripts still matter.
- Resilience. Static files cope well with sudden bursts of traffic.
Limits include:
- Anything dynamic, such as comments, search, logins, payments or forms, needs either an outside service or a small separate program. Many sites embed these using third-party services, which raises privacy and reliability questions.
- Non-technical collaborators may find a text-and-build workflow awkward compared with a visual editor.
- Very large sites can have long build times, though this is rarely an issue for personal sites.
- Updating content always means rebuilding and republishing.
Compared with a database-driven site
A database-driven system such as a typical content management system stores content in a database and assembles pages on request. The contrast with the static approach is mostly about where the work happens.
| Question | Static site | Database-driven site |
|---|---|---|
| When are pages built? | Ahead of time | When requested (or cached) |
| What runs on the server? | Just a file server | Application code and a database |
| Editing | Text files, then rebuild | Usually a web-based editor |
| Dynamic features | Add via outside services | Often built in or via plugins |
| Maintenance | Mostly the tools on your computer | Software and plugin updates on the server |
Neither is better in general. A personal blog, portfolio or documentation site with content that changes occasionally often suits static generation well. A site where many people post content, or where pages differ for each visitor, usually needs a dynamic system. The thinking behind choosing a data store, explained in database choice, shows up here at a smaller scale, and the other side of the comparison is covered in the article on WordPress themes.
Practical tips
- Plan your structure before writing: sections, page names and the address style you want. Changing addresses later can break links.
- Keep images modest in size, and add descriptive text for accessibility.
- Do not put secrets, such as private keys, in your repository or templates. API key secrecy applies to static sites as much as any other project.
- Use HTTPS, and protect your hosting account with a strong passphrase and two-factor authentication.
- Check the generator’s release notes before upgrading, because changes can affect themes and templates.
- Read the licences of any theme, font or image you use.
Is it a good fit for you?
If you are comfortable with text files and enjoy a tidy, low-maintenance setup, a static site is a strong option for a personal website. If you want a visual editor, built-in comments or other people editing content, consider a content management system instead. You can always start static and move later, since Markdown content carries across tools reasonably well.