Shatstack screenshot

Shatstack

Author Avatar Theme by Hugodf
Updated: 5 Jan 2023
6 Stars

Back to basics with the HTML-driven SHATstack: Serverless, HTML, Alpine.js, TailwindCSS

Categories

Overview

The SHATstack is an HTML-driven subset of the JAMstack, which consists of the following components: Serverless, HTML, Alpine.js, and TailwindCSS. This stack aims to simplify the development process by getting back to the basics and eliminating unnecessary acronyms.

Features

  • Serverless: The SHATstack utilizes a serverless architecture, allowing for easy scalability and cost savings.
  • HTML: With the SHATstack, HTML is at the core of the development process, providing a simple and intuitive markup language.
  • Alpine.js: Alpine.js is included in the SHATstack, providing a lightweight JavaScript framework for adding interactivity to HTML elements.
  • TailwindCSS: The SHATstack utilizes TailwindCSS, a utility-first CSS framework, to streamline the styling process and create consistent designs.

Installation

To get started with the SHATstack, follow these steps:

  1. Clone the repository to your local machine.
  2. Run yarn install or npm install to install all required dependencies.
  3. Use the command yarn start or npm run start to start a local development server using Servey.
  4. Use the command yarn format to run Prettier on the HTML pages to ensure consistent formatting.
  5. Use the command yarn build to clean the dist directory and create a dist/index.html file from the files in the pages directory. This command will also inline the styles that are used in each HTML page.

Summary

The SHATstack is a simplified and acronym-free stack that focuses on the core components of web development - HTML, Alpine.js, and TailwindCSS. By eliminating unnecessary complexities, the SHATstack offers an intuitive and streamlined development experience.