conradfuhrman

WIP, 10/28/2024

AWS Setup for Statamic with SSG

This is a setup guide for how I've managed SSG with Statamic. First and foremost, this guide assumes that you have existing knowedlge of Statamic and some general AWS expereince as well. Secondly, this is purely a setup guide on what we have found to be what we prefer. There are plenty of other setups/configurations that others in the community use and the Statamic Discord is where that discussion should be had.

Overview

For this setup we are going to focus on a staging environment. This is identical to what we do with production, just with altered variables and secrets, along with different buckets. For dev, we only use two of the three buckets shown since we test locally for the compile. We'll also be tying this into GitHub actions for deployment.

Initial Setup

Currently validated through Herd 1.9.1. Last Updated August 7th, 2024

There are a few options to get Herd/Reverb working with SSL & across your local network among other devices:

Use a dedicated reverb domain (reverb.test)
Integrate it into your existing domain (mynewcoolsite.test)
Open it up to your local Network.

Use a Dedicated Reverb Domain

The biggest issue with Herd Pro is that you cannot use Reverb out of the box with a site that has SSL enabled. Here is the workaround for it all to play nicely together.

Keybase proof

I hereby claim:

I am ConradFuhrman on github.
I am conradfuhrman (https://keybase.io/conradfuhrman) on keybase.
I have a public key whose fingerprint is CC05 31AC 4F7A 3A9F 4317 6C1A A393 2585 E13E 5E8F

To claim this, I am signing this object:

Keybase proof

I hereby claim:

I am Infinitation on github.
I am conradfuhrman (https://keybase.io/conradfuhrman) on keybase.
I have a public key whose fingerprint is CC05 31AC 4F7A 3A9F 4317 6C1A A393 2585 E13E 5E8F

To claim this, I am signing this object:

	const plugin = require('tailwindcss/plugin')

	// Usage For padding - default in px
	// p-c-[20,40]
	// p-c-[20px,40px]
	// p-c-[20rem,40rem]
	// p-c-[40px,200]

	// Usage For Text
	// text-c-[24px,96px]

	<template>
	<h1>About Us Component</h1>
	<h3>{{ url }}</h3>

	<p>Test fade/in out on page transition</p>

	</template>

	<script>