Hosting a static Gatsby website in Yandex Object Storage
- Prepare your cloud
- Register a domain name
- Create and configure an Object Storage bucket
- Link the domain name to the bucket
- Add a TLS certificate to Certificate Manager Yandex Certificate Manager
- Configure HTTPS access to the bucket .
- Create the website locally
- Upload your website to the bucket
- Check the result
- How to delete the resources you created
In this tutorial, you will learn how to host your static Gatsby
To create and host a static website in Object Storage:
- Prepare your cloud.
- Register a domain name.
- Create and configure an Object Storage bucket.
- Link the domain name to the bucket.
- Add a TLS certificate to Certificate Manager.
- Configure HTTPS access to the bucket.
- Create the website locally.
- Upload your website to the bucket.
- 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:
- Go to the management console
and log in to Yandex Cloud or create an account if you do not have one yet. - On the Yandex Cloud Billing
page, make sure you have a billing account linked and it has theACTIVE
orTRIAL_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
Learn more about clouds and folders.
Install and configure the AWS CLI
Install and configure the AWS CLI by following this guide.
Required paid resources
The cost of support for the new infrastructure includes:
- Fee for using a public DNS zone and for public DNS requests (see Yandex Cloud DNS pricing).
- Fee for data storage in Object Storage, operations with data, and outgoing traffic (see Object Storage pricing).
Register a domain name
-
In your domain registrar's account, register a domain name, e.g.,
gatsbytest.ru
. -
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
andns2.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 thedig
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:
- In the management console
, select the folder you want to create a bucket in. - In the list of services, select Object Storage.
- At the top right, click Create bucket.
- In the ** Name** field, specify the domain name you registered, e.g.,
gatsbytest.ru
. - In the Max size field, specify
1 GB
. - Select the Public access type for all operations.
- Click Create bucket.
- On the page with a list of buckets, select the bucket you created.
- In the left-hand panel, select
Settings. - Go to the Website tab.
- Select
Hosting
. - 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
. - (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, specify404.html
. - Click Save.
If you do not have the Yandex Cloud command line interface yet, install and initialize it.
-
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. -
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, specifyindex.html
.error
: Absolute path to the file the user will see in case of4xx
errors. For the website from the Gatsby template, specify404.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.
-
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" }
-
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, specifyindex.html
.ErrorDocument.Key
: Absolute path to the file the user will see in case of4xx
errors. For the website from the Gatsby template, specify404.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.
-
In the management console
, go to the bucket created earlier. -
In the left-hand panel, select
Settings. -
Go to the Website tab.
-
Under Domains in Cloud DNS, click Create record
-
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. -
Click Create.
Wait until the record is created.
-
Click Save.
-
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, thegatsbytest.ru.
zone name corresponds to thegatsbytest.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. -
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.
-
Add a Let's Encrypt® certificate to Certificate Manager for your domain that the website will use.
-
In the management console
, select the folder to create your certificate in. -
In the list of services, select Certificate Manager.
-
Click Add certificate and select Let's Encrypt certificate.
-
In the window that opens, specify a name for the certificate being created in the Name field, e.g.,
gatsbytestcert
. -
In the Domains field, specify your domain name, e.g.,
gatsbytest.ru
. -
Select
DNS
as the type of domain rights check. -
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.
-
-
To successfully issue the certificate, pass the domain rights check:
- In the list of certificates, select
gatsbytestcert
. - In the window that opens, under Check rights for domains, select
CNAME record
. - 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. - In the list of certificates, select
-
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. -
To successfully issue the certificate, pass the domain rights check:
-
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 theCNAME
type section underchallenges.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. -
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. -
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"
-
-
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. -
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:
- In the management console
, select the folder. - Select Object Storage.
- Click the bucket name,
gatsbytest.ru
in our example. - In the left-hand panel, select
Security. - Go to the HTTPS tab.
- Click Configure.
- In the Source field, select Certificate Manager.
- In the Certificate field, select the certificate from the list that opens.
- 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
-
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
-
Go to the website directory:
cd my-gatsby-project
-
Compile the website for local access:
gatsby develop
Wait for the command to complete.
-
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
Install the S3 plugin
-
On your local machine, go to the
my-gatsby-project
website directory and run this command:npm i gatsby-plugin-s3
-
Open the
gatsby-config.js
file and add the plugin declaration to theplugins
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.
-
Open the
package.json
file and add thedeploy
entry to thescripts
section:"scripts": { "deploy": "gatsby-plugin-s3 deploy --yes", ... }
Upload your website to the bucket
-
Compile the website by running this command:
sudo npm run build
-
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:
- Delete all objects from the bucket.
- Delete the bucket.
- Delete the resource records and domain zone if you need to.
- Delete the TLS certificate if you need to.