Installing Gatsby using Cloud Apps

Follow this guide to install and configure a static website on Gatsby, a framework for building static and hybrid websites, using the Cloud Apps. The application will deploy the website to Object Storage and configure domain access with automatic SSL certificate issuance.

To install Gatsby:

1. Get your cloud ready.
2. Configure a DNS zone.
3. Installing Gatsby using Cloud Apps.
4. Prepare a website repository.
5. Check the result.

If you no longer need the resources you created, delete them.

Get your cloud readyGet your cloud ready

Sign up for Yandex Cloud and create a billing account:

1. Navigate to the management console and log in to Yandex Cloud or create a new account.
2. On the Yandex Cloud Billing page, make sure you have a billing account linked and it has the ACTIVE or TRIAL_ACTIVE status. If you do not have a billing account, create one and link a cloud to it.

If you have an active billing account, you can create or select a folder for your infrastructure on the cloud page.

Learn more about clouds and folders here.

Required paid resourcesRequired paid resources

The cost of support for the new infrastructure includes:

• Fee for using a public DNS zone and public DNS requests (see Yandex Cloud DNS pricing).
• Fee for data storage in Yandex Object Storage, data operations, and outgoing traffic (see Yandex Object Storage pricing).
• Fee for storing secrets in Yandex Lockbox (see Yandex Lockbox pricing).

Configure a DNS zoneConfigure a DNS zone

Before installing the application, create a public DNS zone and delegate a domain to it. For more about delegating domains, see this guide.

Install Gatsby using Cloud AppsInstall Gatsby using Cloud Apps

Install a static website on Gatsby using Cloud Apps. The application will deploy the website to Object Storage and configure domain access.

Prepare a repositoryPrepare a repository

After the application is installed, prepare a SourceCraft repository with the website's source code:

1. If you do not have Git installed yet, follow this guide to install it.

2. Create a repository from the cloudapp-gatsby template.

3. On your local computer, open the working directory where you want to host your website project.

4. Clone the repository created from the template.

5. Go to the cloned repository. Complete all further steps, i.e., environment configuration, building, and deployment, inside this folder.

Deploy the websiteDeploy the website

Open the README file in the repository root and complete the steps from that file:

1. Set up a service connection. Specify the service account you created when installing the application.

   You will need the service connection name specified during account creation to complete the setup.

2. Update the configuration files in your editor, such as Visual Studio Code:

   1. gatsby-config.ts:

       const config: GatsbyConfig = {
        siteMetadata: {
          title: `<website_name>`,
          siteUrl: `https://<domain>`,
        },
        // ...
        plugins: [
          {
            resolve: `gatsby-plugin-s3`,
            options: {
              bucketName: "<bucket_name>",
              region: "ru-central1",
              protocol: "https",
              hostname: "storage.yandexcloud.net",
              customAwsEndpointHostname: 'storage.yandexcloud.net'
            },
          }
        ],
      }
      

      Where:

      • <website_name>: Name of your website.
      • <domain>: Domain where the website will be available. It usually matches the name of the bucket created when installing the application.
      • <bucket_name>: Name of the bucket automatically created during application installation.

   2. .sourcecraft/ci.yaml:

      tokens:
        SERVICE_CONNECTION:
          service_connection: <service_connection>
          scope: org
      
      workflows:
        gatsby-deploy:
          env:
            DOMAIN_NAME: <domain>
      

      Where:

      • <service_connection>: Service connection name.
      • <domain>: Domain where the website will be available. It usually matches the name of the bucket created when installing the application.
      • scope: Service connection level. The possible values are:
        • repo: For repository-level connections.
        • org: For organization-level connections.

3. Run the CI/CD pipeline to deploy the static website. To do this, run the following commands one by one inside the main branch:

   git commit -a
   

   Enter a name for the commit.

   git push
   

   After the pipeline runs successfully, the website will be available at https://<domain>. The system automatically builds your project and uploads the result to the Object Storage bucket.

Configure the websiteConfigure the website

1. Install the required version of Node.js for local development.

2. Install the project dependencies:

   npm install
   

3. Start the dev server:

   npm run develop
   

   The website will be available at http://localhost:8000.

4. Build the production version by running this command:

   npm run build
   

5. View the production build locally by running this command:

   npm run serve
   

6. To publish changes, run the CI/CD pipeline as described in Deploy the website.

Check the resultCheck the result

Make sure your Gatsby static website is successfully published and available at the public domain:

1. In your browser, open the domain or subdomain you specified during application installation (e.g., https://site.example.com).

2. Make sure the main page of your Gatsby website loads and its navigation works.

3. If the template included a test page or section, navigate to it via the relevant link and make sure it also opens at the public URL.

If the website opens and all images, styles, and pages render correctly, your website was deployed successfully.

How to delete the resources you createdHow to delete the resources you created

To shut down the resources you created and stop paying for them:

1. Delete all objects from the Object Storage bucket you created when installing the app.

2. Delete the Static website in Object Storage application in Cloud Apps:

   1. In the management console, select the folder the application is installed in.
   2. In the list of services, select Cloud Apps.
   3. Find the Static website in Object Storage application in the list.
   4. Click next to the app and select Delete.
   5. Confirm the deletion and wait for it to complete. The empty bucket and the remaining resources of this application instance will also be deleted.

3. If you created a service account during application installation, delete it.

4. Delete the public DNS zone.

5. Delete the SourceCraft service connection:

   1. Open the SourceCraft home page.
   2. On the  Home tab, under Your craftspace, navigate to  Repositories.
   3. Select the repository created from the cloudapp-gatsby template.
   4. Under Repository settings, navigate to Service connections and select the service connection you need.
   5. In the top-right corner, click Delete and confirm the deletion.

6. Delete the repository created from the template in SourceCraft.