Using Circle CI and AWS S3 to Store Images in Hugo

fuzzy_windfall

fuzzy_windfall

Posted on November 16, 2020

Using Circle CI and AWS S3 to Store Images in Hugo

Considering now that the blog has cover images to adhere with the design of the theme (also with the old theme), the number of images are getting larger including the repository itself. I've since removed the images from the repository and stored them on AWS S3.

The idea behind is to sync the images from the local filesystem to a bucket in S3, copy the files from the bucket over to a Circle CI workspace which contains the build files of Hugo, and finally deploy the build files to Netlify.

Sync'ing the Images

I've created first a bucket on S3 to store the images for the blog. In order to sync the images from the local filesystem, I have installed and configured AWS CLI:

$ brew install awscli
$ aws configure
Enter fullscreen mode Exit fullscreen mode

Configuration is pretty much straightforward. I think all I needed to do was set the API keys and the region to where to store the images from. Permission was a bit confusing as I haven't used AWS much although I've set it to private since its purpose is only to store the images — Netlify will be the one actually hosting the images.

After configuring, I've used aws sync to sync the files from local filesystem to the bucket:

$ aws s3 sync . s3://path-to-bucket/
Enter fullscreen mode Exit fullscreen mode

Copy Files Using Circle CI on Deployment

I've used the orb aws-s3 for Circle CI and added a job images to do the execution. The files are then persisted to a workspace. The build job is the one responsible for building Hugo and so I've attached the workspace over to this job and finally copied the files over to “content/images”. The images job is also a dependency for the build job.

orbs:
# The rest of the orbs.
hugo: circleci/hugo@0
aws-s3: circleci/aws-s3@1
version: 2.1
jobs:
images:
docker:
- image: circleci/python:2.7
steps:
- aws-s3/copy:
from: 's3://path-to-bucket'
to: images
arguments: --recursive
- persist_to_workspace:
root: .
paths:
- images
build:
docker:
- image: cibuilds/hugo:latest
steps:
- attach_workspace:
at: ~/images
- checkout
- run: cp -r ~/images/images/* content/images
# The rest of the steps.
workflows:
main:
jobs:
- images
- build:
requires:
- images
# The rest of the jobs.

Enter fullscreen mode Exit fullscreen mode

The required environment variables to configure the aws-s3 orb are the following:

  • AWS_ACCESS_KEY_ID
  • AWS_SECRET_ACCESS_KEY
  • AWS_REGION

These can be configured through Circle CI under Project Settings » Build Settings » Environment Variables.


Project Settings

So far, that is it. I just removed the images from the repository and added a .gitignore file to ignore the images under “content/images”.

I still need to include the static images though but will probably do it sometime in the future.

💖 💪 🙅 🚩
fuzzy_windfall
fuzzy_windfall

Posted on November 16, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related