README: What's included in this Engineering Blog template?

Astro Starter Kit: Engineering Blog

This template was built to easily create an engineering blog for one or multiple authors.


Getting started

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 = "";
export const SITE_DESCRIPTION = "Welcome to the Acme Engineering blog!";

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: "#f86423",
        "header-foreground": "#000",
        link: "#f86423",
        "link-dark": "#f86423",
        primary: {
          500: "#f86423",
          600: "#db5215",
        "primary-foreground": "#000",

Optional: enable backend services

You can enable backend services to your project by adding an Appwrite API key:

# in /.env


Technologies used

Thank you ❤️

🚀 Project Structure

Inside of your Astro project, you’ll see the following folders and files:

├── public/
├── src/
│   ├── components/
│   ├── content/
│   ├── layouts/
│   └── pages/
├── astro.config.mjs
├── 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.

CLI 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

Learn more about Astro

Check out the documentation or jump into the Discord server.