Skip to content
Modern full stack CMS. Built with Gatsby, GraphQL, AWS Amplify, and Serverless technologies.
JavaScript CSS
Branch: master
Clone or download
dabit3 Merge pull request #17 from jamstack-cms/schema-update
Added query that is ordered by date
Latest commit d968614 Nov 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
amplify added query that is ordered by date Nov 14, 2019
content
src added query that is ordered by date Nov 14, 2019
static theme updates, minor updates Oct 30, 2019
.gitignore Remove -vscode Folder Oct 31, 2019
.graphqlconfig.yml
.prettierignore initial commit Sep 22, 2019
.prettierrc initial commit Sep 22, 2019
LICENSE
README.md updated readme Nov 12, 2019
configureWebhook.js updated to add profile image Oct 9, 2019
createBaseConfig.js
createConfig.js
createLocalConfig.js updated build to use requirejs Oct 1, 2019
gatsby-browser.js
gatsby-config.js fix: update gatsby manifest for "Add to Homescreen" Oct 30, 2019
gatsby-node.esm.js
gatsby-node.js
gatsby-ssr.js initial commit Sep 22, 2019
jamstack-config.js updated to new backend Nov 14, 2019
jamstackcms.jpg
package.json updates to rich text editor Nov 11, 2019
screens.jpg
updateS3config.js fixes #12, update s3 config step Nov 11, 2019
webhook-config.js updated base webhook url Nov 10, 2019
yarn.lock

README.md

JAMstack CMS (beta)

End to end serverless blogging & CMS system. Built with GraphQL, Gatsby & AWS Amplify. Theming based on the Novela theme by Narative.

Philosophy

JAMstack CMS is built to give you the ability to deploy a full stack serverless website in just a few minutes. JAMstack CMS includes the following features built in:

  • Authentication & authorization for admin users
  • Database with secure API access
  • Server-rendered front end for builds
  • Dynamic front-end for admins (enables admins to create, update, and delete content)
  • Configurable settings

Build time vs run time

With server rendered applications there are typically two types of execution environments, one at build time and one at run time.

The issue with dealing with server rendered applications in the traditional way was that it was not possible to make edits directly in the UI because the build would not accurately represent the current version of the application served at the last build time.

JAMstack CMS solves this issue by giving you two views at run time, including both the static build as well as a dynamic Admin view that allows you to manipulate content and preview pages before building.

This way you have the opportunity to test out new posts and web pages before deploying them to your live environment.

3 Ways to build a page

  1. Static page - As with any Gatsby site, can still create a custom static page and route by just creating a new file in the src/pages directory. These pages will all be created at build time.

  2. Blog post - In the Admin panel you can create Blog posts that will be dynamically generated at build time. These posts will be queried at build time from the server and used to build the pages. Any images referenced from your image gallery will be downloaded and served locally from the public/downloads folder.

  3. Dynamic page - Similarly to creating a post, you can use the WYSYWIG editor and drag and dop interface to create web pages complete with rich text editing.

This is a beta version!

While the CMS is ready to deploy today as it is, this project is still in beta. There is quite a bit of work to do before I am ready to ship version 1. Here are some of the things I will be focusing on:

  1. Improved accessibility
  2. Performance
  3. Comment feature
  4. Native Gatsby theming
  5. Enabling other cloud providers
  6. More page boilerplates
  7. Tests
  8. TypeScript
  9. Massive code cleanup 😅

If you are interested in contributing to this project, please let me know!

Deploying the CMS

  1. Update the Amplify CLI to the latest version
$ yarn global add @aws-amplify/cli
  1. Clone the repository
$ git clone https://github.com/jamstack-cms/jamstack-cms.git

$ cd jamstack-cms

$ yarn
  1. Configure admin emails

Open amplify/backend/function/jamstackcmsc9ee2ce6PostConfirmation/src/add-to-group.js and update the admin emails for the users you'd like to add by adding them to the array of emails on line 7.

const adminEmails = ["youremail1@domain.com", /* ... other email addresses */]
  1. Initialize the Amplify project
$ yarn run jamstack-init

During the initialization, you'll be prompted for the following

? Do you want to configure Lambda Triggers for Cognito? Y
? Which triggers do you want to enable for Cognito
❯◉ Post Confirmation
? What functionality do you want to use for Post Confirmation
❯◉ Create your own module
? Enter the name of the group to which users will be added. Admin
  1. Deploy the back end
$ yarn run jamstack-push
  1. Run the project
$ yarn run jamstack-develop
  1. Sign up and then sign in with an Admin email address by clicking on the Profile link in the footer.

  2. Once signed in as an Admin, you will see the Admin link in the navigation. Click on the Admin link to begin creating posts and pages.

  3. Once you've created a post, run npm run jamstack-develop to create a new build and see the new live post.

Deploying to Amplify Console or Netlify

To deploy to Amplify Console or Netlify, you'll need to set the environment variable for APPSYNC_KEY. This value can be found in jamstack-api-key.js.

Webhook

Once deployed, you can configure the webhook url by running the following command:

$ node configureWebhook

Context

WordPress has dominated for quite some time with estimates that it powers around 30% of all websites today. One of the reasons for the popularity of WordPress is that it is composed of all of the elements needed for such a platform, including these necessary elements:

  • Authentication & authorization
  • Database
  • API
  • Front end

While WordPress started as a blogging tool, it has evolved over the years into a powerful website builder and a robust content management system.

With updated tooling on both the front end and the back end we are starting to see the need for similar tooling in our modern stack.

JAMstack CMS fills in this gap by giving you a customizable end to end solution allowing you to get up and running with a full stack serverless website & blog with just a few commands on your command line.

Features

  • Authentication
  • Sharable preview links
  • Secure, signed images
  • Admin panel
  • Comments
  • Server-side rendering

TODOs / Roadmap

  • Comments
  • Video support
  • Dynamic logo from Admin
  • Analytics dashboard
  • Post categories
  • WYSWYG option for blog posts
  • Providers for non AWS specific services
  • Custom authentication flow
  • Offline / caching of posts
  • Pagination of posts
  • Dynamic dropdown menu of pages
  • More articles from

Tools

Here are some of the tools used to build JAMstack CMS:

  • Gatsby
  • Emotion
  • Date FNS
  • Marked
  • AWS Amplify
  • Slate
You can’t perform that action at this time.