Astro Blog Starter

Astro Starter Blog

A simple, hackable & minimalistic starter for Astro that uses Markdown for content.

πŸ”₯ Features

  • βœ… Beautiful and simple design.
  • βœ… Easy configuration
  • βœ… Markdown & MDX support
  • βœ… Tags support.
  • βœ… Dark / Light toggle.
  • βœ… Minimal styling (make it your own!)
  • βœ… 100/100 Lighthouse performance
  • βœ… SEO-friendly with canonical URLs and OpenGraph data
  • βœ… Uses astro:assets for optimized images
  • βœ… Sitemap support
  • βœ… RSS Feed support
  • βœ… Blog drafts

🌍 Demo URL

πŸ‘¨πŸΎβ€πŸ’» Getting started

npm create astro@latest -- --template peoray/astro-starter-blog

πŸ‘¨πŸΎβ€πŸ’» Configuration

Edit the values in src/consts.ts to match your brand or company:

export const SITE_TITLE = "Astro Blog Starter";
export const SITE_URL = "";
export const SITE_DESCRIPTION = "Welcome to my personal website!";
export const PAGE_DESCRIPTION = "A simple, hackable & minimalistic starter for Astro that uses Markdown for content"
export const TWITTER = ""
export const GITHUB = ""
export const AUTHOR = "Emmanuel Raymond"
export const IMAGE = "/images/photo.png"
export const IMAGE_ALT = "Photo of an avatar"

Change any lines or add more in the <head> tags in src/components/MetaTags.astro, like the favicon:

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

πŸš€ Project Structure

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There’s nothing special about src/components/, but that’s where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

npm installInstalls dependencies
npm run devStarts local dev server at localhost:3000
npm run buildBuild your production site to ./dist/
npm run previewPreview your build locally, before deploying
npm run astro ...Run CLI commands like astro add, astro check
npm run astro -- --helpGet help using the Astro CLI

πŸ‘€ Want to learn more?

Feel free to check the Astro documentation or jump into the Discord server.

πŸ’™ Acknowledgement

This theme is a port of the popular Gridsome Starter Blog made by the creator of Gridsome, Tommy Vedvik.

✨ Contributing

Feel free to open an issue if you find bugs or want to request new features.

πŸ“œ License

Licensed under the MIT License, Copyright Β© Emmanuel Raymond 2023

    <h2>Latest blog posts</h2>
      <li v-for="edge in $page.allWordPressPost.edges" :key="">
        {{ edge.node.title }}

query Blog {
  allWordPressPost (limit: 5) {
    edges {
      node {