Contact UsGet started

Hosting a static Gatsby website in Yandex Object Storage

Written by
Updated at October 30, 2024

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. Prepare your cloud.
  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 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.

Prepare your cloud

Sign up for Yandex Cloud and create a billing account:

  1. Go to the management console and log in to Yandex Cloud or create an account if you do not have one yet.
  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.

If you have an active billing account, you can go 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 guide.

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 the 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 your static website in the cloud, create a bucket and configure it:

  1. In the management console, select the folder you want to create a bucket in.
  2. In 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 a list of buckets, select the bucket you created.
  9. In the left-hand panel, select Settings.
  10. Go to the Website tab.
  11. Select Hosting.
  12. In the Home page field, specify the absolute path to the file of the website home page. For the website from the Gatsby template, specify index.html.
  13. (Optional) 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 command line interface 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 previously created bucket, 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 name of the bucket. 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 previously created bucket, e.g., gatsbytest.ru.
    • IndexDocument.Suffix: Absolute path to the website home page file. For the website from the Gatsby 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 server, create a public DNS zone and an ANAME resource record which links your domain name to the bucket.

  1. In the management console, go to the bucket created earlier.

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

  3. Go 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 of the same name with 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, the gatsbytest.ru. zone name corresponds to 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 Certificate Manager Yandex Certificate Manager

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

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

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

    2. In 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.

      The new certificate will appear in the certificate list with the Validating status. 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. In 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 the result, the certificate will be issued and get the Issued status.

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

    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 the 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 in the next step.

      The new certificate will appear in the certificate list with the Validating status. 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 the 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 in the previous step that is required to check rights to the relevant 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 permission check may take from a few minutes to a few days. Wait until it is complete. As the 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 that the website will use.

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

    The new certificate will appear in the certificate list with the Validating status. 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:

    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. Go 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 the website locally

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

  1. To create the website, run these commands:

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

  2. Go 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, go 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 created resources 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 you need to.
  4. Delete the TLS certificate if you need to.
Previous
Uploading data from Yandex Managed Service for YDB using Yandex Data Transfer
Next
Storing a static access key in a Yandex Lockbox secret