---
layout: integration
title: Deploy Astro Sphere with Sites
description: Deploy an Astro portfolio and blog with built-in search on Appwrite Sites
date: 2026-11-06
featured: false
isPartner: true
isNew: true
cover: /images/integrations/sites-astro-sphere/cover.avif
category: sites
product:
    vendor: Astro Sphere
    description: "Astro Sphere is a static portfolio and blog theme for Astro, built with Tailwind CSS, TypeScript, and a small amount of SolidJS."
platform:
    - 'Self-hosted'
    - 'Cloud'
images:
    - /images/integrations/sites-astro-sphere/cover.avif
    - /images/sites/templates/astro-sphere-dark.png
    - /images/sites/templates/astro-sphere-light.png
---

[Astro Sphere](https://github.com/markhorn-dev/astro-sphere) is a portfolio and blog theme for [Astro](https://astro.build), based on its creator Mark Horn's personal website. It is built with Astro, Tailwind CSS, and TypeScript, and uses SolidJS only for its few stateful components. The theme includes light and dark modes, keyword search across posts and projects, copyable code blocks, an RSS feed, a sitemap, and Markdown and MDX support.

# How does the integration work?

[Appwrite Sites](/docs/products/sites) includes Astro Sphere in its template library. When you create a site from the template, Appwrite builds the theme from the [appwrite/templates-for-sites](https://github.com/appwrite/templates-for-sites/tree/main/astro/sphere) repository and serves it as a static site on an Appwrite domain. If you connect a repository, every push to the production branch builds and deploys a new version.

Appwrite applies these build settings to the template:

| Setting | Value |
| --- | --- |
| Framework | Astro |
| Install command | `npm install` |
| Build command | `npm run build` |
| Output directory | `./dist` |
| Rendering | Static |

**Self-hosted Appwrite**

The template builds on the `node-22` runtime, which `_APP_SITES_RUNTIMES` enables by default. To create a repository from the template, configure [version control](/docs/advanced/self-hosting/configuration/version-control) for your instance first. **Connect later** deploys the template straight from its public GitHub source.

# How to implement

To deploy Astro Sphere with Appwrite Sites, there are several steps you must complete:

## Step 1: Create a site from the template

For this step, you must [create an account on Appwrite Cloud](/sign-up) or [self-host Appwrite](/docs/advanced/self-hosting) if you haven't already. In your Appwrite project, go to **Sites** and click **Create site**. Search the templates for **Astro Sphere** and select it.

Enter a **Site name** and a **Site ID**, then choose how to manage the code:

- **Connect your repository** creates a new repository from the template with your Git provider, such as GitHub, or connects one you already have, and redeploys on every push to the production branch. Choose this if you plan to change the content.
- **Connect later** deploys the template as it is. You can connect a repository afterwards from the site's **Settings** > **Git repository**.

Pick a subdomain under **Domain** and click **Deploy**. You can follow the build logs in the Console, and the site goes live on that domain when the build succeeds.

## Step 2: Make the site yours

Clone the repository and edit the following files:

- `src/consts.ts`: the site title, description, and author, the title and description of the work, blog, projects, and search pages, the navigation links, and your social links.
- `src/content/blog/`, `src/content/projects/`, and `src/content/work/`: one entry per folder or Markdown file. The sample blog posts walk through the file structure, adding posts and projects, Markdown, MDX, and social links.
- `src/content/legal/`: the privacy policy and terms pages.
- `astro.config.mjs`: set `site` to your site's URL so the sitemap and RSS feed point to the right domain.

Commit and push to the production branch. Appwrite builds the change and activates the new deployment.

## Step 3: Add a custom domain

Open your site's **Domains** tab to serve the portfolio from your own domain. Follow [Add a custom domain](/docs/products/sites/domains#add-a-custom-domain) for the DNS records to create.

# Read more about Astro Sphere and Appwrite Sites

If you would like to learn more about Astro Sphere and Appwrite Sites, we have some resources that you should visit:

- [Appwrite Sites templates](/docs/products/sites/templates)
- [Deploy Sites from Git](/docs/products/sites/deploy-from-git)
- [Free Astro hosting with Appwrite Sites](/blog/post/free-astro-hosting)
- [Astro Sphere on GitHub](https://github.com/markhorn-dev/astro-sphere)