Astro Blog: Astro Markdown Blog Starter
Tags: astro, webdev, svelte, javascript
Published: 2022-04-06 16:24:18

---
title: "Astro Blog: Astro Markdown Blog Starter"
published: "true"
description: "Astro blog Markdown: starter for fast Astro blog with partial hydration and a spot of Svelte speed. Create a new blog site in minutes."
tags: "astro, webdev, svelte, javascript"
canonical_url: "https://rodneylab.com/astro-blog-markdown/"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0llsvonraztjfytq6b2.png"
---

## 🌤 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&rsquo;s just scratching the surface on these Astro features.  If you would like to <a aria-label="Open post on getting started with Astro" href="https://rodneylab.com/getting-started-astro">learn more, see the article on how you can get started with Astro</a>.

## 🧑🏽‍🦼 Quick Start

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

```shell
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 <a aria-label="Download node" href="https://nodejs.org/en/download/"><code>node</code></a> 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 <a aria-label="Open the Astro blog Markdown starter in Stack Blitz" href="https://stackblitz.com/github/rodneylab/astro-blog-markdown">see the code in Stackblitz too</a>.


## 🧐 What's Inside?

```plaintext
.
├── 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 <a aria-label="Open post on rehype" href="https://rodneylab.com/mdsvex-rehype-plugins">Rehype plugins</a> 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&rsquo;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

```markdown
---
postTitle: 'Folding Camera'
focusKeyphrase: 'folding camera best kept secret'
datePublished: '2022-03-05T15:38:49.000+0100'
lastUpdated: '2022-03-14T10:17:52.000+0100'
seoMetaDescription: 'Folding cameras have the benefits of high resolution negatives but are so much more compact and often have amazing optics'
featuredImage: 'folding-camera.jpg'
featuredImageAlt: 'Photograph of a classic folding camera'
ogImage: 'folding-camera-open-graph.jpg'
ogSquareImage: 'folding-camera-open-graph-square.jpg'
twitterImage: 'folding-camera-twitter.jpg'
categories: ''
tags: ''
draft: false
---

## What is a Folding Camera?

Folding cameras are a well kept secret. Typically the optics are amazing, in 
```

Above is an excerpt from one of the dummy Markdown blogposts from the Astro blog starter.  The first part (lines `1`&ndash;`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 screenshot shows metadescription, title and canonical meta tags in browser dev tools.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4so2xge0vv8f4lnrr0y.png)

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 &lsquo;cannibalise&rsquo; 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&nbsp;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 <a aria-label="Read about Astro vanilla extract issue" href="https://github.com/withastro/astro/issues/2536">currently has an issue affecting using Vanilla Extract with Astro</a> 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 <a aria-label="Download webfonts from Google web fonts helper" href="https://google-webfonts-helper.herokuapp.com/fonts">google-webfonts-helper</a>.  You can <a aria-label="Open video on self-hosted fonts in Astro" href="https://rodneylab.com/astro-self-hosted-fonts/">learn more about the process and font optimisation for Astro in this video</a>.

```css
/* lora-regular - latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('/fonts/lora-v23-latin-regular.woff2') format('woff2'),
    url('/fonts/lora-v23-latin-regular.woff') format('woff');
}
```

## 🙌🏽 Astro Landing Page Contact Form: Wrapping Up

![Astro Blog: Astro Markdown Blog Starter: Accessibility screenshot shows clean sheet from axe automated accessibility testing tool.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxoafb6x7tywj6iqxrlc.png)

![Astro Blog: Astro Markdown Blog Starter: lighthouse screenshot shows lighthouse scores all at 100.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wx0dzxryvp9nmvc8rijm.png)

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 <a aria-label="Open the Astro scroll to anchor code in the Rodney Lab Git Hub Repo" href="https://github.com/rodneylab/astro-blog-markdown">Astro Markdown blog starter is available to clone from GitHub</a>.  You can also <a aria-label="Open the Astro blog Markdown starter in Stack Blitz" href="https://stackblitz.com/github/rodneylab/astro-blog-markdown">try it on Stackblitz</a>.

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 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 <a aria-label="Support Rodney Lab via Buy me a Coffee" href="https://rodneylab.com/giving/">consider supporting me through Buy me a Coffee</a>.

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 <a aria-label="Connect on Twitter" href="https://twitter.com/messages/compose?recipient_id=1323579817258831875">@askRodney</a> on Twitter and also <a aria-label="Contact Rodney Lab via Telegram" href="https://t.me/askRodney">askRodney on Telegram</a>. Also, see <a aria-label="Get in touch with Rodney Lab" href="https://rodneylab.com/contact">further ways to get in touch with Rodney Lab</a>. I post regularly on <a aria-label="See posts on Astro" href="https://rodneylab.com/tags/astro/">Astro</a> as well as <a aria-label="See posts on svelte kit" href="https://rodneylab.com/tags/sveltekit/">SvelteKit</a>. Also <a aria-label="Subscribe to the Rodney Lab newsletter" href="https://rodneylab.com/about/#newsletter">subscribe to the newsletter to keep up-to-date</a> with our latest projects.