Astro Starter Template with SEO and CI/CD Configuration

Astro Starter is a pre-configured template for building fast, SEO-optimized static websites with Astro.

It includes automated sitemap generation, social media integration, and a complete development toolchain with linting, formatting, and type checking.

GitHub

Live Demo

Features

🎯 SEO Setup: Pre-configured OpenGraph tags, Twitter Cards, and meta descriptions ready for social media sharing.

🔍 Automated Site Management: Built-in sitemap and robots.txt generation through Astro integrations.

⚡ Development Toolchain: ESLint, Prettier, and TypeScript configured to work together with Astro files.

🚀 CI/CD Pipeline: GitHub Actions workflows for automated quality checks, linting, and build verification.

⚙️ Pre-commit Quality Control: Husky and lint-staged run type checking, linting, and formatting before each commit.

🌐 Social Media Ready: Twitter and OpenGraph meta tags configured with placeholder values you can customize.

📱 Cross-Platform Icons: Complete favicon set includes SVG, PNG formats, and platform-specific icons for iOS and Android.

🗂️ Organized Structure: Clear separation between layouts, components, and pages following Astro conventions.

Use Cases

Portfolio Websites: Developers can use this template to quickly launch a personal portfolio with proper SEO already configured.
Blogs: Content creators can start a blog that is fast, optimized for search engines, and easy to maintain.
Marketing Sites: Businesses can build performant landing pages or simple marketing websites with a solid technical structure.
Documentation Sites: Teams can create documentation websites that benefit from the clean architecture and automated checks.

How to Use It

1. Clone the repository and install dependencies using pnpm.

git clone https://github.com/alipiry/astro-starter.git
cd astro-starter
pnpm install

2. Copy the environment variables template to create your local configuration file.

cp .env.example .env

3. Open the .env file and update the values for your project.

SITE_URL=https://your-domain.com
APP_ENV=production

4. Start the development server to preview your site locally.

pnpm dev

The site will be available at http://localhost:4321. The development server includes hot module replacement so changes appear immediately.

5. Open src/layouts/Layout.astro to customize the SEO settings for your site. The layout file includes the <SEO> component from astro-seo with preconfigured options.

<SEO
  title={pageTitle}
  titleDefault={DEFAULT_TITLE}
  titleTemplate={titleTemplate}
  description={description}
  canonical={Astro.url.toString()}
  noindex={!allowIndexing}
  nofollow={!allowIndexing}
  openGraph={{
    basic: {
      title: title || "Astro Starter",
      type: "website",
      image: `${siteUrl}/og.png`,
      url: Astro.url.toString(),
    },
    image: {
      alt: "Astro Starter",
      width: 1600,
      height: 800,
      type: "image/png",
    },
    optional: {
      description,
      siteName: "Astro Starter",
      locale: "en_US",
    },
  }}
  twitter={{
    card: "summary_large_image",
    site: "@alipiry",
    creator: "@alipiry",
    title: title || "Astro Starter",
    description,
    image: `${siteUrl}/og.png`,
    imageAlt: "Astro Starter",
  }}
  extend={{
    meta: [
      { name: "author", content: "Ali Piry" },
      {
        name: "keywords",
        content:
          "astro, web development, javascript, typescript, modern web",
      },
      { name: "googlebot", content: robotsContent },
      { name: "theme-color", content: "#000000" },
      { name: "msapplication-TileColor", content: "#000000" },
    ],
    link: [
      {
        rel: "apple-touch-icon",
        sizes: "180x180",
        href: "/apple-touch-icon.png",
      },
      {
        rel: "icon",
        type: "image/png",
        sizes: "32x32",
        href: "/favicon-32x32.png",
      },
      {
        rel: "icon",
        type: "image/png",
        sizes: "16x16",
        href: "/favicon-16x16.png",
      },
      {
        rel: "icon",
        type: "image/x-icon",
        href: "/favicon.ico",
      },
      {
        rel: "icon",
        type: "image/png",
        sizes: "192x192",
        href: "/android-chrome-192x192.png",
      },
      {
        rel: "icon",
        type: "image/png",
        sizes: "512x512",
        href: "/android-chrome-512x512.png",
      },
    ],
  }}
/>

6. Available scripts to assist with development and maintenance.

pnpm run format: Formats all code with Prettier to maintain a consistent style.
pnpm build: Builds the production-ready site to the ./dist/ directory.
pnpm preview: Previews the production build locally before deployment.
pnpm run lint: Runs ESLint to check the code for quality issues.

7. This template uses Husky and lint-staged to enforce code quality automatically before commits. When you commit changes, it runs type checking, linting, and formatting. This process helps prevent errors from entering the codebase. The configuration is located in lint-staged.config.js.

export default {
  "**/*.{ts,tsx,astro}": "pnpm run type-check",
  "**/*.astro": ["eslint --fix", "prettier --write"],
  "**/*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"],
  "**/*.{md,json,yaml,yml,css,scss,sass}": "prettier --write"
}

8. Connect your repository to Netlify through the Netlify dashboard. Netlify detects the Astro framework automatically and configures the build settings.

Related Resources

Astro Documentation: Official guide covering installation, concepts, and API reference.
astro-seo Package: Component library for managing SEO meta tags in Astro projects.
Astro Themes: Collection of starter templates and themes for different use cases.
Astro Discord: Community support and discussions about Astro development.

FAQs

Q: Can I use this template with a package manager other than pnpm?
A: Yes, you can use npm or yarn. Replace pnpm commands with npm run or yarn equivalents. You need to update the scripts in package.json and the GitHub Actions workflows to use your preferred package manager.

Q: How do I add more Astro integrations to this template?
A: Run pnpm astro add [integration-name] to install and configure new integrations. Astro automatically updates your config file. You can also manually install packages and add them to astro.config.mjs.

Q: Can I deploy this template to platforms other than Netlify?
A: Yes, you can deploy to any static hosting platform including Cloudflare Pages, Vercel, GitHub Pages, or traditional web servers. Build the site with pnpm build and upload the dist/ directory to your hosting provider.

Q: How do I disable the pre-commit hooks temporarily?
A: Use the --no-verify flag when committing: git commit --no-verify -m "your message". This skips the hooks but should only be used when necessary since the hooks prevent broken code from being committed.

Q: What is the main advantage of using this starter over a new Astro project?
A: This starter saves setup time by providing pre-configured SEO, a full suite of development tools like ESLint and Prettier, and ready-to-use CI/CD workflows.