Astro Blog

🌤 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

---
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–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.

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.

/* 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

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 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.