How to setup AWS S3 as storage in Ghost Website

Recently I had a requirement to create a blog and I was looking for different options. WordPress was the main one that I was looking for due to the flexibility and the configurability to meet user requirements.

I am not familiar with WordPress development and I’m new to it. When exploring the options I felt that I have to do so much to get a nice little website with a good look and feel up and running. I hate it. But luckily Shalitha Vikum mentioned to me about Ghost and how easy it is to handle.

Then I had a quick search about Ghost. Their website was really eye-catching and it looked really nice with all the UI/UX matters. Then I tried downloading the docker image of Ghost and tried setting up a sample web app. Wow, it was really nice. Maybe using WordPress we can do much more beautiful themes than Ghost. But I think we have to do more to get there in my opinion. Correct me if I’m wrong.

Then I thought to set up the thing in the cloud. I used AWS Lightsail to set up a Ghost instance. The latest available Ghost version at the time was 5. x and the version available in Lightsail was 4. x. So after creating the instance I had to upgrade the Ghost version as well.

Then after setting the thing up I created a sample post and published it to see how it appears. But I had a bad experience with that. The images that I had added to the post were not appearing once the page is loaded and it took so much time for the images to load. Then I went again to edit mode to see whether images have been uploaded correctly or not. But in edit mode, I could see all the images without any issue. The issue was with the published mode.

Then I did some research and found that the images are stored in file storage inside the server. Loading the images from there was the problem. For this, there were different alternatives that developers could use.

We can use a different storage adapter to cater to our requirements. You can follow this guide to get information on what a storage adapter is.

Out of the different storage adapter options I choose S3. For S3 there are two different adapters specified and both are available on Github.

• ghost-s3-compat
• ghost-storage-adapter-s3

Both of the above are quite old projects. I choose the ghost-storage-adapter-s3 package since it had some recent modifications compared to the other package. The Readme file in the GitHub repo is self-explanatory and I followed the same steps.

First, you need to install the ghost-storage-adapter-s3 npm package

npm install ghost-storage-adapter-s3

Then Create a new folder named storage inside content/adapters

mkdir -p ./content/adapters/storage

Copy package files to this folder

cp -r ./node_modules/ghost-storage-adapter-s3 ./content/adapters/storage/s3

Next, create an S3 bucket with default configurations. Make sure to disable static site hosting.

Then create a CloudFront distribution with your bucket as the origin.

The important step for the Cloudfront configuration is to ensure that you use OAI identity, create a new OAI identity, and select “Yes, update the bucket policy”

Then create an IAM role with programmatic access and attach the following policy.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::<your-bucket-name>"
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:PutObjectVersionAcl",
                "s3:DeleteObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::<your-bucket-name>/*"
        }
    ]
}

Finally, you need to edit your Ghost configuration file.

...
"storage": {
    "active": "s3",
    "s3": {
      "accessKeyId": "[AccessKey]",
      "secretAccessKey": "[secret]",
      "region": "[region]",
      "bucket": "[bucket]",
      "assetHost": "https://subdomain.example.com",// cloudfront url
      "forcePathStyle": true,
      "acl": "private"
    }
  }
...

By completing the given steps I was able to successfully connect S3 to my Ghost instance. Then I verified by creating a post and uploading the photos. They got successfully uploaded to the S3 bucket that I created. Also after publishing the post the images were showing in the blog post without any issues.

Hope this guide will be useful if you want to connect your ghost website to S3.

Thanks for reading ❤