How to Create a Modern Website in 2026 with Astro

26 September 2026. Reading time: 9 minutes.

The benefits of a static website, and all the other parts that go into making one work properly.

I built this site as a static website with Astro, and the pages were the quick part. The time went on everything around them, the icon in the browser tab, the preview when someone shares a link, the cookie banner, the sitemap Google reads, and a dozen other things nobody notices until they are missing, and every one of them is running on this site.

Why a static site

A static website is basically a folder of plain files (the pages, the styling and the images), built once when you publish and served exactly as they are from servers close to whoever is visiting. A WordPress site works the other way round, it builds each page from a database every time someone asks for it, with PHP, plugins and an admin login sitting behind it all.

So a static site is fast, because there is nothing to build when someone visits, and cheap to host (this one runs on Azure’s free plan). It is also much harder to attack, with no database, plugins or login page on the server for anyone to break into, it copes with a sudden rush of visitors, and the host gives you the SSL certificate (the padlock in the address bar) for free.

It is not the answer to everything, if you want to sell online, have members log in or drag boxes around yourself, Shopify or Squarespace will suit you better. But for a brochure site, a handful of pages, some news and a contact form, I think static is the better fit.

Building it with Astro

Astro is what turns the site into those plain files. You write the pages as components and the posts in Markdown, run the build, and out comes a folder of HTML ready to host, with no JavaScript sent to the browser unless part of a page needs it. Starting a project and adding the pieces this site uses looks like this:

npm create astro@latest
npx astro add mdx
npm install bootstrap

MDX is Markdown that supports reuse through shared components, so a post can hold an optimised image or a diagram as well as text. Bootstrap does the layout and the styling, it is imported once in the site’s main layout and gives you a grid, menus, buttons and forms that already work. If one part of a page needs to be interactive (a calculator, say), Astro lets you drop in a React component for just that bit and leaves the rest of the page as plain HTML.

Getting found on Google

Every page needs its own title and a short description, because they are what Google shows in its results, and a canonical link telling Google which address is the real one when a page can be reached more than one way. The headings want to be in order too (one main heading, then the sections under it), and the old keywords meta tag can be left out, Google confirmed back in 2009 that it ignores it.

The sitemap is a list of every page for search engines to work through, and Astro writes a fresh one at every build once the sitemap integration is added (npx astro add sitemap, with your domain set in the config). A small robots.txt file points search engines at it and tells them what to skip, this site’s looks like this:

User-agent: *
Disallow: /legal/
Disallow: /contact
Allow: /

Sitemap: https://www.smarterbusiness.tech/sitemap-index.xml

Looking right when it is shared

When someone pastes a link to your site into LinkedIn, Facebook or WhatsApp, the card that appears (the picture, the title and the line of text under it) comes from a handful of tags in the page, the Open Graph tags plus one or two for X. Without them you get a bare link, or whatever image the platform picks out of the page (rarely the one you would have chosen). The ones that matter look like this:

<meta property="og:title" content="How to Create a Modern Website in 2026 with Astro" />
<meta property="og:description" content="Why a static website suits a small business..." />
<meta property="og:image" content="https://www.smarterbusiness.tech/_astro/modern-website-cover.png" />
<meta name="twitter:card" content="summary_large_image" />

The image wants to be 1200 by 630 pixels, a PNG or a JPEG because not every platform shows anything else (LinkedIn is probably the fussiest), and every page wants its own. Also, the platforms remember a card once they have seen it, so after changing one, LinkedIn’s Post Inspector will make it look again.

Favicons

The favicon is the icon in the browser tab, and it used to be a single file called favicon.ico. Now it is a set, a PNG for older browsers, light and dark versions that follow the visitor’s own setting, the icon an iPhone uses when the site is saved to the home screen, and the Android ones, listed in a small web manifest. RealFaviconGenerator makes the whole set from one image (it is free, and gives you the tags to paste in), and this site’s looks like this:

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon-light.svg" media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/svg+xml" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Fast on every device

Images are usually the heaviest thing on a page, so they are the first thing to sort. Astro’s image component resizes each one when the site is built, converts it to WebP (a much smaller format) and lazy-loads it, so a four megabyte photo straight off a phone does not reach the visitor as four megabytes, and images further down the page are not downloaded until someone scrolls to them. Fonts are loaded so they do not hold up the rest of the page, and Google’s PageSpeed Insights will score the result and say what is still slowing it down.

Phones and iPads

The other thing that takes a lot of work is making the layout right on every screen. A phone held upright, an iPad either way round, a laptop and a big monitor all need the page arranged differently, and every page has to be checked on each of them. Bootstrap’s grid does the bulk of it, columns side by side on a desktop and stacked on a phone, and the menu folds away behind a button on a small screen, but it still comes down to going through the site at each size: images that shrink to fit, buttons big enough for a thumb, text you can read without zooming, and nothing wider than the screen, so the page never scrolls sideways.

Your browser’s phone view gets you most of the way, but I would check on a real iPhone and a real iPad as well, because Safari has its own ideas about a few things. Even the small bits take time, the thumbnails on the blog page took several goes before they sat right everywhere.

Dark mode

A lot of people run their phone or laptop in dark mode now, and a site that stays bright white at night stands out for the wrong reasons. Bootstrap has a dark theme built in, switched on with a single attribute on the page, so the work is a toggle in the menu (the button at the top right of this page) and a few lines of script that remember the choice for next time. Check everything in both themes though, colours that look fine on white can disappear on black, and logos with transparent backgrounds are the usual culprits.

Can everyone use it

I think accessibility is the part most sites get wrong without anyone noticing, because the people it affects just leave. Most of it comes down to building the page properly in the first place: a header, a menu, a main section and a footer marked up as what they are, headings in order, a label on every form field, and a description on every image for anyone using a screen reader.

Colour contrast needs checking, and everything has to work from a keyboard for people who cannot use a mouse. Lighthouse (built into Chrome’s developer tools) runs an accessibility check in a few seconds, and tabbing through the page yourself shows up most of the rest.

Cookie consent

If the site uses Google Analytics, advertising pixels or most other kinds of tracking, the rules (PECR, enforced by the ICO) say it has to ask before any of it runs, and that is the cookie banner’s whole job. It has to be done properly, rejecting has to be as easy as accepting (a Reject all button as big as Accept all, not hidden two clicks down), nothing can be stored until someone says yes, and there needs to be a cookie policy page explaining what each cookie is for.

This site uses a library called vanilla-cookieconsent for the banner, with Google’s consent mode behind it, so Analytics sets no cookies until someone has accepted. The ICO’s guidance has the detail, and it was updated in April 2026.

The contact form

A static site has no server of its own to receive a form, so a lot of sites send theirs through a third-party form service. This site’s form posts to a small function that ships with the site instead, it checks the fields, sends the email from our own domain and sets the reply address to whoever filled it in, and a hidden field that only bots fill in quietly bins the spam (more on why the form no longer goes through a third party).

Hosting it

This site is hosted on Azure Static Web Apps, and most of the setup is done once. The code lives in GitHub, every change pushed there is built and published automatically, the files are served from Microsoft’s network around the world, and the SSL certificate for your own domain is issued and renewed without you touching it. The contact form’s function runs on the same hosting too, so there is no separate server to set up or pay for. The part I like most is the preview, every proposed change gets its own temporary copy of the site at its own address, so you can see exactly how it will look before it goes anywhere near the live one.

Or we can do all of it for you

That is a lot of parts for what looks like a simple website, and they do not stay done either, pages change, new posts need their own share images, and the cookie policy has to keep up with whatever the site is using. We will do all of it for you with Stillsite, the managed website service we are launching for small businesses. Your site is rebuilt as a static site with all of the above taken care of, hosted and looked after, and when something needs changing you send an email, you get a preview, and nothing goes live until you have said yes. If you are not sure whether your own site would suit, get in touch and I will let you know.