Built on top of the AstroWind template from onWidget. AstroWind is a free and open-source template to make your website using Astro 4.0 + Tailwind CSS.
Table of Contents
Astro is a great base to start building static websites from and AstroWind is even better. It has a library of prebuilt components to use when designing your site and it can be customized as much as needed.
-
Google Tags Manager: This site uses GTM for advanced analytics and conversion tracking. AstroWind has support for basic Google Analytics (GA4) but not for GTM. I build a simple custom integration for GTM that matches the pattern used by AstroWind for GA4.
-
Contentful & Astro Integration: This site uses the Contentful SDK integration from Contentful to provides image hosting and blog posts.
-
npm react-calendly: This site uses an integration with Calendly to embed their platform's calendar and scheduling components.
-
airtable: Originally I had planned to use Airtable as a custom CMS. There is no Airtable & Astro integration avaialble so I built a custom integration with a REST API (the file is still in this repo, located here) to connect to Airtable, as well as a Make.com webhook automation to trigger a Netlify "Build & Deploy" sequence (it used a button in one of the Airtable columns that would trigger the webhook and tell Netlify to build and deploy to production). Airtable uses dynamic links for imagesthat change every 1-2 days, so it does not suport image hosting for static sites. That meant I would need to use Contentful for images, and I decided to remove Airtable altogether from this project. I left the legacy code there as an example of how to integrate Aitable into Astro as a custom CMS.
There are currently two Netlify "Build & Deploy" triggers.
The first trigger is a code push to the main branch of the GitHub repository for this website (which is probably where you are reading this README file right now). This trigger handles any approved pull requests and code updates.
The second trigger is the change in status to published for blog posts within my Contentful CMS. That trigger handles content changes and blog updates.
To update this repo with upstream changes made to the original AstroWind Template, use the following commands:
git remote add template https://github.com/onwidget/astrowind.git
git fetch --all
git merge template/main --allow-unrelated-histories
More info here https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories.
The rest of this document contains the original AstroWind template README, credit to the original template developer onWidget, and the original template LICENSE.
AstroWind tries to give you quick access to creating a website using Astro 4.0 + Tailwind CSS. It's a free theme which focuses on simplicity, good practices and high performance.
Very little vanilla javascript is used only to provide basic functionality so that each developer decides which framework (React, Vue, Svelte, Solid JS...) to use and how to approach their goals.
In this version the template supports all the options in the output configuration, static, hybrid and server, but the blog only works with prerender = true. We are working on the next version and aim to make it fully compatible with SSR.
Inside AstroWind template, you'll see the following folders and files:
/
├── public/
│ ├── _headers
│ └── robots.txt
├── src/
│ ├── assets/
│ │ ├── favicons/
│ │ ├── images/
│ │ └── styles/
│ │ └── tailwind.css
│ ├── components/
│ │ ├── blog/
│ │ ├── common/
│ │ ├── ui/
│ │ ├── widgets/
│ │ │ ├── Header.astro
│ │ │ └── ...
│ │ ├── CustomStyles.astro
│ │ ├── Favicons.astro
│ │ └── Logo.astro
│ ├── content/
│ │ ├── post/
│ │ │ ├── post-slug-1.md
│ │ │ ├── post-slug-2.mdx
│ │ │ └── ...
│ │ └-- config.ts
│ ├── layouts/
│ │ ├── Layout.astro
│ │ ├── MarkdownLayout.astro
│ │ └── PageLayout.astro
│ ├── pages/
│ │ ├── [...blog]/
│ │ │ ├── [category]/
│ │ │ ├── [tag]/
│ │ │ ├── [...page].astro
│ │ │ └── index.astro
│ │ ├── index.astro
│ │ ├── 404.astro
│ │ ├-- rss.xml.ts
│ │ └── ...
│ ├── utils/
│ ├── config.yaml
│ └── navigation.js
├── package.json
├── astro.config.mjs
└── ...
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.
Any static assets, like images, can be placed in the public/ directory if they do not require any transformation or in the assets/ directory if they are imported directly.
🧑🚀 Seasoned astronaut? Delete this file
README.md. Updatesrc/config.yamland contents. Have fun!
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 check |
Check your project for errors |
npm run fix |
Run Eslint and format codes with Prettier |
npm run astro ... |
Run CLI commands like astro add, astro preview |
Basic configuration file: ./src/config.yaml
site:
name: 'Example'
site: 'https://example.com'
base: '/' # Change this if you need to deploy to Github Pages, for example
trailingSlash: false # Generate permalinks with or without "/" at the end
googleSiteVerificationId: false # Or some value,
# Default SEO metadata
metadata:
title:
default: 'Example'
template: '%s — Example'
description: 'This is the default meta description of Example website'
robots:
index: true
follow: true
openGraph:
site_name: 'Example'
images:
- url: '~/assets/images/default.png'
width: 1200
height: 628
type: website
twitter:
handle: '@twitter_user'
site: '@twitter_user'
cardType: summary_large_image
i18n:
language: en
textDirection: ltr
apps:
blog:
isEnabled: true # If the blog will be enabled
postsPerPage: 6 # Number of posts per page
post:
isEnabled: true
permalink: '/blog/%slug%' # Variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
robots:
index: true
list:
isEnabled: true
pathname: 'blog' # Blog main path, you can change this to "articles" (/articles)
robots:
index: true
category:
isEnabled: true
pathname: 'category' # Category main path /category/some-category, you can change this to "group" (/group/some-category)
robots:
index: true
tag:
isEnabled: true
pathname: 'tag' # Tag main path /tag/some-tag, you can change this to "topics" (/topics/some-category)
robots:
index: false
isRelatedPostsEnabled: true # If a widget with related posts is to be displayed below each post
relatedPostsCount: 4 # Number of related posts to display
analytics:
vendors:
googleAnalytics:
id: null # or "G-XXXXXXXXXX"
googleTags Manager:
id: null # or "GTM-XXXXXXXX"
ui:
theme: 'system' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"To customize Font families, Colors or more Elements refer to the following files:
src/components/CustomStyles.astrosrc/assets/styles/tailwind.css
Initially created by onWidget and maintained by a community of contributors.
AstroWind is licensed under the MIT license — see the LICENSE file for details.