This repository consists of two parts:
- a Next.js app styled with TailwindCSS
- infrastructure defined in Terraform in
infrastructure/
The goal of this repository is to
- Explore different technologies such as
- NextJS,
- Terraform / Infrastructure,
- Github actions CI/CD
- and more..
- Build a simple personal blog.
npm i
npm run devnpm run build-open
The project is set up with a few pre-commit hooks that are installed when npm i is ran. Specifically:
- linting: eslint
- formatting: prettier
- typescript
- terraform validation
- terraform formatting
When terraform is not set up correctly, for example the AWS S3 where terraform state is stored, the terraform hooks will fail.
To run the pre-commit hooks, from root: ./.husky/pre-commit
This project mostly follows the "conventional commit" message standard, for an easily scannable commit history. See the angular commit guidelines for more details (docs: feat/fix/..).
To adhere to this format, some tooling is installed that can also be used to automatically generate a changelog based on commits: commitizen (cz). To commit following these guidelines:
npm run commit
# for a fast commit, just use `git commit`Note: a commit will fail when the pre-commit hooks fail, so generally it makes sense to:
- Add a change (
git add my-file) - Run the pre-commit hooks
./.husky/pre-commit - Commit:
npm run commit
Given there is no CI set up in github (yet), this has been a straightforward and fast way to enforce some level of commit quality locally.
# cd into terraform
$ pwd
/m-rc/infrastructure/terraform
# init terraform - requires setting up AWS profile
../scripts/terraform-plan.sh
- Set up and configure the
aws cli- AWS CLI docs.
Scope permissions to:
- just the required S3 bucket for the website and
- invalidation of the cloudfront distribution relevant for m-rc.nl
To deploy directly to S3, run from the project root folder:
$ ./infrastructure/scripts/sync-s3-bucket.shThe script makes a couple assumptions, such as a pre-configured AWS account and an S3 bucket name. It's a bit crude in the sense that it simply deletes the contents of the S3 bucket and pushes the build, but it's fast and functional. (it would be more elegant to only upload what's changed)
To improve website loading times, see Optimizing image dimensions and file size