content: Add hosting guide for Render

This commit is contained in:
Joe Mooring
2025-08-20 14:02:34 -07:00
committed by GitHub
parent d77b06aa6c
commit 3aaca6c0ad
12 changed files with 181 additions and 78 deletions
@@ -1,78 +0,0 @@
---
title: Host on Render
description: Host your site on Render.
categories: []
keywords: []
aliases: [/hosting-and-deployment/hosting-on-render/]
---
## Introduction
[Render](https://render.com) is a fully-managed cloud platform where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place.
Static sites are **completely free** on Render and include the following:
- Continuous, automatic builds & deploys from [GitHub](https://render.com/docs/github) and [GitLab](https://render.com/docs/gitlab).
- Automatic SSL certificates through [Let's Encrypt](https://letsencrypt.org).
- Instant cache invalidation with a lightning fast, global CDN.
- Unlimited collaborators.
- Unlimited [custom domains](https://render.com/docs/custom-domains).
- Automatic [Brotli compression](https://en.wikipedia.org/wiki/Brotli) for faster sites.
- Native HTTP/2 support.
- [Pull Request Previews](https://render.com/docs/pull-request-previews).
- Automatic HTTP → HTTPS redirects.
- Custom URL redirects and rewrites.
## Assumptions
- You have an account with GitHub or GitLab.
- You have completed the [Quick Start] or have a Hugo website you are ready to deploy and share with the world.
- You have a Render account. You can sign up at <https://render.com/register>.
## Deployment
You can set up a Hugo site on Render in two quick steps:
1. Create a new **Static Site** on Render, and give Render permission to access your GitHub/GitLab repo.
1. Use the following values during creation:
Field | Value
------------------- | -------------------
**Build Command** | `hugo --gc --minify` (or your own build command)
**Publish Directory** | `public` (or your own output directory)
That's it! Your site will be live on your Render URL (which looks like `yoursite.onrender.com`) as soon as the build is done.
## Continuous deploys
Now that Render is connected to your repo, it will **automatically build and publish your site** any time you push to your GitHub/GitLab.
You can choose to disable auto deploys under the **Settings** section for your site and deploy it manually from the Render dashboard.
## CDN and cache invalidation
Render hosts your site on a global, lightning fast CDN which ensures the fastest possible download times for all your users across the globe.
Every deploy automatically and instantly invalidates the CDN cache, so your users can always access the latest content on your site.
## Custom domains
Add your own domains to your site easily using Render's [custom domains](https://render.com/docs/custom-domains) guide.
## Pull Request previews
With Pull Request (PR) previews, you can visualize changes introduced in a pull request instead of simply relying on code reviews.
Once enabled, every PR for your site will automatically generate a new static site based on the code in the PR. It will have its own URL, and it will be deleted automatically when the PR is closed.
Read more about [Pull Request Previews](https://render.com/docs/pull-request-previews) on Render.
## Hugo themes
Render automatically downloads all Git submodules defined in your Git repo on every build. This way Hugo themes added as submodules work as expected.
## Support
Chat with Render developers at <https://render.com/chat> or email `support@render.com` if you need help.
[Quick Start]: /getting-started/quick-start/
@@ -0,0 +1,181 @@
---
title: Host on Render
description: Host your site on Render.
categories: []
keywords: []
aliases: [/hosting-and-deployment/hosting-on-render/]
---
Use these instructions to enable continuous deployment from a GitHub repository. The same general steps apply if you are using GitLab or Bitbucket for version control.
## Prerequisites
Please complete the following tasks before continuing:
1. [Create](https://dashboard.render.com/register) a Render account
1. [Log in](https://dashboard.render.com/login) to your Render account
1. [Create](https://github.com/signup) a GitHub account
1. [Log in](https://github.com/login) to your GitHub account
1. [Create](https://github.com/new) a GitHub repository for your project
1. [Create](https://git-scm.com/docs/git-init) a local Git repository for your project with a [remote](https://git-scm.com/docs/git-remote) reference to your GitHub repository
1. Create a Hugo site within your local Git repository and test it with the `hugo server` command
## Procedure
### Step 1
Create a [Render Blueprint][] in the root of your project.
``` {file="render.yaml" copy=true}
services:
- type: web
name: hosting-render
repo: https://github.com/jmooring/hosting-render
runtime: static
buildCommand: chmod a+x build.sh && ./build.sh
staticPublishPath: public
envVars:
- key: DART_SASS_VERSION
value: 1.90.0
- key: GO_VERSION
value: 1.24.5
- key: HUGO_VERSION
value: 0.148.2
- key: NODE_VERSION
value: 22.18.0
- key: TZ
value: Europe/Oslo
```
### Step 2
Create a `build.sh` file in the root of your project.
```sh {file="build.sh" copy=true}
#!/usr/bin/env bash
#------------------------------------------------------------------------------
# @file
# Builds a Hugo site hosted on a Render.
#
# Render automatically installs Node.js dependencies.
#------------------------------------------------------------------------------
main() {
# Create directory for user-specific executable files
echo "Creating directory for user-specific executable files..."
mkdir -p "${HOME}/.local"
# Install Dart Sass
echo "Installing Dart Sass ${DART_SASS_VERSION}..."
curl -sLJO "https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
tar -C "${HOME}/.local" -xf "dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
rm "dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
export PATH="${HOME}/.local/dart-sass:${PATH}"
# Install Go
echo "Installing Go ${GO_VERSION}..."
curl -sLJO "https://go.dev/dl/go${GO_VERSION}.linux-amd64.tar.gz"
tar -C "${HOME}/.local" -xf "go${GO_VERSION}.linux-amd64.tar.gz"
rm "go${GO_VERSION}.linux-amd64.tar.gz"
export PATH="${HOME}/.local/go/bin:${PATH}"
# Install Hugo
echo "Installing Hugo ${HUGO_VERSION}..."
curl -sLJO "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
mkdir -p "${HOME}/.local/hugo"
tar -C "${HOME}/.local/hugo" -xf "hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
rm "hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
export PATH="${HOME}/.local/hugo:${PATH}"
# Verify installations
echo "Verifying installations..."
echo Dart Sass: "$(sass --version)"
echo Go: "$(go version)"
echo Hugo: "$(hugo version)"
echo Node.js: "$(node --version)"
# Configure Git
echo "Configuring Git..."
git config core.quotepath false
if [ "$(git rev-parse --is-shallow-repository)" = "true" ]; then
git fetch --unshallow
fi
# Build the site
echo "Building the site..."
hugo --gc --minify --baseURL "${RENDER_EXTERNAL_URL}"
}
set -euo pipefail
main "$@"
```
### Step 3
Commit the changes to your local Git repository and push to your GitHub repository.
### Step 4
On the Render [dashboard][], press the **Add new** button and select "Blueprint" from the drop-down menu.
![screen capture](render-01.png)
### Step 5
Press the **GitHub** button to connect to your GitHub account.
![screen capture](render-02.png)
### Step 6
Press the **Authorize Render** button to allow the Render application to access your GitHub account.
![screen capture](render-03.png)
### Step 7
Select the GitHub account where you want to install the Render application.
![screen capture](render-04.png)
### Step 8
Authorize the Render application to access all repositories or only select repositories, then press the **Install** button.
![screen capture](render-05.png)
### Step 9
On the "Create a new Blueprint Instance in My Workspacee" page, click on the **Connect** button to the right of the name of your GitHub repository.
![screen capture](render-06.png)
### Step 10
Enter a unique name for your Blueprint, then press the **Deploy Blueprint** button at the bottom of the page.
![screen capture](render-07.png)
### Step 11
Wait for the site to build and deploy, then click on the "Resources" link on the left side of the page.
![screen capture](render-08.png)
### Step 12
Click on the link to the static site resource.
![screen capture](render-09.png)
### Step 13
Click on the link to your published site.
![screen capture](render-10.png)
[Render Blueprint]: https://render.com/docs/blueprint-spec
[dashboard]: https://dashboard.render.com/
Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB