How to enable SSL in Netlify with custom domain
Do you have a static site you need to put somewhere in Internet so others can access it? You're in for a treat: there are dozens of really good options. I wanted to try out Netlify for my website renewal because everyone had been saying good things about it and I had never used it.
I had an existing domain on Hover and used to run my website from a self-hosted Hetzner VPS. But during the past decade, the website and my server had become a mess. I wanted to start using a static site generator and to make deployment easier. So I installed Eleventy, piece by piece transformed my old site into an Eleventy site and ran
eleventy. Boom, few seconds later I had
_site folder that I dragged and dropped into Netlify and the site was up.
It was one of the best UX experiences ever.
Netlify offers Let's Encrypt SSL certificates for websites but that's when I hit some issues. I'm not an expert on domains and DNS and whatever I tried, I was always faced with an issue.
Web sites prove their identity via certificates. Firefox Developer Edition does not trust this site because it uses a certificate that is not valid for hamatti.org. The certificate is only valid for the following names: *.netlify.com, netlify.com
Error code: SSL_ERROR_BAD_CERT_DOMAIN
After lots of reading docs, googling, consulting much smarter colleagues and finally contacting Netlify support, things got fixed.
Their documentation on setting up DNS with custom domain is pretty good. As I use Hover, they don't provide ANAME or ALIAS options so I had to do A record and CNAME.
A @ 220.127.116.11 CNAME www [appname].netlify.com
18.104.22.168 is Netlify's load balancer's IP address and
[appname] should be your app's name in Netlify.
So I set up all this but still encountered issues. After contacting support, turned out that sometimes (probably me being too eager to change the settings too fast) something in DNS-and-or-certificate chain fails and it hungs on Netlify's end.
If that happens to you, contacting their support is the way to go. They can manually clear the issue and re-trigger the fetch to make it work.
Sign up for Syntax Error, a monthly newsletter that helps developers turn a stressful debugging situation into a joyful exploration.
If you found this post interesting, consider sharing it with your community or following me on Mastodon.