Static site with Gatsby
Last updated
Was this helpful?
Last updated
Was this helpful?
You can use Release to deploy static sites to the Release CDN. Release can detect services inside your application that are eligible for static service deployment and you can choose to build and deploy these to the Release CDN, ensuring fast performance at the edge.
In this example, we'll use Gatsby to deploy a simple static site to the CDN. Gatsby is an open-source frontend framework designed to help you build fast, scalable, and SEO-optimised static sites. It's often used to run company blogs or websites.
Here's a look at the site we'll deploy to Release:
We'll also take a look at how to manage and update the site once it is deployed.
You can get the code for this project by forking the repository on GitHub. By forking the repository containing the code, you create a copy of it on your account. You can then edit this copy as you wish without needing permissions on the original project.
Once you’ve forked the repository to your account, clone your copy to your development machine.
Once you’ve forked and cloned the repository, you can use the Release UI to integrate directly with your source-control provider (either GitHub or GitLab in this case).
To start, ensure that you are signed in to your Release account with the SSO provider for your source control integration.
When signing in, Release will ask for read/write access to the provider API so that it can list and view your repositories.
If you use the same email address across Bitbucket, GitLab, and GitHub, Release will automatically list a combined view of repositories for you. Each integration will appear separately on your profile page.
Once you’ve signed in, click the Create New App button on the home page.
This will open a six-step form to help you create your application. The steps are as follows:
Create your application: Enter a name and select your repository.
Analyze your repository: Let Release scan your repository for services, then select which services to add to your application.
Generate a template: Based on the services you selected from your repository, Release generates a template for your application.
Set environment variables: Set the default environment variables for your new application.
Set build arguments: Set arguments to use when Release builds your application's Docker images.
Save and deploy: Deploy your new application.
Give the application a name and pick a repository and then click the Next Step button.
Ensure that you have selected the correct branch for your repository to be built and deployed from (in this case, it is the master branch). From the Select files dropdown, select the package.json file for Release to analyze and click Start Analysis. Release will now read the file you selected and create a list of services found.
Release will automatically detect that your project contains static assets that are eligible for static asset deployment.
Double-check that Release has inferred the correct configuration for the project.
The service type dropdown should be set to Static with the Build Command being yarn build. The build Output Directory should be set to public. Click Next Step to move to the template generation step.
The Application Template acts as a blueprint for new environments in this application. Release creates a template based on the services you selected in step two. You can edit the template or proceed to the next step.
In this step, you can set default environment variables that will be available for all environments for your application. These environment variables consist of a key, a value, and an optional secret flag. For this application, you can proceed without setting environment variables.
In the next step, you can set build arguments. Build arguments are passed to Release's build process. You can proceed without setting build arguments for this application.
You've created your application and it is now time to save and deploy the application.
While your application builds and deploys, you will be redirected to the App Dashboard status page.
Here you can explore environments, builds, and deploys related to your application. You can also modify application-specific settings.
Click on the Builds tab to see a successful build for your Gatsby application.
Once an ephemeral environment has been created and successfully deployed for your application, you should see a prompt.
You can also view this environment by clicking on the Environments tab.
Click on the name of an environment in the Environments tab to be taken to the Environment Details page.
Here you can view granular information about a particular environment, including the application instances deployed into it and the hostname URLs that exist.
Click the hostname URL to go to your static website hosted on Release.
In the real world, we would probably want to make changes to our application and redeploy it. Let’s add a new blog post to our application to see how this works.
Change directory into the repository we cloned earlier and open it in a text editor.
Create a new file in the content/post directory called hello-release.mdx. Add the following content to your newly created file:
Commit and push these changes to your remote repository:
Once you’ve pushed the changes, Release will automatically start a new build and deployment based on the latest commit in your repository.
Once the deployment is complete, you should be able to see the updated blog at the same hostname URL you accessed earlier.
You probably don't want to deploy new changes directly to a production environment. Instead, you may have a development branch where you can send changes for review. Release allows you to create a new environment for this.
Let’s create a development branch in our repository and push a change to it.
Create a new file in content/posts called staged-post.mdx and add the following content to it:
Push the newly created develop branch remotely, including the new staged post:
Navigate to the Environments tab in the App Dashboard of your application.
Click on Create New Environment and specify the develop branch.
When you click Create Environment, Release will automatically build and deploy from the development branch.
View the deployed application by navigating to the hostname URL specified for this environment on its Environment Details page. You can now iterate and make changes on this branch without impacting your main environment.
