Quick Start

This is a quick start guide to getting a SuperWeb theme up and running on the internet. This is intended for users already familiar with working with Astro projects. If you prefer a more in-depth guide, see this tutorial.

Note

Developing locally is recommended but if you prefer to try out the theme in a browser you can use an online development environment. There are many options available, including CodeSandbox, StackBlitz, GitPod and Google’s Project IDX.

Download the code

Using git

1. On the theme’s GitHub page, click the green “Code” and copy the HTTPS URL.

2. Open a terminal and run the following command:

   ~/Downloads

   # replace HTTPS_URL with the copied URL in step 1
   
   git clone HTTPS_URL my-website

3. Navigate to the theme’s directory, install the dependencies, and start the development server:

   ~/Downloads/my-website

   cd my-website
   npm install
   npm run dev

4. Open http://localhost:4321 in your browser to view the website.

Using a zip file

1. Download the zip file for a theme, either from the theme’s GitHub page or from Gumroad.

2. Extract the zip file to a directory of your choice.

3. Navigate to the theme’s directory, install the dependencies, and start the development server:

   ~/Downloads/theme-name

   cd theme-name
   npm install
   npm run dev

4. Open http://localhost:4321 in your browser to view the website.

Caution

If you’re having issues viewing your project in the browser after starting the development server, go back to the terminal where you ran the dev command. It will tell you whether an error occurred or if the project is being served at a different URL than http://localhost:4321.

Configure your development environment

See Astro’s official editor setup documentation on how you can improve the development experience and unlock helpful features.

Configure package.json

package.json

{
  "name": "barebones"
}

Configure astro.config.mjs

astro.config.mjs

// Replace with your site's URL.

export default defineConfig({
  site: "https://barebones.superwebthemes.com",
});

Configure metadata

To change the website’s metadata, edit src/siteConfig.ts.

/src/siteConfig.ts

export const SITE: SiteConfiguration = {
  title: "Astro Barebones",
  description: "A barebones Astro theme.",
  url: "https://barebones.superwebthemes.com",
  author: "SuperWeb Themes",
  locale: "en-US",
};

Field	Req	Description
title	Yes	Displayed in header and browser tab. Used in SEO and RSS.
description	Yes	Used in SEO and RSS.
url	Yes	Used in SEO and RSS.
author	Yes	Used in SEO and RSS.
locale	Yes	Used for SEO, RSS, and formatting dates. Defaults to en-US.

---

Customize the links shown in the navigation bar.

/src/siteConfig.ts

export const NAV_LINKS: NavigationLinks = {
  about: {
    path: "/about",
    label: "About",
  },
  contact: {
    path: "/contact",
    label: "Contact",
  },
};

Each link should be an object with a path and a label, and must have a corresponding page in src/pages. There must be at least one link or the Navigation.astro component will encounter an error.

Field	Req	Description
path	Yes	The path to send the user to. Used in SEO and RSS.
label	Yes	The text to be used for the link. Used in SEO.

---

Customize your social media links. Add as many as you’d like.

src/siteConfig.ts

export const SOCIAL_LINKS: SocialLinks = {
  email: {
    label: "Email",
    url: "mailto:[email protected]",
  },
  github: {
    label: "GitHub",
    url: "https://github.com/superwebthemes",
  },
  discord: {
    label: "Discord",
    url: "https://discord.gg/V5MCBCsAjJ",
  }
  twitter: {
    label: "Twitter",
    url: "https://twitter.com/superwebthemes",
  },
  reddit: {
    label: "Reddit",
    url: "https://www.reddit.com/r/superwebthemes",
  },
};

Field	Req	Description
path	Yes	The path to send the user to. Used in SEO and RSS.
label	Yes	The text to be used for the link. Used in SEO.

Start developing

Open src/pages/index.astro in your text editor and start editing. When you save the file, the page in your browser (http://localhost:4321) will update automatically and reflect the changes you make.

Deploying your site

Read the deployment documentation for information on deploying your site.