Personal website

0. Index

1. Overview

2. Content delivery

3. Content management

4. Styling

5. Testing

1. Overview

I chose to use Gatsby to build my website with as it is cutting edge and very responsive.

After laying out a basic build in local development, I committed changes to the GitHub repository and set up automatic deployment to Netlify when any updates are pushed to the remote main branch. However, this meant that every time I committed changes, the build would run automatically in Netlify.

You can see the original version of my website here.

To have more control over this, rather than committing changes directly to main I implemented focused features through the system of raising issues, working on them as branches, submitting a pull request and then merging them in a proper pipeline.

I automated the GitHub projects Kanban board to track these changes and integrated it with my personal Slack channel so I could add and track issues dynamically.

The project board please do raise an issue to make any suggestions or improvements for my site!

Slack integration

I then added in a GitHub Actions workflow to automatically build and test any changes pushed to the dev branch or when a pull request was submitted to main branch before they are deployed.

GitHub Actions workflow file

Workflow

• issue raised through slack / GitHub / git

• issue assigned in projects kanban

• issues grouped into milestone sprint with due date

• branch off develop created to work on issue

• local development pushed to remote develop branch

• GitHub Actions CI/CD script runs

• pull request submitted to merge with main

• pull request reviewed

• pull request accepted or rejected

• GitHub Actions CI/CD script runs

• if passed: branch is merged with main (production)

• any successful changes are automatically deployed to Netlify

2. Content delivery

I integrated Contentful CMS for easy managing of content and content models, so that I can update the articles on the page easily. I also created a separate environments in Contentful to test content changes in staging environment first before they are committed to master branch used for production build in deployment:

• master - production environment

• develop - staging environment

The staging environment API Keys were placed in an '.env.development' file and configured to run with gatsby develop. The master environment Keys were placed in an '.env.production' file for use during gatsby build / deployment.

These keys also had to be referenced as environment variables in GitHub in order to pull through into the build process in the GitHub actions workflow.

3. Content management

Using the contentful-cli content management api to push updates from staging environment to master environment in Contentful.

Documentation

Exporting

First we export the changes we want to update from the staging environment into a json file:

contentful space export --space-id {space-id} --environment-id develop --query-entries 'content_type={content-model}'

If both environments have the same Content-Type we can use --content-only.

Importing

Then we import the changes from that file to the master environment:

contentful space import --space-id {space-id} --environment-id master --content-file {file}

Alternatively, we can write a json config file to select the settings we want rather than using --flags in the command line:

contentful space export --config config-export.json contentful space import --config config-import.json

4. Styling

For basic layout of pages and global styles I chose css modules.

For components I chose the styled-components module for better functionality.

For anything colour related I provided a theme through theme-ui to create a theme switching button and consistent colour and formatting across the site.

5. Testing

I plan to integrate automated testing with Cypress in future and incorporate this as a job in the GitHub actions workflow.