ScaleForce.agency Landing and Lead Generation Site

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

• Customizations, Packages, Integrations and Extensions
• DevOps
• AstroWind Template Docs
  • Getting started
    • Project structure
    • Commands
    • Configuration
    • Customize Design
  • Acknowledgements
  • License

Customizations, Packages, Integrations and Extensions

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.

DevOps

Netlify

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.

GitHub

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.

AstroWind Template Docs

The rest of this document contains the original AstroWind template README, credit to the original template developer onWidget, and the original template LICENSE.

Getting started

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.

Project structure

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. Update src/config.yaml and contents. Have fun!

Commands

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

Configuration

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"

Customize Design

To customize Font families, Colors or more Elements refer to the following files:

• src/components/CustomStyles.astro
• src/assets/styles/tailwind.css

Acknowledgements

Initially created by onWidget and maintained by a community of contributors.

License

AstroWind is licensed under the MIT license — see the LICENSE file for details.