This template was built to easily create an engineering blog for one or multiple authors.
Demo: https://astro-engineering-blog.netlify.app/
- ✅ Easy configuration
- ✅ Minimal styling (make it your own!)
- ✅ 100/100 Lighthouse performance
- ✅ SEO-friendly with canonical URLs and OpenGraph data
- ✅ Uses
astro:assetsfor optimized images - ✅ Sitemap support
- ✅ RSS Feed support
- ✅ Markdown & MDX support
- ✅ Search functionality
- ✅ Author system
- ✅ Multiple authors per post (co-authoring)
- ✅ Topics
- ✅ Blog pagination
- ✅ Blog drafts
- ✅ Dark mode (system preference + toggle button)
- ✅ Post reactions & blog post ranking page (optional, uses Appwrite's free tier)
- Astro as the framework tying everything together
- Solid.js for search (all
.tsxfiles) and any other features that require JavaScript - Tailwind CSS for styling
- Fuse.js for search logic
- Everything is written in TypeScript 💙
npm create astro@latest -- --template eddyvinck/astro-engineering-blog
Edit the values in src/consts.ts to match your brand or company:
export const BRAND = "Acme";
export const SITE_TITLE = "Acme Engineering";
export const SITE_URL = "https://astro-engineering-blog.netlify.app";
export const SITE_DESCRIPTION = "Welcome to the Acme Engineering blog!";
export const PAGINATION_POSTS_PER_PAGE = 5;Change any lines or add more in the <head> tags in src/components/BaseHead.astro, like the favicon:
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />You can also update the colors in tailwind.config.css:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
colors: {
header: "#000",
"header-foreground": "#fff",
"header-dropdown": "#1e293b",
"header-dropdown-foreground": "#fff",
link: "#2563EB",
"link-dark": "#3e7afe",
primary: {
500: "#2563EB",
600: "#1D4ED8",
},
"primary-foreground": "#fff",
},You can enable backend services to your project by adding an Appwrite API key:
# in /.env
SECRET_APPWRITE_API_KEY=YOUR_APPWRITE_API_KEY
PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
PUBLIC_APPWRITE_PROJECT_ID=PUBLIC_APPWRITE_PROJECT_ID
PUBLIC_APPWRITE_DATABASE_ID=PUBLIC_APPWRITE_DATABASE_ID
PUBLIC_APPWRITE_EMOJI_REACTIONS_COLLECTION_ID=post-reactions
- Astro team & all the other library authors
- The maintainers of the Astro blog template which was used as a base for this template
- FrontValue, for letting me work on this template during work hours
Inside of your Astro project, you'll see the following folders and files:
├── public/
├── src/
│ ├── components/
│ ├── content/
│ ├── layouts/
│ └── pages/
├── astro.config.mjs
├── README.md
├── package.json
└── tsconfig.json
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.
The src/content/ directory contains "collections" of related Markdown and MDX documents. Use getCollection() to retrieve posts from src/content/blog/, and type-check your frontmatter using an optional schema. See Astro's Content Collections docs to learn more.
Any static assets, like images, can be placed in the public/ directory.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:3000 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro --help |
Get help using the Astro CLI |
Check out the documentation or jump into the Discord server.