How to Backup Squarespace Styles Using AWS Cloud: Complete Step by Step Guide
By Braincuber Team
Published on April 4, 2026
What You'll Learn:
- Why Squarespace stylesheets fail and how to diagnose 5xx errors on site.css
- How to build an automated CSS fallback system using AWS Lambda and S3
- Two approaches: CodeCommit-triggered Lambda vs scheduled CloudWatch Events
- How to configure S3 buckets for public access with proper CORS settings
- How to write a client-side fallback script that detects failed stylesheets
- How to scrape and merge external stylesheets into a single fallback CSS file
Squarespace is a popular website builder, but when their servers experience outages, your website's styles can completely break because the main stylesheet (site.css) is hosted on their servers and returns 5xx errors. In this complete tutorial, we will build an automated fallback system using AWS Cloud services that detects when Squarespace styles fail to load and automatically injects a backup stylesheet from your own S3 bucket. This step by step guide covers two approaches: a CodeCommit-triggered Lambda function and an improved scheduled CloudWatch Events solution that automatically scrapes and backs up your styles. Whether you are a beginner or experienced developer, this beginner guide will show you exactly how to protect your Squarespace website from stylesheet outages.
Understanding the Problem: Why Squarespace Styles Break
When you add custom CSS to a Squarespace website, the platform compiles your styles and hosts them on their servers. The main stylesheet, typically called site.css, is linked externally in your site's HTML header. When Squarespace experiences server issues, this stylesheet request can fail with a 5xx error, causing your entire website to appear broken with no styling.
The problem is that these stylesheets are hosted on a server that is not under your control. Even a simple CSS change can coincide with a Squarespace outage, making it appear as though your change broke the site. The key insight is realizing that the styles are not embedded into the HTML but are delivered over the network as external stylesheets.
How to Diagnose the Issue
Open your browser's Developer Tools and check the Network tab for the site.css request. If it returns a 5xx error, the stylesheet is failing to load from Squarespace's servers. You can also inspect the HTML header for externally linked stylesheets to confirm they are not embedded.
Solution Architecture Overview
We will build a serverless fallback system on AWS that automatically backs up your Squarespace stylesheets and serves them when the original fails. There are two approaches we will cover.
Approach 1: CodeCommit-Triggered Lambda
In this approach, you push your SASS code to AWS CodeCommit, which triggers a Lambda function to compile the SASS to CSS and store it in a public S3 bucket. A client-side script on your website checks if the Squarespace stylesheet loaded, and if not, injects the fallback from S3.
CodeCommit
AWS managed Git repository. Push events trigger the Lambda function to compile and deploy your stylesheets automatically.
Lambda Function
Pulls SASS from CodeCommit, compiles it to CSS using node-sass, and uploads the result to a public S3 bucket.
S3 Bucket
Public bucket storing the fallback CSS file. Requires CORS configuration to allow cross-origin requests from your website domain.
Fallback Script
Client-side JavaScript that checks if site.css loaded within 20ms. If not, it injects the fallback stylesheet from S3.
Approach 2: Scheduled CloudWatch Events (Recommended)
The improved approach removes the dependency on the developer to manually update styles. A scheduled CloudWatch Event triggers a Lambda function every 6 hours that scrapes your website for all externally linked stylesheets, merges them into one fallback CSS file, and stores it in S3. This backs up ANY externally linked stylesheet, including Google Fonts or Bootstrap CDN.
Approach 1: CodeCommit-Triggered Lambda
Step 1: Set Up the CodeCommit Repository
First, create an AWS CodeCommit repository to store your SASS files. Push your custom SASS code to the master branch. This repository will serve as the source of truth for your styles.
Step 2: Configure the CodeCommit Trigger
After pushing code to your CodeCommit repository, go to the repository's Settings, then to the Triggers tab, and click the "Create trigger" button. Name the trigger, select "Push to existing branch" as the event type, and master as your branch to listen on. Then select AWS Lambda as the service to use, and point to your Lambda function.
This Lambda now runs right after any code is pushed to the master branch on CodeCommit, automatically compiling and deploying your styles.
Step 3: Create the Lambda Function
The Lambda function pulls the SASS stylesheet from CodeCommit, converts it to CSS using the node-sass package, and then puts the output CSS file into a public S3 bucket.
const { S3, CodeCommit } = require('aws-sdk')
const sass = require('node-sass');
const getFileFromCodeCommit = (filePath) => new Promise((resolve, reject) => {
const ccClient = new CodeCommit({ region: "us-east-1" })
const ccParams = {
filePath,
repositoryName: 'mebbels-assets'
}
ccClient.getFile(ccParams, (err, data) => {
if (err) reject(err)
let stringData = new TextDecoder().decode(data.fileContent);
resolve(stringData)
})
})
const sendStylesheetToS3 = (fileData, fileName) => new Promise((resolve, reject) => {
const s3Client = new S3({ region: "eu-south-1" })
let putObjectBody = {
Bucket: 'mebbels-assets',
Key: fileName,
ACL: 'public-read',
Body: fileData,
ContentType: 'text/css'
}
s3Client.putObject(putObjectBody, (err, data) => {
if (err) reject(err)
resolve(data)
})
})
const processSASS = (fileData) => new Promise((resolve, reject) => {
sass.render({ data: fileData }, (err, data) => {
if (err) reject(err)
resolve(data)
})
})
exports.handler = async (event) => {
const sassFile = await getFileFromCodeCommit('mebbels-sass.scss')
const processedSass = await processSASS(sassFile)
await sendStylesheetToS3(processedSass.css, 'fallbackStyles.css')
return { statusCode: 200, body: JSON.stringify("Done") };
};
Step 4: Configure IAM Role Policy
For this Lambda to run without issues related to accessing our resources on CodeCommit and S3, it needs the right permissions. Attach the following IAM Role policy to the function.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": [
"s3:PutObject",
"codecommit:GitPull",
"s3:PutObjectAcl",
"codecommit:GetFile"
],
"Resource": [
"arn:aws:s3:::*/*",
"arn:aws:s3:::mebbels-assets",
"arn:aws:codecommit:us-east-1:6653912857032:mebbels-assets"
]
}
]
}
Step 5: Configure the S3 Bucket
The target S3 bucket that will store the fallback CSS stylesheets needs to be public. Make sure it is so during bucket creation, and double check in the "Permissions" tab of your S3 bucket in the Block public access section.
The bucket also needs to have CORS enabled and setup, because we are going to request it from a different domain, namely your Squarespace website domain.
[
{
"AllowedHeaders": ["Authorization"],
"AllowedMethods": ["GET"],
"AllowedOrigins": ["https://www.yourdomain.com"],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
The Fallback Script
Here is the inline script to add to your site's header. It checks for the loaded state of the stylesheet requested from Squarespace. If it is not loaded after 20 milliseconds, then the script injects a link into your site's header pointing to the hosted fallback style in your S3 bucket.
var isSiteCssLoaded = false;
var siteCssLink = document.querySelector("link[href*='/site.css']")
siteCssLink.addEventListener('load', () => {
console.log('site.css loaded')
isSiteCssLoaded = true;
})
const fallBackIfNeeded = () => {
if (!isSiteCssLoaded) {
console.log('site.css not loaded')
var headID = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'https://your-bucket.s3.region.amazonaws.com/fallbackStyles.css'
headID.appendChild(link);
console.log('fallback styles loaded')
}
}
setTimeout(fallBackIfNeeded, 20)
How to Test the Solution
You cannot wait for Squarespace's servers to mess up again to test your solution. Here is how to test it manually.
Open Browser Developer Tools
Go to the Network tab in your browser's Developer Tools. Make sure you disable the cache to avoid cached stylesheets interfering with the test.
Block the CSS Request URL
Find the site.css request in the Network tab, right-click it, and select "Block request URL". This simulates a failed request to Squarespace's stylesheet server.
Refresh and Verify
After clicking "Block request URL" and refreshing the page, you should see the script kicking in after 20 milliseconds. It should print "site.css not loaded" and "fallback styles loaded" in the console, then add your fallback stylesheet from S3. The site should work without breaking!
Approach 2: Scheduled CloudWatch Events (Recommended)
The CodeCommit approach has a significant downside: the fallback style is still dependent on the website developer to keep the fallback styles in the CodeCommit repository up to date at all times. If other team members (like designers) edit the site's custom styles, this solution relies on perfect communication between team members.
The improved solution uses CloudWatch Events as a serverless cronjob that triggers a Lambda function on a scheduled basis to scrape your website's stylesheet and store it in the S3 bucket. This removes the dependency on manual updates entirely.
The Improved Architecture
In this modified flow, we removed the dependency on the website developer to manually update the stylesheet and push to CodeCommit. Instead, we have a daily scheduled CloudWatch Event that triggers a Lambda function. Our Lambda function scrapes our website for externally linked stylesheets, merges them into one fallback CSS file, and stores it in the publicly available S3 bucket.
The Improved Lambda Function (Python)
This Lambda uses the BeautifulSoup library to web scrape your website. It downloads every single externally linked stylesheet and writes them to a file in the temporary folder (AWS Lambdas allows you to store files temporarily in a folder called 'tmp' during runtime).
import sys, os
import urllib.request as req
from bs4 import BeautifulSoup
import logging
import boto3
from botocore.exceptions import ClientError
s3_client = boto3.client('s3')
def lambda_handler(event, context):
fallback_css_filename = 'fallbackStyles.css'
fallback_css_path = '/tmp/' + fallback_css_filename
url = 'https://www.yourdomain.com'
html = req.urlopen(url)
soup = BeautifulSoup(html, 'html.parser')
fallback_styles = open(fallback_css_path, 'ab')
for link in soup.find_all('link', type='text/css'):
address = link['href']
if address.startswith('/'):
address = url + address
css_file_name, headers = req.urlretrieve(address)
css = open(css_file_name, 'rb')
fallback_styles.write(css.read())
css.close()
try:
s3_client.upload_file(
fallback_css_path,
'your-bucket-name',
fallback_css_filename,
ExtraArgs={
'ACL': 'public-read',
'ContentType': 'text/css'
}
)
return True
except ClientError as e:
logging.error(e)
return False
Unlike the CodeCommit approach, this Lambda backs up ANY externally linked stylesheet, so you could back up an externally linked Google Fonts stylesheet or Bootstrap CSS CDN, for example. After writing all the styles to a single fallbackStyles.css file, it uploads that to your S3 bucket using the AWS SDK.
How to Configure Scheduled CloudWatch Events
CloudWatch Events is a service that allows you to trigger workflows in your AWS account based on monitored metrics or on a scheduled basis. Setting it up as a serverless cronjob is incredibly simple with only two steps.
Create the Event Rule
In the AWS console, go to CloudWatch > Events > Rules and create a new rule. In the Event Source section, choose the "Schedule" option and set a period (e.g., every 6 hours). You can also use a custom cron expression for a specific interval.
Configure the Target
In the Targets section, pick "Lambda function" from the dropdown and select your scraping Lambda function. CloudWatch automatically handles assigning the required permissions for the event to trigger your Lambda, so you do not need to worry about extra IAM configuration.
Name and Activate
Enter the name and description of the event rule. Click "Configure details" and then create the rule. The event will now trigger automatically on your defined schedule.
Comparing the Two Approaches
| Feature | CodeCommit Trigger | CloudWatch Scheduled (Recommended) |
|---|---|---|
| Trigger Mechanism | Manual push to Git repository | Automatic scheduled cronjob |
| Developer Dependency | High - developer must push updates | None - fully automated scraping |
| Team Collaboration | Requires communication between team members | No coordination needed |
| Stylesheet Coverage | Only SASS files in repository | All external stylesheets (Google Fonts, CDN, etc.) |
| Freshness | Only when developer pushes | Every 6 hours (configurable) |
| Complexity | Medium - requires Git workflow | Low - set and forget |
AWS Services Used
| AWS Service | Role in This Solution |
|---|---|
| AWS Lambda | Serverless compute for compiling SASS or scraping stylesheets |
| Amazon S3 | Public storage for fallback CSS files with CORS configuration |
| CloudWatch Events | Scheduled trigger for automated Lambda execution (cronjob) |
| AWS CodeCommit | Git repository for SASS source files (Approach 1 only) |
| IAM Roles | Permissions for Lambda to access CodeCommit, S3, and CloudWatch |
Frequently Asked Questions
Why do Squarespace stylesheets fail to load?
Squarespace hosts stylesheets on their own servers. When they experience server issues, the site.css request returns a 5xx error. Since the stylesheet is externally linked (not embedded in HTML), the entire site loses styling until Squarespace resolves the issue.
How does the fallback script detect failed stylesheets?
The script uses a 20ms setTimeout to check if the site.css link element has fired its load event. If the stylesheet has not loaded within 20 milliseconds, the script creates a new link element pointing to the S3-hosted fallback CSS and appends it to the document head.
Why does the S3 bucket need CORS configuration?
CORS (Cross-Origin Resource Sharing) must be enabled because the fallback CSS is requested from a different domain (your S3 bucket) than your Squarespace website. Without CORS, the browser will block the cross-origin request.
Which approach is better: CodeCommit or CloudWatch Events?
CloudWatch Events is recommended because it removes the dependency on manual updates. It automatically scrapes all external stylesheets on a schedule, including Google Fonts and CDN resources, without requiring developer intervention or team coordination.
How much does this AWS solution cost?
This is a very cheap serverless solution. Lambda free tier includes 1 million requests per month, S3 storage costs fractions of a cent for small CSS files, and CloudWatch Events scheduling is free. Total monthly cost is typically under $1 for this use case.
Need Help with AWS Cloud Solutions?
Our experts can help you build automated backup systems, serverless architectures, and cloud-native web applications on AWS.