With the free [contingent for AWS](https://aws.amazon.com/en/free/free-tier/ "contingent for AWS") you always get an active [AWS code pipeline](https://aws.amazon.com/codepipeline/?did=ft_card&trk=ft_card "AWS Codepipeline") per month and [100 minutes AWS codebuild](https://aws.amazon.com/codebuild/?did=ft_card&trk=ft_card "100 minutes AWS codebuild" ) per month.

So you can set up a continuous integration and continuous delivery pipeline for free or with more than 100 build minutes a month for relatively little money, which triggers a build with every push to a GitHub repository whoch will be automatically deployed to S3 and optionally also invalidate CloudFront Cache.

## CodeBuild

First of all you need a new build project in CodeBuild.
In the project configuration you can assign a name for it and select GitHub as the source provider under **Source**.

Depending on whether the repository is public or not, you then select "Public Repository" and enter the repository URL or you link your GitHub account and give CodeBuild the necessary rights to access the repository.

An environment image must now be selected under **Environment**. For GatsbyJS this would be a "managed image" and the operating system "Amazon Linux 2". "Standard" is selected as the runtime (s) and "aws / codebuild / amazonlinux2-x86_64-standard: 2.0" as the image.

![codebuild_umgebung.png](/uploads/codebuild_umgebung_e32ebcd3d2.png)

Now a new service role can be created automatically (which is required) so that CodeBuild has the necessary rights for the AWS account.

> This service role can also be assigned rights for CodePipeline, so that this service role can be used for CodeBuild and CodePipeline.
If environment variables are used, these can be specified under "Additional configuration" in the environment. You can also make sure that "3GB RAM, 2vCPUs" is really selected, since only this option is included in the free contingent.

**Buildspec** now uses a buildspec file in YAML format. For a Gatsby site this should somehow look like the following:
```sh
version: 0.2
phases:
    install:
        runtime-versions:
            nodejs: 12
        commands:
            - 'touch .npmignore'
            - 'npm install -g gatsby'
    pre_build:
        commands:
            - 'npm install'
    build:
        commands:
            - 'npm run build'
    post_build:
        commands:       
            - 'find public -type f -regex ".*\.$htm\|html\|txt\|text\|js\|css\|json$$" -exec gzip -f -k {} \' ## sofern cloudfront nicht automatisch die dateien komprimiert
artifacts:
    base-directory: public
    files:
        - '**/*'
    discard-paths: no
cache:
    paths:
        - '.cache/*'
        - 'public/*'
```

The buildspec.yml file only needs to be placed in the root directory so that CodeBuild can find it.
In addition, the build script must of course still be available in "package.json".

```js
"build": "gatsby build",
```

The default settings can be retained under **Artifacts**.
With CloudWatch you have the possibility to save logs for CodeBuild in an S3 bucket.

> There may be additional costs!

If all settings have now been entered correctly, the build project can be created.
The only thing missing now is the code pipeline that triggers a build and deployed it in the S3 bucket.

## CodePipeline

For this you switch to CodePipeline and create a new pipeline in which a name and a service role are selected first.

At Source you can now log in with a GitHub account and link the respective repository with a branch.
You now have two options to trigger a build.

+ GitHub-Webhooks and
+ AWS CodePipeline

Then you choose the build provider "AWS CodeBuild" and the previously created project or (if you have not already done this) create a new project.

After a build, the public/ folder can also be automatically deployed to an S3 bucket with AWS CodeDeploy.
_Alternatively_ you can also skip this step and [gatsby-plugin-s3](https://github.com/jarizhttps://www.gatsbyjs.com-plugin-s3 "gatsby-plugin-s3"), which also optimizes caching.

```ssh
npm i gatsby-plugin-s3
```
bzw.
```bash
yarn add gatsby-plugin-s3
```

Now the configuration in gatsby-config.js and the deployment script are missing

```js
plugins: [
  {
      resolve: `gatsby-plugin-s3`,
      options: {
          bucketName: 'my-website-bucket'
      },
  },
]
```
```js
"scripts": {
    ...
    "deploy": "gatsby-plugin-s3 deploy --yes"
}
```
The deployment script "npm run deploy" must then of course be added to the buildspec file under post-build commands.
The CodePipeline should now look something like this:

![CodePipeline.png](/uploads/Code_Pipeline_b8acf52436.png)

Experience shows that a build for around 100 pages takes around 10 minutes if you have some pictures per page.

Every time CodePipeline detects a push to the GitHub repository, a build is automatically triggered and made available on an S3 bucket.

With ```aws cloudfront create-invalidation --distribution-id DISTRIBUTION_ID --paths / * ``` the CloudFront cache can also be invalidated.

GatsbyJS with CI/CD Pipeline via Codebuild 

With [AWS](https://aws.amazon.com/ "AWS") (and in particular the [free AWS contingent](https://aws.amazon.com/en/free/ "free AWS account")) you have the option of a static website with a custom domain for a few Hosting cents a month including CDN via CloudFront and CI / CD integration.

Before I switched completely to AWS, I had a common shared hosting option that cost me around € 72 a year. With this option I had
+ 250 GB SSD storage space,
+ free unlimited traffic,
+ 6 domains included,
+ 250 GB SSD mail storage space,
+ 25 MySQL databases,
+ and, and, and.

On the whole, much more than I need to run my static [GatsbyJS](https://www.gatsbyjs.com/) website.

So why shouldn't I only use and pay for resources that I ultimately need and also get some cloud computing experience?

## Creating S3-Buckets 

The basis for hosting on AWS is formed by [S3 Buckets](https://s3.console.aws.amazon.com/s3/home "S3 Buckets"). 
Buckets are "containers" on the web where you can save files.
In order for redirects from subdomains such as **www.mxd.codes** to **mxd.codes** to work, you need a bucket for each domain.

First of all, you create an S3 bucket for the root domain. In my case, the bucket name is the domain name mxd.codes and you select a region (for example EU (Frankfurt)).
The default settings can be kept under Options, unless you want to save different versions or access protocols.
So that everyone can access the website content later, remove the tick that is present by default at "Block *any* public access", check the bucket settings again and finally create it.

In each bucket you can or should enter a bucket policy that further defines access.
To do this, click on the name of the bucket and go to "Permissions" -> "Bucket Policy".

The following guideline must then be saved for public access.
```json
{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mxd.codes/*"
        }
    ]
}
```
**"mxd.codes" has to be replace with your bucket name!**

If everything was done correctly, the permissions should now look something like this:

![S3 Bucket Richtlinie](/uploads/bucket_richtline_d32ff17da6.png)

In the bucket settings you have to activate the "hosting a static website" and specify an index document and an error document.
For GatsbyJS that would be **index.html** and **404.html**.

![S3 Bucket Hosting](/uploads/bucket_hosting_6f40697460.png)

Now the S3 bucket for the subdomain **www.mxd.codes** is still missing.
So create a new bucket with the name of the subdomain **www.mxd.codes** with public access and add the bucket policy.

In the settings for "hosting a static website" you use "redirect requests" and enter the target bucket **mxd.codes** and you can enter **https** as a protocol, because later on the content of the static website is delivered via CloudFront, which can be encrypted with SSL certificates.

![S3 Bucket Redirect](/uploads/bucket_redirect_740544f6d5.png)

The buckets are now created and correctly configured for the operation of a static website including redirect.


## CloudFront Distributions

With the free AWS contingent, 50 GB of data transfer can be burned per month in Cloudflare.

With a page size of generous 4 MB, this is enough for 12,500 page views per month and should therefore be more than sufficient for a website with average traffic. So why not take a free CDN with you?

If the costs incurred after the free year should deter someone, you still have the option to switch to another CDN provider such as [CloudFlare](https://www.cloudflare.com "CloudFlare").

At [CloudFront](https://console.aws.amazon.com/cloudfront/ "CloudFront") you have to create a web distribution for **each** bucket.
As the origin domain name, a bucket can **not** be selected from the dropdown list, but the end point of the bucket from S3 must be copied.

![Cloudfront Origin](/uploads/cloudfront_origin_f1e2731789.png)

In the distribution for the bucket **mxd.codes**, for example "mxd.codes.s3-website.eu-central-1.amazonaws.com" is specified as origin.
"Origin ID" will then be filled in automatically. In "Viewer Protocol Policy" **Redirect HTTP to HTTPS** is selected because users should only be able to access the website via HTTPS.  "Compress Objects Automatically" **Yes** can be selected, so that CloudFront will zip all files automatically.
Under "Alternate Domain Names (CNAMES)" you have to specify the bucket for the root domain for the distribution for the root domain. For example mxd.codes

At "SSL-Certifacte" you can now create for the two domains **mxd.codes** and **www.mxd.codes** two free Amazon SSL certificate via the [Certificate Manager (ACM )](https:/https://aws.amazon.com.amazon.com/en/certificate-manager/ "Certificate Manager (ACM)"). To do this, add your two domains in ACM.

![ACM Domain](/uploads/acm_domain_ee3a548091.png)

You can now have this validated using a DNS or email method. If you have included your domain in Route 53, you can do it more or less automatically by simply following the instructions.

Back in the CloudFront Distribution Creation you only have to specify a "Default Root Object". -> index.html
If you don't do this, CloudFront always shows an "Access Denied" message in XML format when you access your domain (atleast that was my case).

Finally, the distribution must of course still be activated under "Distribution State".

First distribution finished. The same procedure now for the subdomain **www.mxd.codes** with the corresponding "Origin Domain Name" (**Bucket end point!**)

_This can take up to 20 minutes_
(If you want to clear your CloudFront cache and have already installed AWS CLI, you can do this with the following command:

```shell
aws cloudfront create-invalidation --distribution-id DEINE_DISTRIBUTION ID --paths "/*"
```

In the meantime, you can create the redirects for Cloudfront in Route 53.

## Route 53 DNS settings

In [Route 53]("Route 53") you need a hosted zone (= 0.50€ per month). Then A (and provided that in the CLoudFrontDistribution IPv6 is
activated (which it is by default), as well as an AAAA) data record can be created.

That means you basically need 4 "alias" data sets:
+ mxd.codes A "CloudFront URL for root domain"
+ mxd.codes AAAA "CloudFront URL for root domain"
+ www.mxd.codes A "CloudFront URL for subdomain"
+ www.mxd.codes AAAA "CloudFront URL for subdomain"

Exceptionally, you can select the CDN url from the dropdown list.
With "Routing Guideline" and "Assess the state of the target" you can leave the default settings, unless you want to experiment.

Now if you wait a little you should be redirect from
+ http://wwww.mxd.codes,
+ https://wwww.mxd.codes,
+ wwww.mxd.codes,
+ http://mxd.codes and
+ mxd.codes
to **https://mxd.codes** .


AWS

GatsbyJS with CI/CD Pipeline via Codebuild
Max DietrichMax Dietrich

Host a static website with your own domain, AWS S3 and CloudFront
Max DietrichMax Dietrich

AWS

GatsbyJS with CI/CD Pipeline via Codebuild Max DietrichMax Dietrich

Host a static website with your own domain, AWS S3 and CloudFrontMax DietrichMax Dietrich

GatsbyJS with CI/CD Pipeline via Codebuild
Max DietrichMax Dietrich

Host a static website with your own domain, AWS S3 and CloudFront
Max DietrichMax Dietrich