Astro is a site builder, able to build fast static sites. Static sites are ideal for blogs, where every visitor sees identical content. This is in contrast to an app like Instagram where users log in and see a customised feed: their followers’ content and their own DMs. Static sites are typically faster, since the content is the same for everyone, hosts can cache it and deliver it from servers close to the visitor (the edge). Hosts only update caches once you refresh or add to the blog content.
To get going straight away, clone the repo then fire up a dev server with these few lines in the Terminal:
You will need
setup on your machine already. Here we use
pnpm but you can also
switch the commands for
npm ones (
npm comes with node). Also, we disable Astro data collection. Skip that line if you want to send telemetry
to Astro. If you can't wait till you get to your computer to get started, you can see the code in Stackblitz too
This is the main Astro config file. You can configure any additional integrations (React, Solid etc.) here as well as any Remark and Rehype plugins you decide to add.
The public folder is for files which do not need processing. Examples are favicons and self-hosted
fonts. As an example the file
public/favicon.svg will be available
on the final site at
Ensure any resources which you need to import and process are within the
src folder. Examples are CSS files and Markdown source. In
src/components, we can put React, Svelte and Astro components.
This file is provided for convenience, importing environment variables to a single location so
they can be used in the contact page, footer, SEO and elsewhere. Be sure to edit
.env and this file to suit your needs.
Here we have our blog post content. We just need to create an
index.md file in
src/content/posts/new-post-slug to have a new post automatically
generated from the Markdown at
Files here are used to create the site’s pages.
BaseLayout.astro contains the HTML headers. As an example, the
lang attribute for
accessibility is included there. Within
[slug].astro is the template which takes raw Markdown files and turns them into actual pages. For any other pages
just create a Markdown or Astro file in this folder. As examples you could add an About page, by creating
src/pages/about.astro or a Uses page with
You might notice when we import a component in the source code we just use
$components in the import statement, rather than a relative path like
../../components. This is possible because the alias is defined in
tsconfig.json. Just follow the pattern in this file to add your own convenience aliases.
Above is an excerpt from one of the dummy Markdown blogposts from the Astro blog starter. The
first part (lines
15) is known as frontmatter. This is post meta, nothing more than data about the post. Fill this
out on new posts and it will feed through to the search engine optimisation (SEO) starter
features. As an example the screenshot below shows the browser developer tools inspector for this
page. We can see the
<meta name="description"> and
<link rel="canonical"> tags. These all come for free;
the starter generates them from the frontmatter.
The title and description (typically referred to as meta description) will be picked up by search engines. They are often displayed on the search results page when your site is listed as a result. The canonical link is also important for SEO. If you share your entire post on another site, Google might pick it up as duplicate content and the rankings of both could suffer. Including the canonical link tells Google which is the principal source. This way the two results do not ‘cannibalise’ one another.
On top we have a draft feature. Set
draft: true in the frontmatter
and the post will be excluded from build. This lets you sketch out upcoming content without having
to publish it.
We use plain CSS for styling to make the starter accessible to a wider audience. It is easy to swap this for Sass, Tailwind or another framework to suite your taste. Astro does not currently work with Vanilla Extract .
We have self-hosted fonts referenced in
font files themselves are in the
public/fonts folder. When you change
the fonts, just get the right markup and files from google-webfonts-helper
. You can learn more about the process and font optimisation for Astro in this video.
In this post we have had an introduction to the Astro blog Markdown starter as well as seen:
- firstly, how to set up the Astro blog starter,
- some of the starter features including draft posts as well as SEO meta,
- how to customise the self-hosted fonts in the starter.
The Astro Markdown blog starter is available to clone from GitHub . You can also try it on Stackblitz .
I hope you found this article useful and am keen to hear how you will the starter on your own projects as well as possible improvements.
- Astro is new and specialised in building static sites, making it ideal for a blog. Static sites are ones like blogs where the user does not have to log in or have a custom feed generated (like they would on Twitter for example). Because everybody sees the same page and feed, the pages can be optimised and cached globally on servers close to the visitor (known as the edge). This means your blog gets served up at lightning speed, providing a fantastic user experience. As is typically the case, here, great user experience also brings great search engine optimisation (SEO), meaning you can expect your site will rank higher in search engines.
- Markdown is a good choice for many blog sites. The syntax is much lighter as well as more convenient than HTML but almost as widely supported. The advantage of writing your posts in Markdown over something unique to your site builder is that you can easily move your content to another site builder as the site evolves. Markdown is a widely support standard used with site generators and we are seeing all new generators support Markdown. In fact many, like Astro, support Markdown out of the box, with no additional configuration needed.
- Probably, the easiest way to get started with a blog site in Astro is to use a starter. These are great if you are in a hurry to get going and don’t want to get stuck in tutorial hell! Find a good one which is still maintained and up-to-date. Also one which follows current best practice for using Astro APIs. This will mean fewer changes going forward as Astro evolves.
Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SvelteKit. Also subscribe to the newsletter to keep up-to-date with our latest projects.