Astro Blog: Astro Markdown Blog Starter | Rodney Lab

Astro Blog: Astro Markdown Blog Starter #

🌤 Astro Blog Starter #

The Astro blog starter offers a quick and convenient way to get going on your new Astro blog. In this post we run through how to fire it up. First, though we look at some of the features like accessibility and SEO. The starter uses plain CSS making it accessible for anyone coming from a plain HTML/JavaScript/CSS background. On the other hand, you can easily add Vanilla Extract (barring issue mentioned later), Sass, Tailwind or other CSS tooling. The starter also has some dummy content; this makes it easier for you to understand where to put your files and how Astro generates your pages.

🚀 About Astro #

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.

Astro lets you code in plain HTML and CSS as well as use React, Svelte and a number of other libraries and frameworks. Two principal features of Astro are partial hydration together with islands architecture. By default Astro ships no JavaScript; if you, as the developer, decide a component needs to be interactive, you enable JavaScript. You get additional control over when that JavaScript loads. This can be straight away, only when the component is visible or even only for mobile devices. This is partial hydration, which you might imagine offers some site speed benefits. Islands architecture is all about the components on a page being independent of each other and even allows you to write some components in Svelte and others in React and so on. That’s just scratching the surface on these Astro features. If you would like to learn more, see the article on how you can get started with Astro.

🧑🏽‍🦼 Quick Start #

To get going straight away, clone the repo then fire up a dev server with these few lines in the Terminal:

git clone https://github.com/rodneylab/astro-blog-markdown
cd astro-blog-markdown
pnpm install
cp .env.EXAMPLE .env
pnpm run dev

You will need node  setup on your machine already. Here we use pnpm but you can also switch the commands for npm ones (npm comes with node). If you can't wait till you get to your computer, you can see the code in Stackblitz too .

🧐 What’s Inside? #

.
├── README.md
├── astro.config.mjs
├── package.json
├── public
│   ├── favicon.svg
│   └── fonts
├── src
│   ├── components
│   │   ├── BlogPostSummary.svelte
│   │   ├── BlogRoll.svelte
│   │   ├── Footer.svelte
│   │   ├── Header.svelte
│   │   ├── Icons
│   │   └── SEO
│   │       └── index.astro
│   ├── config
│   │   └── website.js
│   ├── content
│   │   └── posts
│   │       ├── best-medium-format-camera-for-starting-out
│   │       ├── folding-camera
│   │       └── twin-lens-reflex-camera
│   ├── layouts
│   │   └── BaseLayout.astro
│   ├── pages
│   │   ├── [slug].astro
│   │   ├── contact.astro
│   │   └── index.astro
│   ├── styles
│   │   ├── normalise.css
│   │   ├── styles.css
│   │   └── variables.css
└── tsconfig.json

astro.config.mjs #

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.

public #

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 https://example.com/favicon.svg.

src #

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.

src/config/website.js #

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.

src/content/posts #

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 https://example.com/new-post-slug.

src/layouts and src/pages #

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 src/pages, [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 src/pages/uses.md.

tsconfig.json #

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.

🖋 A Little more on Astro Blog Posts #

Above is an excerpt from one of the dummy Markdown blogposts from the Astro blog starter. The first part (lines 1–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 <title>, <meta name="description"> and <link rel="canonical"> tags. These all come for free; the starter generates them from the frontmatter.

Astro Blog: Astro Markdown Blog Starter: SEO

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.

💄 Styling #

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 currently has an issue affecting using Vanilla Extract with Astro  so hold off on trying that until the engineers resolve it.

We have self-hosted fonts referenced in src/styles/styles.css. The 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.

🙌🏽 Astro Landing Page Contact Form: Wrapping Up #

Astro Blog: Astro Markdown Blog Starter: Accessibility

Astro Blog: Astro Markdown Blog Starter: Lighthouse

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 Blog Markdown Starter: Summary #

Is Astro good for blog sites? #

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.

Why write a blog site in Markdown? #

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.

What’s the easiest way to create a new blog site in Astro? #

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.

🙏🏽 Astro Blog Starter: Feedback #

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.