Cover image for the blog post

Build a good website

Published on

Edit this page


To get the most out of this article, you should have a basic understanding of HTML, CSS and JavaScript as well as some common terms (e.g. accessibility, dependency, deployment, build).

Static site generators

While you could simply create a few .html, .css and .js files and link them together to create your website, using a Static site generator (SSG) can make things a lot easier.

SSGs make your project a bit more complicated, but you will get used to it quickly and greatly benefit from the many advantages. Here are a few of them:

There are a lot of SSGs out there, and I tried many of them, but the one I liked the most and recommend is Astro. It is actively maintained, has a great documentation and a lot of cool, unique features.

Semantic HTML

Using the right HTML element for the right job makes your website more accessible, SEO friendly and can also make your life easier, so it makes a lot of sense to learn when to use which element.

Page structure

To get started with the general layout of your page(s), you can use the following template:

    <div class="container">
      <a href="/">Logo</a>
          <a href="/projects">Projects</a>
          <a href="/blog">Blog</a>
          <a href="/contact">Contact</a>
    <div class="container">
    <div class="container">
      <section id="about">
        <!-- ... -->
      <section id="features">
        <!-- ... -->
    <div class="container">
      <small>Copyright © 2023 Your Name</small>

Semantic elements

Of course there are many more, the elements listed above are just some of the ones I used a few times. Navigate to the MDN HTML elements reference for a well structured overview of all the elements.

Accessible styles

While styling your elements with CSS, you should also keep accessibility in mind. Here are some simple guidelines:

After applying the styles shown above and some more simple ones to the HTML page template:

body {
  line-height: 1.6;

nav {
  border-block-end: 0.0625rem solid hsl(0 0% 50%);

nav > .container, nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

nav .container {
  justify-content: space-between;

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;

.container {
  max-inline-size: 70ch;
  margin-inline: auto;

a {
  display: inline-block;
  padding-inline: 1rem;
  padding-block: 0.5rem;

footer {
  border-block-start: 0.0625rem solid hsl(0 0% 50%);

we have an accessible, and solid looking website:

Accessible website preview


When using a SSG, you basically do not have to do anything here. At build time, many optimizations are performed to make the production website as fast as possible.

With Astro you can even use a special src/assets directory where all your stored images are optimized in. The photos on my gallery page rely on this mechanism. Each of them becomes up to ten times smaller in file size.

Search engine optimization

SEO is a big topic, there is a lot to it. I recommend going through the Google SEO starter guide to pick up the most important information. Following the patterns shown in that article should get you really far.

Publishing your website

Being able to only access your website from your own computer is boring, is it not? Fortunately you have plenty of options for bringing your site online and thus making it accessible to anyone on the internet.

My favorite way to automate this process is to use Git, GitHub and Cloudflare Pages. Besides Cloudflare Pages, I also highly recommend Netlify or Vercel.

There are wonderful recipes on how to deploy your website for different hosting platforms in the Astro documentation, so I will not try to replicate them here.

In case you are not using a SSG, you can follow the Cloudflare Pages deployment guide.


I hope this article helped you to create an accessible and performant modern website. There is also a section in my resources page which lists multiple useful tools for building websites and web applications.