Astro Blog: Astro Markdown Blog Starter

• astro-blog-markdown

  4 28 6.8 Svelte

  Starter for a fast Astro blog using Markdown and a spot of Svelte

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

• astro

  505 42,342 10.0 TypeScript

  The web framework for content-driven websites. ⭐️ Star to support our work!

  

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 , and 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');
}

Enter fullscreen mode Exit fullscreen mode

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project