Contact UsGet started

Hosting a static Gatsby website in Yandex Object Storage

Written by
Updated at May 7, 2025

In this tutorial, you will learn how to host your static Gatsby-based website in Object Storage and configure HTTPS access to it using Yandex Certificate Manager.

To create and host a static website in Object Storage:

  1. Get your cloud ready.
  2. Register a domain name.
  3. Create and configure an Object Storage bucket.
  4. Link the domain name to the bucket.
  5. Add a TLS certificate to Yandex Certificate Manager.
  6. Configure HTTPS access to the bucket.
  7. Create the website locally.
  8. Upload your website to the bucket.
  9. Check the result.

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

Get your cloud ready

Sign up in Yandex Cloud and create a billing account:

  1. Navigate to the management console and log in to Yandex Cloud or register 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 navigate to the cloud page to create or select a folder for your infrastructure to operate in.

Learn more about clouds and folders.

Install and configure the AWS CLI

Install and configure the AWS CLI by following this tutorial.

The cost of support for the new infrastructure includes:

Register a domain name

  1. In your domain registrar's account, register a domain name, e.g., gatsbytest.ru.

  2. To get access to public zone domain names, delegate the domain. To do this, in your domain registrar's account, specify the DNS server addresses: ns1.yandexcloud.net and ns2.yandexcloud.net.

    Delegation does not take effect immediately. It usually takes up to 24 hours for internet service providers to update records.
    You can check the domain delegation using Whois or the dig utility:

    dig +short NS gatsbytest.ru

    Result:

    ns2.yandexcloud.net.
ns1.yandexcloud.net.

Create and configure an Object Storage bucket

To host a static website in the cloud, create a bucket and configure it:

  1. In the management console, select the folder where you want to create a bucket.
  2. From the list of services, select Object Storage.
  3. At the top right, click Create bucket.
  4. In the ** Name** field, specify the domain name you registered, e.g., gatsbytest.ru.
  5. In the Max size field, specify 1 GB.
  6. Select the Public access type for all operations.
  7. Click Create bucket.
  8. On the page with the list of buckets, select the bucket you created.
  9. In the left-hand panel, select Settings.
  10. Navigate to the Website tab.
  11. Select Hosting.
  12. In the Home page field, specify the absolute path to the website home page file. For the website from the Gatsby template, specify index.html.
  13. Optionaly, in the Error page field, specify the absolute path to the file to display in the event of 4xx errors. For the website from the Gatsby template, specify 404.html.
  14. Click Save.

If you do not have the Yandex Cloud CLI yet, install and initialize it.

  1. Create a bucket:

    yc storage bucket create \
  --name <bucket_name> \
  --default-storage-class standard \
  --max-size 1073741824 \
  --public-read \
  --public-list \
  --public-config-read

    Where --name is the name of the bucket. Specify the domain name you registered, e.g., gatsbytest.ru.

    Result:

    name: gatsbytest.ru
folder_id: b1g681qpemb4********
anonymous_access_flags:
  read: false
  list: false
default_storage_class: STANDARD
versioning: VERSIONING_DISABLED
max_size: "1073741824"
acl: {}
created_at: "2024-09-09T15:23:34.919887Z"

    For more information about the yc storage bucket create command, see the CLI reference.

  2. Enable static website hosting in the bucket:

    yc storage bucket update \
  --name <bucket_name> \
  --website-settings '{"index": "index.html", "error": "404.html"}'

    Where:

    • --name: Name of the bucket you created earlier, e.g., gatsbytest.ru.
    • index: Absolute path to the website home page file. For the website from the Gatsby template, specify index.html.
    • error: Absolute path to the file the user will see in case of 4xx errors. For the website from the Gatsby template, specify 404.html.

    Result:

    name: gatsbytest.ru
folder_id: b1g681qpemb4********
default_storage_class: STANDARD
versioning: VERSIONING_DISABLED
max_size: "1073741824"
acl: {}
created_at: "2024-09-09T15:23:34.919887Z"
website_settings:
  redirect_all_requests: {}

    For more information about the yc storage bucket update command, see the CLI reference.

  1. Create a bucket:

    aws s3api create-bucket \
  --endpoint-url https://storage.yandexcloud.net \
  --bucket <bucket_name> \
  --acl public-read

    Where --bucket is the bucket name. Specify the domain name you registered, e.g., gatsbytest.ru.

    Result:

    {
    "Location": "/gatsbytest.ru"
}

  2. Enable static website hosting in the bucket:

    aws s3api put-bucket-website \
  --endpoint-url https://storage.yandexcloud.net \
  --bucket <bucket_name> \
  --website-configuration '{
    "IndexDocument": {
      "Suffix": "index.html"
    },
    "ErrorDocument": {
      "Key": "404.html"
    }
  }'

    Where:

    • --bucket: Name of the bucket you created earlier, e.g., gatsbytest.ru.
    • IndexDocument.Suffix: Absolute path to the website home page file. For the website from the template, specify index.html.
    • ErrorDocument.Key: Absolute path to the file the user will see in case of 4xx errors. For the website from the Gatsby template, specify 404.html.

To create a bucket, use the create REST API method for the Bucket resource, the BucketService/Create gRPC API call, or the create S3 API method.

To set up hosting for a static website, use the update REST API method for the Bucket resource, the BucketService/Update gRPC API call, or the upload S3 API method.

Link the domain name to the bucket

On the DNS sever, create a public DNS zone and an ANAME resource record linking your domain name to the bucket.

  1. In the management console, navigate to the bucket you created earlier.

  2. In the left-hand panel, select Settings.

  3. Navigate to the Website tab.

  4. Under Domains in Cloud DNS, click Create record.

  5. In the window that opens, click Create zone and select the domain zone under the same name as the bucket, e.g., gatsbytest.ru. (ending with a period). Click Create.

  6. Click Create.

    Wait until the record is created.

  7. Click Save.

  1. Create a public DNS zone named gatsbytest-ru-zone in Yandex Cloud DNS:

    yc dns zone create \
  --name gatsbytest-ru-zone \
  --zone <domain_name> \
  --public-visibility

    Where --zone is your domain name, e.g., gatsbytest.ru.. The --zone parameter value must end with a period. For example, gatsbytest.ru. matches the gatsbytest.ru domain.

    Result:

    id: dns39gihj0ef********
folder_id: b1g681qpemb4********
created_at: "2024-09-09T15:23:34.919887Z"
name: gatsbytest-ru-zone
zone: gatsbytest.ru.
public_visibility: {}

    For more information about the yc dns zone create command, see the CLI reference.

  2. Create an ANAME resource record in the gatsbytest-ru-zone public DNS zone:

    yc dns zone add-records \
  --name gatsbytest-ru-zone \
  --record "@ 600 ANAME <domain_name>.website.yandexcloud.net"

    Result:

    +--------+----------------+-------+---------------------------------------+-----+
| ACTION |      NAME      | TYPE  |                 DATA                  | TTL |
+--------+----------------+-------+---------------------------------------+-----+
| +      | gatsbytest.ru. | ANAME | gatsbytest.ru.website.yandexcloud.net | 600 |
+--------+----------------+-------+---------------------------------------+-----+

    For more information about the yc dns zone add-records command, see the CLI reference.

To create a public DNS zone, use the create REST API method for the DnsZone resource or the DnsZoneService/Create gRPC API call.

To create a resource record in a DNS zone, use the updateRecordSets REST API method for the DnsZone resource or the DnsZoneService/UpdateRecordSets gRPC API call.

Add a TLS certificate to Yandex Certificate Manager

To configure access to your website over a secure protocol, get a TLS certificate and configure HTTPS access to your bucket.

  1. Add a Let's Encrypt® certificate to Certificate Manager for your domain the website will be using.

    1. In the management console, select the folder to create your certificate in.

    2. From the list of services, select Certificate Manager.

    3. Click Add certificate and select Let's Encrypt certificate.

    4. In the window that opens, specify a name for the certificate being created in the Name field, e.g., gatsbytestcert.

    5. In the Domains field, specify your domain name, e.g., gatsbytest.ru.

    6. Select DNS as the type of domain rights check.

    7. Click Create.

      A new certificate with the Validating status will appear in the certificate list. This status means that a Let's Encrypt® certificate was requested and you need to pass a domain rights check for it to be successfully processed.

  2. To successfully issue the certificate, pass the domain rights check:

    1. From the list of certificates, select gatsbytestcert.
    2. In the window that opens, under Check rights for domains, select CNAME record.
    3. Click Create record and in the window that opens, click Create.

    Checking rights for a domain may take from a few minutes to a few days. Wait until the check is complete. As a result, the certificate will be issued and get the Issued status.

  1. Add a Let's Encrypt® certificate to Certificate Manager for your domain the website will be using.

    Run this command:

    yc certificate-manager certificate request \
  --name gatsbytestcert \
  --challenge dns \
  --domains <domain_name>

    Where --domains is the name of your domain for the web server, e.g., gatsbytest.ru.

    Result:

    id: fpqbs12t6ion********
folder_id: b1gt6g8ht345********
created_at: "2023-12-24T14:36:39.299844798Z"
name: gatsbytestcert
type: MANAGED
domains:
  - gatsbytest.ru
status: VALIDATING
updated_at: "2023-12-24T14:36:39.299844798Z"

    For more information about the yc certificate-manager certificate request command, see the CLI reference.

    Save the ID (id) of the created certificate as you will need it to pass the domain rights check.

  2. To successfully issue the certificate, pass a domain rights check:

    1. Get values of the resource records required for passing the check:

      yc certificate-manager certificate get \
  --name gatsbytestcert \
  --full

      Result:

      id: fpq2gpi42teg********
folder_id: b1gt6g8ht345********
created_at: "2023-12-24T18:13:45.960Z"
name: gatsbytestcert
type: MANAGED
domains:
  - gatsbytest.ru
status: VALIDATING
updated_at: "2023-12-24T18:13:45.960Z"
challenges:
  - domain: gatsbytest.ru
    type: DNS
    created_at: "2023-12-24T18:13:45.960Z"
    updated_at: "2023-12-24T18:13:49.280Z"
    status: PENDING
    message: Create a record in your DNS provider.
    dns_challenge:
      name: _acme-challenge.gatsbytest.ru
      type: CNAME
      value: fpq2gpi42teg********.cm.yandexcloud.net.
  - domain: gatsbytest.ru
    type: DNS
    created_at: "2023-12-24T18:13:45.960Z"
    updated_at: "2023-12-24T18:13:49.280Z"
    status: PENDING
    message: Create a record in your DNS provider.
    dns_challenge:
      name: _acme-challenge.gatsbytest.ru.
      type: TXT
      value: iiyJJJlsaFIqQ7DMUzira0OKU3iXuaqiN7U********

      For more information about the yc certificate-manager certificate get command, see the CLI reference.

      Save the value of the value field from the CNAME type section under challenges.dns_challenge. You will need this value at the next step.

      A new certificate with the Validating status will appear in the certificate list. This status means that a Let's Encrypt® certificate was requested and you need to pass a domain rights check for it to be successfully processed.

    2. Create a CNAME resource record to pass a domain rights check:

      yc dns zone add-records \
  --name gatsbytest-ru-zone \
  --record "_acme-challenge 600 CNAME <dns_challenge_value>"

      Where <dns_challenge_value> is the value saved at the previous step, required to check rights to a domain using a CNAME record.

      Result:

      +--------+----------------------------------+-------+------------------------------------------+-----+
| ACTION |              NAME                | TYPE  |                   DATA                   | TTL |
+--------+----------------------------------+-------+------------------------------------------+-----+
| +      | _acme-challenge.gatsbytest.ru.   | CNAME | fpq2gpi42teg********.cm.yandexcloud.net. | 600 |
+--------+----------------------------------+-------+------------------------------------------+-----+

      For more information about the yc dns zone add-records command, see the CLI reference.

      The domain rights check may take from a few minutes to a few days. Wait until it is complete. As a result, the certificate will be issued and get the Issued status.

    3. Make sure that the certificate status has changed to Issued:

      yc certificate-manager certificate get \
  --name gatsbytestcert

      Result:

      id: fpqr2j0sdb1n********
folder_id: b1gt6g8ht345********
created_at: "2023-12-24T16:38:02.206Z"
name: gatsbytestcert
type: MANAGED
domains:
  - gatsbytest.ru
status: ISSUED
issuer: CN=R3,O=Let's Encrypt,C=US
serial: 4b7d7f0968097ae1a7707854a80********
updated_at: "2023-12-24T16:46:03.578Z"
issued_at: "2023-12-24T16:46:03.578Z"
not_after: "2024-03-23T15:44:59Z"
not_before: "2023-12-24T15:45:00Z"

  1. Add a Let's Encrypt® certificate to Certificate Manager for your domain the website will be using.

    To add a certificate, use the requestNew REST API method for the Certificate resource or the CertificateService/RequestNew gRPC API call.

    A new certificate with the Validating status will appear in the certificate list. This status means that a Let's Encrypt® certificate was requested and you need to pass a domain rights check for it to be successfully processed.

  2. To successfully issue the certificate, pass a domain rights check:

    To get the information required to pass the rights check for a domain, use the get REST API method for the Certificate resource or the CertificateService/Get gRPC API call with the view=FULL flag.

    To create a CNAME resource record in a DNS zone, use the updateRecordSets REST API method for the DnsZone resource or the DnsZoneService/UpdateRecordSets gRPC API call.

Configure HTTPS access to the bucket .

Add a certificate in the bucket settings:

  1. In the management console, select the folder.
  2. Select Object Storage.
  3. Click the bucket name, gatsbytest.ru in our example.
  4. In the left-hand panel, select Security.
  5. Navigate to the HTTPS tab.
  6. Click Configure.
  7. In the Source field, select Certificate Manager.
  8. In the Certificate field, select the certificate from the list that opens.
  9. Click Save.

Run this command:

yc storage bucket set-https \
  --name <bucket_name> \
  --certificate-id <certificate_ID>

Where:

  • --name: Bucket name, gatsbytest.ru in our example.
  • --certificate-id: Certificate ID in Certificate Manager.

Result:

source_type: SOURCE_TYPE_MANAGED_BY_CERTIFICATE_MANAGER
certificate_id: fpqe2g0hfr0e********

To link a Certificate Manager TLS certificate to the bucket, use the setHTTPSConfig REST API method for the Bucket resource or the BucketService/SetHTTPSConfig gRPC API call.

Note

It may take some time to activate the settings.

Create a website locally

For testing purposes, create a website on your local computer using a template from Gatsby Starter Library.

  1. To create a website, run these commands:

    sudo npm install -g gatsby-cli
gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-blog

  2. Navigate to the website directory:

    cd my-gatsby-project

  3. Compile the website for local access:

    gatsby develop

    Wait for the command to complete.

  4. Make sure the website is available at http://localhost:8000.

Upload your website to the bucket

To build and upload a working version of the website to your bucket, use AWS CLI and the S3 plugin from the Gatsby suite of built-in plugins.

Install the S3 plugin

  1. On your local machine, navigate to the my-gatsby-project website directory and run this command:

    npm i gatsby-plugin-s3

  2. Open the gatsby-config.js file and add the plugin declaration to the plugins section:

    plugins: [
    {
      resolve: 'gatsby-plugin-s3',
      options: {
        bucketName: '<bucket_name>',
        region: 'us-east-1',
        customAwsEndpointHostname: 'storage.yandexcloud.net'
      }
    },
    ...
]

    Where bucketName is the bucket name, gatsbytest.ru in our example.

    Note

    Do not change the region value as this may lead to an error.

  3. Open the package.json file and add the deploy entry to the scripts section:

    "scripts": {
    "deploy": "gatsby-plugin-s3 deploy --yes",
    ...
}

Upload your website to the bucket

  1. Compile the website by running this command:

    sudo npm run build

  2. Wait for the compilation to complete and upload your website to the bucket by running the following command:

    npm run deploy

Check the result

Once the upload is complete, check that you can access your website using its domain name over the secure protocol. To do this, in your browser, go to https://<bucket_name>. In our example, the link is https://gatsbytest.ru.

How to delete the resources you created

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

  1. Delete all objects from the bucket.
  2. Delete the bucket.
  3. Delete the resource records and domain zone if required.
  4. Delete the TLS certificate if required.
Previous
Uploading data from Yandex Managed Service for YDB using Yandex Data Transfer
Next
Overview