Codebeats

Codebeats is a React-based content management system (CMS) which leverages AWS for hosting (Amazon S3) and database purposes (Dynamo DB). Codebeats was created and maintained by Tomás Jaramillo Quintero.

Live Demo

Check out my blog, which runs on this CMS.

Features

• Great for running lightweight personal blogs.

• Designed to run on AWS infrastructure, which makes it cheap to host (i.e. from USD 0.5/month):

  • Amazon S3 is used for website and image hosting.
  • Amazon DynamoDB is used as the main CMS database.

• Includes a CMS, which is a standalone javascript solution and it's located in the admin folder. The CMS allows you to create and edit blog posts, as well as uploading and managing images stored in S3.

• I highly recommend you NOT TO upload the admin module to your hosting or S3. You'll be able to locally use it by setting up its config file (as explained below) and opening the index.html file in your browser.

Guide

If you want to set up Codebeats and host it on AWS, you may follow these steps.

1. Register on AWS. If this is the first time you register, you'll get free access to several AWS services for 1 year (read more).

2. Once you're registered you'll need to create and set up an S3 bucket as a website.

   IMPORTANT: Since this CMS leverages React Router, you'll need to define the bucket's index and error documents as index.html, however, this is a workaround that has some flaws. A much better solution is integrating your bucket with AWS Cloudfront by following this guide and then this one, which would also allow you to set up your website as an HTTPS site.

3. From the AWS console, access DynamoDB service and create a new table, give it whichever name you want, but make sure to name the partition key as post_folder and do not set any sort key (this YouTube video shows you how - Just watch the segment from 14:40 until 16:36).

4. Take note of the ARN of your newly created table, you'll need it for later (to get the ARN, open the table from the AWS Console and you'll find it under the Additional information section.).

5. Go to AWS IAM and create two new programmatic access users. Take note of their access and secrets keys:

   5.1 First user: One of these users will be used by the frontend application (the website) to authenticate and connect to DynamoDB and fetch all the blog posts and show them to your blog's visitors. We'll need to attach a highly restrictive policy to this user, so it's only allowed to read content from that table. There are several ways to do so, but the quickest way to do so is by defining an inline-policy, like the one below, to that user.

   {
   	"Version": "2012-10-17",
   	"Statement": [
   		{
   			"Sid": "VisualEditor0",
   			"Effect": "Allow",
   			"Action": [
   				"dynamodb:GetItem",
   				"dynamodb:Scan"
   			],
   			"Resource": "[ARN_OF_YOUR_DYNAMODB_TABLE_GOES_HERE]"
   		}
   	]
   }

   5.2 Second user: will be used by the CMS (admin module) to authenticate against S3 and DynamoDB to get permission to create/update blog post entries and upload images to S3. The quickest way to achieve this (not necessarily the most secure) is by linking AmazonS3FullAccess and AmazonDynamoDBFullAccess policies to this user.

   This is rather fine if you'll store the CMS and access keys in your local machine and local network. If you are considering to upload this admin module to your server, you'll need to configure a much stricter policy for this user.

6. Clone this repo.

7. Update and rename files src/config.rename.js and admin/js/config.rename.js. Make sure to place the credentials of your admin user in admin/js/config.rename.js and not in src/config.rename.js. In these config files, you'll also be able to set up the name of your website, meta description, etc.

8. Build the solution by running npm run build and upload your built solution to your AWS S3 bucket.

9. Access the CMS module and create your first blog post!

Screenshots

Home page

Blog post

Mobile version

Admin module