Static site with Gatsby
You can use ReleaseHub to deploy static sites to the ReleaseHub CDN. ReleaseHub can detect services inside your application that are eligible for static service deployment, and you can choose to build and deploy these to the ReleaseHub 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 ReleaseHub:
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.
git clone https://github.com/awesome-release/gatsby-starter-theme
Once you’ve forked and cloned the repository, you can use the ReleaseHub 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 ReleaseHub account with the SSO provider for your source control integration.
When signing in, ReleaseHub 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, ReleaseHub will automatically list a combined view of repositories for you. Each integration will appear separately on your profile page.
This will take you to the page where you can select the repository associated with your application. Click the refresh icon under "Pick your repository" to ensure you can see your newly forked repository in the options list.
Now you can search for and select the new repository.
Once you’ve selected your repository, the configuration options will expand and allow you to provide important details about your application.
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).ReleaseHub will automatically detect that your project contains static assets that are eligible for static asset deployment.
Double-check that ReleaseHub has inferred the correct configuration for the project.
The service type toggle should be set to Static with the Build Command being
gatsby build. ReleaseHub should have detected the Build Output Directory as public.Now you can give your application a name. If you do not provide one, ReleaseHub will use the repository name as the default. In this case, we have stuck with the repository name.
It is advisable to keep your application's name brief but descriptive. This is the name that will be used as a prefix in your domain name for the application. Contact us if you need to configure a custom domain name.
Once you’ve finalized your configuration, ReleaseHub automatically generates an Application Template for your application.
Click the Save & Continue button to continue to the Build & Runtime Configurations page.
This is the ideal place to configure any build arguments or default environment variables that may be required during your build.
You can also configure Just-In-Time File Mounts, which allow you to inject configuration files and scripts as a container starts running after deployment. These are not required for this example.
Click Start Build & Deploy. Your static site will be pushed to a Global CDN where it will be available to users.
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 ReleaseHub.
In the real world, we’d 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:---
title: Hello ReleaseHub
date: 2022-06-01
---
Hello, ReleaseHub! This is a demo post illustrating how to make a change and redeploy a static website on ReleaseHub.
Commit and push these changes to your remote repository:
git add content/
git commit -m "Add a new post"
git push
Once you’ve pushed the changes, ReleaseHub 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. ReleaseHub allows you to create a new environment for this.
Let’s create a development branch in our repository, and push a change to it.
% git checkout -b develop
Switched to a new branch 'develop'
Create a new file in
content/posts called staged-post.mdx and add the following content to it:---
title: Hello ReleaseHub - Staged
date: 2022-06-01
---
This is a staged post that isn't in production yet.
Push the newly created
develop branch remotely, including the new staged post.% git add .
% git commit -m "add new staged post"
[develop 3a00048] add new staged post
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 content/posts/staged-post.mdx
% git push --set-upstream origin develop
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, ReleaseHub will automatically build and deploy from the development branch.
View the deployed application by navigating to the hostname URL specified for this environment in its Environment Details page. You can now iterate and make changes on this branch without impacting your main environment.
Last modified 1mo ago