What if I told you that you could build a Static Site Generator with your own custom CMS without the need for a database? Not just that, but we can get to Hello World! in under 100 lines of JavaScript.

Article Series:

Build a Custom CMS for a Serverless Static Site Generator (You are here!) + Repo

The historic problem with static site generators is that they typically require content to be authored in markdown. This works great for developers but not as well for clients who are used to working in a CMS authoring environment. Creating such an environment has traditionally meant the need to create a database to manage authentication, save content and upload media.

Thanks to the rise of so-called serverless architectures (aka Backend as a Service), this is no longer the case.

In this demo, we will create the bare bones of a static site generator with content authored by an admin user via a standard web form (no database necessary).

Set Up a Static Website on Amazon S3

First, create a bucket and then under Static Website Hosting in Properties, select Enable website hosting and set the Index Document to point to the homepage of the site (`index.html`).

Next, create a bucket policy to make your site publicly readable. For information on setting up bucket permissions, refer to the AWS S3 documentation. Additionally, we need a policy that will allow an admin to save content edits.

Create Static Site Files

Create a new directory for your project. Construct a simple project page or pick a simple example from your front end framework of choice. In our demo, we use the Jumbotron example from Bootstrap.

Upload the files to the S3 bucket you created. Once the upload is complete, select the S3 bucket and view Properties. Click on the endpoint link and you will be able to view your site.

Create Admin Login

Amazon Cognito provides a simple way to add an authentication flow to a website.

The first step in this process is to create a UserPool. In the AWS Console, navigate to Amazon Cognito and create a user pool with the default settings. Read more about User Pools in the AWS Documentation.

Once your User Pool is created, you need to add an app with access to the pool. Select your User Pool to edit it, then select the Apps tab. Click the Add an app button and give your app a name. When adding an app, it is very important to uncheck the Generate client secret checkbox because the JavaScript in the Browser SDK does not support apps with a client secret.

We will directly create our admin users in the AWS Console, then provide them with credentials they can use to log in. Only these users will be able to get authenticated to have access to generate the static content for our site.

Go into the User Pool and select Users and Groups. Fill in your own information so you can be the first admin user. Select the option to send an invitation to the user via email.

Now we need to create a login page for our admins. Make a new admin directory in the project with an index.html with a login form inside it. In our demo, we use the Bootstrap Sign In Page.

To connect our form with Cognito, we will need to use the Amazon Cognito Identity SDK for JavaScript. Follow the installation instructions on the project page to add the scripts to our login page.

Next, use the Amazon Cognito Identity service to authenticate and establish a session for our admin user with the temporary password received via email.

Create CMS Admin

With login complete, we want to allow our admin to edit content on the site. In this demo, we will edit the top jumbotron callout. After admin is authenticated, we display a form with inputs for site info, the callout headline, and text content.

When the form is submitted, we combine the data from the form with a template to generate static HTML. In this demo, we JSRender as our templating engine.

Create the template for our Jumbotron page by copying the HTML and embed it on our admin page as a JSX template. Replace the content with template tags mapped to the names of the admin edit form fields.

Next select Roles, then create a new role and give it a name. Select Role for Identity Provider access then select Grant access to web identity providers. Use the default Policy Document for Verify Role Trust.

On the next step, attach the policy you just created for accessing the S3 bucket.

Once again select the Roles tab within the IAM section of the AWS Console. Select the role you just created. In Permissions, under Managed Policies you should see your policy for S3. If you do not, attach it now.

Update the AWS config settings on the admin page to include our S3 service.

The last step for connecting our admin user to S3 is to create an Identity Pool. Return to Amazon Cognito in the AWS Console and click the Manage Federated Identitites button, then the Create new identity pool button.

Share this:

Comments

This is really, really cool! Never thought of using AWS authentication to save directly to S3 (and other stuff, like DynamoDB) from a statically-hosted admin interface. Just beautiful. You can even create a separate S3 bucket to store your HTML templates for the statically-hosted admin interface to use in building the pages.

How long until some of us come together and write NoServerPress, a content platform where both the admin and the resulting pages are completely statically hosted, and there are no servers to manage, no command line tools to run (*), just beautiful WYSIWYG website editing?

(* command line tools will probably still be the easiest way to build and deploy the HTML templates that the interface uses)

Unless you host it live it doesn’t give the full abilities as the AWS service. With AWS you can do the same thing but live. So the same thing you write locally is the same thing that is in production for user interfaces and authentication.

This comment thread is closed. If you have important information to share, please contact us.

Related

How do you stay up to date in this fast⁠-⁠moving industry?

A good start is to sign up for our weekly hand-written newsletter. We bring you the best articles and ideas from around the web, and what we think about them.

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.