Static Site Hosting with Github Pages, Namecheap, and ACM

Static Site Hosting with Github Pages, Namecheap, and ACM

Host static websites with a custom domain and free SSL certificate

Ganesh Kumar Marimuthu's photo
Ganesh Kumar Marimuthu
·

3 min read

Photo by HalGatewood.com on Unsplash

Hello everyone. In this article, we will host my personal portfolio site using Github Pages, map a custom domain name and add a free SSL certificate.

Prerequisites

Setup Github Pages

  1. Login into Github.

  2. Create a new repository with the name .github.io

  3. Push your website code to the repository. It should have an index.html file in the root directory.

website folder structurewebsite folder structure

  1. Click the Settings tab inside the repository and scroll down to the Github Pages section.

5.In the Source option, select the branch as master and select the folder as / (root).

  1. In the Custom domain, enter the name of the domain that is purchased from Namecheap. In this case, I added the domain **www.ganeshkumarm.me** that I purchased from Namecheap.

  2. Check the option Enforce HTTPS.

  3. Don’t worry If you are seeing any error messages related to HTTPS setup. We will fix it later.

Github Pages ConfigurationGithub Pages Configuration

  1. After adding the custom domain, a new file named CNAME will be added to the repository. The CNAME file contains the custom domain name (If the custom domain name does not have the www prefix, please add it).

  2. Now you can test if the site is working by opening https://<github_username>.github.io

Namecheap DNS Configuration

Add Redirect Domain

  1. Go to the Namecheap Domain Dashboard and click the MANAGE.

  2. Under the Domain tab, go to the REDIRECT DOMAIN section.

  3. Click ADD REDIRECT and add the below entry with the domain name. Source URL - yourdomain.com Destination URL - https://www.yourdomain.com

  4. Click ADD WILDCARD REDIRECT and add the below entry with the domain name. Source URL - Wildcard Redirect Destination URL - https://www.yourdomain.com

Redirect DomainRedirect Domain

Add Redirect Email

  1. Go to the REDIRECT EMAIL section and click ADD FORWARDER.

  2. Add a redirect email entry with the email id Alias - admin Forward to -

Redirect EmailRedirect Email

Enable Email Forwarding

  1. Navigate to the Advanced DNS tab and go to the MAIL SETTINGS section.

  2. Select Email Forwarding from the drop-down and add the below entry. Type - TXT Record Host - @ Value - v=spf1 include:spf.efwd.registrar-servers.com ~all TTL - 30 min

Email ForwardingEmail Forwarding

Add CNAME and A Records

  1. Navigate to the Advanced DNS tab and add the below entries by clicking ADD NEW RECORD button.

  2. Add the below CNAME and A records.

Add CNAME and A RecordsAdd CNAME and A Records

Request SSL Certificate via AWS Certificate Manager (ACM)

  1. Login to AWS Admin Console and choose the service **Certificate Manager.**

  2. Click Get Started under Provision certificates.

  3. Choose Request a public certificate and click Request a certificate.

  4. In the Domain name text box enter *.domainname.com and click Next.

Domain NameDomain Name

  1. Choose Email validation and click Next.

Email ValidationEmail Validation

  1. Click Review and then click Confirm and request.

  2. Now your certificate will be in Pending status and you will get a mail from Amazon Certificates asking for approval.

  3. You can click the link in the email and approve it.

Note

Usually, the DNS propagation may take 24 - 48 hours to get reflected. Until then the site will not be working.

Also, AWS Certificate will take 30 mins - 1 hr to get reflected. Until then the https will not be working.

Thank you 🤘

To know more about me, visit **ganeshkumarm.me**