Background
This project is built with Hugo and uses the Minimal Hugo theme.
This post is part of an ongoing effort to tailor the theme over time.
Specifically, this post is part of a project to build a contact form with Hugo and host it with Netlify.
Objective
In this post we’ll setup a subdomain for our website so that we can easily host content with two different hosting providers.
Rationale
The reason for this is that we want to meet several requirements:
- Our project is currently hosted on GitHub Pages and we want to try Netlify to test the form handling that is included in their service.
- However, we don’t want to move the entire project to Netlify because GitHub Pages has been consistent, fast, and reliable.
- Furthermore, we want to keep all the site’s resources accessible under the project’s domain name, so we’ll need to be able to maintain the custom domain name with GitHub Pages while adding one to Netlify.
Building the solution
Solution approach
To meet those requirements, we kept our apex domain and www subdomain pointed to GitHub Pages, and added a new page subdomain pointed to Netlify.
With that configuration we kept our A record and existing CNAME record unchanged and added one more CNAME record that points to Netlify.
The Netlify deployment walkthrough by Brad Traversy is an excellent outline of this process and shows most of the relevant details for deploying to GitHub, hosting a website with Netlify, and setting up a custom domain.
With that as a guide, we completed the following steps.
Building the Hugo project
Though it seems to go against the standard recommendations for Hugo projects, we chose to build the website files for both subdomains within the same Hugo project.
This allowed for utilizing the same theme, config, and layout files without duplication. And since we already employ Bash scripts to assist with building the site, we can alter and extend those scripts to separate the files into the relevant deployment directories. For the prototype build we’ll just manually separate those files.
There may be better options, but this was the best approach we found for our current project needs.
Deploying to GitHub
To host with Netlify we first needed to deploy our project files to GitHub.
While we had our existing project files hosted there, we wanted to create a new, separate repository for the project files that were going to be hosted by Netlify. This makes the hosting process straightforward and allows us to manage deployments to each subdomain independently.
For this project that involved creating a new repository and pushing our prototype files to that repository.
Hosting with Netlify
After creating a Netlify account, we completed the following to setup hosting.
Creating a new Netlify project
Just as outlined in Travery’s video and explained in Netlify’s documentation for deploying a project, we created a new Netlify project from the newly-created GitHub repository that hosted our contact form files.
Updating records with the domain registrar
As mentioned, we already had an existing A record and CNAME record configured, and we left those unchanged.
However, we needed to add an additional CNAME record for our new subdomain. (See Netlify’s documentation for configuring a subdomain.)
That involved logging into the domain registrar for the site and adding a CNAME record that pointed page.loopedline.com to our newly-deployed Netlify page.
Assigning a custom domain
Similarly, on the Netlify project dashbord we added page.loopedline.com as the custom domain for the project. (See Netlify’s documentation for assigning a domain to a site.)
Securing the site with HTTPS
Finally, we set up HTTPS (SSL) per Netlify’s documentation.
Waiting
Propagating updated DNS records and provisioning SSL certificates can take a while, so waiting is sometimes a part of the process.
Once everything updated, the new subdomain was live.
Conclusion
We now have a prototype contact form hosted on Netlify with our custom subdomain pointing to it while the rest of our site remains hosted on GitHub Pages.