GatsbyJS is a javascript framework based on React that makes it easy to create static websites and dynamic apps.

Since it uses React as a base content can be structured and worked on independently as componants.

I.e you can work on just the header for a page and link it throughout your site.

https://www.gatsbyjs.org/

GatsbyJS also includes a lot of tooling and plugins to pull data from other sources and use other features. Things like implementing SEO, adding Google analytics, adding support for typescript and many many more useful things are available as plugins.

One very handy plugin is the gatsby-plugin-s3 which allows you to deploy a gatsby site to an S3 bucket.

Gatsby Page

https://www.gatsbyjs.org/packages/gatsby-plugin-s3/?=S3#features

Github

GitHub - gatsby-uc/gatsby-plugin-s3: Deploy your gatsby site to a S3 bucket.

Enables you to deploy your gatsby site to a S3 bucket.
Requires very little configuration, while optimizing your site as much as possible.

Features:

• 📦 Fully handles the deployment process for you, all you need to configure is your bucket name.

  • Automatically creates/updates bucket with optimal configuration applied.

  • Syncs gatsby files to the bucket & updates metadata.

• ⏭ Redirects.

• 💾 Optimizes caching for you.

• ☁️ Optional serverless framework support if you want to take things a step further.

• ✏️ Add your own params to uploaded S3 objects (if you wish).

What this boils down to is that it is a plugin that uses aws-cli to deploy your website to an S3 bucket adding defaults that are basically good ideas.

This can also be used with Swarms S3 interface.

Instructions

Figure out how to make a gatsby site

So step 1 is going to be “Learn enough Gatsby to install and make something you want to share”. Thankfully this step isn’t as daunting as it might seem as the Gatsby documentation is excellent.

https://www.gatsbyjs.org/tutorial/

Going through parts 0 and 1 of the linked tutorial will give you a development environment and an example site that is ready to deploy.

There's a lot more to Gatsby but all we need is a working example here.

Add the Gatsby S3 plugin

With gatsby installed and our starter site deployed we can now add a plugin.

first cd into the directory of your site

Then we want to install the plugin

With that installed our next step is to configure the plugin

Configure the plugin

The documentation for the plugin tells you to configure the plug in the gatsby-config.js file.

you will find this in the root directory for your site.

edit the gatsby-config file and add the details for your bucket, domain and the below options. This can be a little messy be sure not to forget comma’s also its case sensitive.

bucketName = the name of the bucket you want to service content from

customAwsEndpointHostname = your swarm domain that you are serving the bucket from.

Swarm doesn’t support some of the options available on S3 so its important for this toolchain to turn them off.

Another important config item is at the top of the file

The assetPrefix tells gatsby to use static links rather than relative links when building the static html+javascript files for your site.

that turns a <a href=/page-1.jsp> to <a href=https://tlokko.cloud.caringo.com/gatsbytest/page-1.jsp>

very important if you have more than a single site page more info on it here.

https://www.gatsbyjs.org/docs/path-prefix/

https://www.gatsbyjs.org/docs/asset-prefix/

Thats all we need to add in this file.

Add the plugin to our deployment step

next we modify the package.json

in the scripts section we’ll add

So our full stanza will look like this

From here we’re just about ready to deploy our site. Next we need to deal with aws-cli and run the upload.

Install and configure Aws-cli

The gatsby plugin uses aws-cli to upload the static files on the profile that you are currently logged in as.

To install aws-cli check the installation steps for your platform from here.

https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html

Once its installed you will need to add a token and keypair for the platform that you are running on.

The credentials file will simply contain

Now that aws-cli is setup we can run our build for the site and upload it.

Deployment

In my scenario the domain is

tlokko.cloud.caringo.com

the bucket is

gatsbytest

It is worth bearing in mind that you need to have the domain dns resolvable and by default it will attempt to use https as its assuming an s3 service + production quality setup.

Luckily the dns resolution is managed for me in this case but if it wasn’t a hostfile entry or local would do.

Https on the otherhand is handled via a wildcard cert which npm will not accept. In a production setup you would expect an ssl cert for tlokko.cloud.caringo.com and another for *.tlokko.cloud.caringo.com and perhaps even the bucket. This is just a test though so we can tell npm to ignore ssl.

Once thats done we run the build command to create our site locally. Do this from the toplevel of your site directory.

This command builds all of the static files that you will need to host on a service via gatsby. It does things like image optimization , link resolution etc. leaving you with a huge set of files

note the above is a two page starter site.

once thats done re can run the deploy step

If it all worked you’ll see a message like the above which tells you your files have been uploaded and all is good.

From there you should be able to access the file via its index.html page.

In my case thats https://tlokko.cloud.caringo.com/gatsbytest/index.html

Open

index.html

Open

If you want to have the content public change your access policy on the bucket to allow anonymous GET