How To Host Website On Github With Custom Domain

Configuring A Custom Domain For Your Github Pages Site

You can customize the domain name of your GitHub Pages site from the default, like < username> .github.io, to a domain that you own. It supports subdomains and apex domains . You can set up either or both types of custom domains for your site. It is recommended that you always use a www subdomain, even if youll also use an apex domain.

How To Enable Ssl Encryption In Github Pages

HTTP is an unsafe way of managing user requests on your website. Anyone with malicious intent and sound technical knowledge can intercept the interactions between the user and your website. On the other hand, HTTPS gives all your visitors a much more secure browsing session. GitHub Pages offer free HTTPS encryption, and heres how you can avail it:

Scroll to the Pages section in the repository.

You should see the Enforce HTTPS option at the end of the window. The SSL encryption should go live as soon as you tick the Enforce HTTPS checkbox.

In case if you find the Enforce HTTPS option unavailable for your domain, you can enable SSL encryption using the steps below:

Step 1: Log in to your Namecheap account and go to the Domain List section.

Step 2:Now navigate to Manage Domain and subsequently to the Advanced DNS section.

You should see some existing CNAME and A records.

Follow the trend until you have 4 A Records up to IP Address 185.199.111.153.

Remove all the previous A Records.

Step 3: Next up, add a CNAME Record with Host as www and Value as your GitHub username github io.

Remove the previous CNAME Records. In the end, your DNS settings should have 4 A Records and 1 CNAME Record.

Step 4: Now go to the GitHub pages in the Settings section. The Enforce HTTPS option should now be available for your domain.

Create A Static Website

Create a custom blog theme with Hexo.jsHexo.js is an awesome blogging platform. If you have ever used Ruby’s Jekyl it is like that but made of javascript! Itm.dotdev.coYou can do some really fancy stuff with this. I wrote a separate post about how to Create a custom blog theme with Hexo.js. For the purposes of this tutorial we’ll Keep It Short and Simple by deploying a “hello world” HTML site.

$ mkdir YOUR_GITHUB_USERNAME.github.io$ cd YOUR_GITHUB_USERNAME.github.io$ touch index.html

Then make you’re super awesome website. Paste the following into index.html. If you are feeling adventurous you could paste some of the sites from HTML5 UP. It’s your website so I’ll leave that up to you!

< !DOCTYPE html> < html> < head> < title> Connor's Website< /title> < /head> < body> < h1> Hello Internet!< /h1> < p> This is a paragraph.< /p> < script> alert < /script> < /body> < /html> 

My github username is connor11528 so my github repo is connor11528.github.io.Create a git repo and commit your code:

$ git init$ git add -A$ git commit -m 'initial commit'$ git statusOn branch masternothing to commit, working tree clean

Recommended Reading: Shopify Transfer Domain

Setting Up Custom Domain

If you own a domain, you can setup your Github Pages website to use that instead of the one Github generates for you. In my case, I own my comains through Google Domains. I will be providing a TLDR summary for setting up your custom domain, but if you want more information Github provides useful documentation here.

For this example, I own the domain d3isme.com. So I setup the following record in my Google Domains setting:

Once you have this record properly created, you will now need to revisit your Github Pages settings and add your Custom domain. For this, I will display the settings that I have for a separate repo:

Once your custom domain is properly setup, you should see a message from Github mentioning that your site is published like above. This setting may take some time to fully take affect after you added your custom record to your domain.

Using Custom Domain For Github Pages

Recently I decided to host my personal portfolio site using GitHub pages. Even though they have very detailed instruction on how to setup a custom domain, I found it cumbersome to get to the right information.

Here are 2 key steps to setup your GitHub pages enabled project to use your custom domain.

Read Also: Io Domain Name Meaning

How To Register Your Custom Domain Using Namecheap

I assume you have got your GitHub Education account up and running. The following steps involve using Namecheap to register your free custom domain and host it through GitHub Pages. Follow these steps to register your preferred domain name:

Step 1: Log in to your GitHub Education account and go to the Benefits section.

You should see a Web Dev Kit and a Virtual Event Kit.

Step 2: Go to the Virtual Event Kit and scroll down to find Namecheap.

GitHub offers a 1-year domain name registration on .me TLD, which you can access by clicking on the Get Access option.

Step 3: The following window will ask you to authorize the connection request from Namecheap to your GitHub account. Authorize Namecheap and proceed to the next step.

You should see a prompt saying, We have successfully verified your student pack with GitHub after successful authorization.

Step 4: Find your preferred domain through the search bar and click Find.

You should see the domain name availability on the next screen. If your domain name is available, you can proceed to buy it for free.

Step 5: Checkout using the GitHub Education email address and select GitHub Pages as your hosting method while proceeding.

After successfully registering your custom domain name and choosing the GitHub Pages as your hosting, Namecheap should automatically create a repository in your GitHub account. This repository is completely empty and only contains a README.md file.

How To Upload Your Startup Website To Github Pages

Contents

GitHub is a platform that offers software developers a place to host their code and manage their software products. Other than offering a place where you can save your code, GitHub offers another service called GitHub Pages that allows you to host a website on their platform for free.

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process and publishes a website. You can use it to host a website about yourself, your organization, or your project.

However, there are some caveats that you should be aware of before deciding to host your Startup website on GitHub Pages:

Recommended Reading: How Much To Buy A Domain Name

Using A Custom Domain With Github Pages

7th August 2020

This blog is part of a series where I document rebuilding a website that relies on HTML, CSS and Bootstrap in React.js using the Next.js framework to improve performance, reduce costs and increase my workflow for future changes.

The finished website : The source code:

Branches For Github Actions

The GitHub Actions used in these instructions pull source content from the main branch and then commit the generated content to the gh-pages branch. This applies regardless of what type of GitHub Pages you are using. This is a clean setup as your Hugo files are stored in one branch and your generated files are published into a separate branch.

Recommended Reading: How To Transfer Squarespace Domain To Shopify

Connecting Your Domain To Github

Now that Github is ready for your custom domain, we’ll connect it using our Quick DNS Config feature. Here’s how:

1

Log in. You should arrive at the Domain Management screen. If you’re already logged in, click on ACCOUNT in the top-right corner and select Domain Management.

2

Locate the domain you wish to update. Click the “Details” button to the far right of your domain, displaying the domain Details area. Then go to the DNS Records section and select “Edit.”

3

On the MANAGE DNS RECORDS pop-up, scroll down till you see our Quick DNS Config section.

4

In the Quick DNS Config section, select the “Github” button. A pop-up will appear asking if you are sure you want to reconfigure your domain’s DNS records. Select the blue “OK” button to continue.

5

You will be redirected to the ADDITIONAL DNS REQUIREMENTS pop-up window. There, you’ll want to create your subdomain CNAME record. In the Host field, enter the subdomain you want. It can be “www” or whatever you wish it to be. For the Answer, replace “USERNAME” with your actual GitHub username. Once is all said and done, you can select the blue “Submit” button to submit.

6

A success message will appear, letting you know that we were able to update your DNS records. You should now see your DNS records successfully updated to the Github Pages DNS under Current Records.

That’s it! Your domain is now linked to Github and should begin resolving worldwide in a few minutes

Configuring An Apex Domain

To set up an apex domain, such as example.com, you must configure a CNAME file in your GitHub Pages repository and at least one ALIAS, ANAME, or A record with your DNS provider.

If you are using an apex domain as your custom domain, we recommend also setting up a www subdomain. If you configure the correct records for each domain type through your DNS provider, GitHub Pages will automatically create redirects between the domains. For example, if you configure www.example.com as the custom domain for your site, and you have GitHub Pages DNS records set up for the apex and www domains, then example.com will redirect to www.example.com. Note that automatic redirects only apply to the www subdomain. Automatic redirects do not apply to any other subdomains, such as blog. For more information, see “Configuring a subdomain.”

185.199.108.153185.199.109.153185.199.110.153185.199.111.153

You May Like: Register Domain Privately

Automate Your Build Process

If your deployment process becomes more difficult by using GitHub Pages, there is really no reason you should do it. This is why I’m including some scripts that you can use to automate your build and deployment processes. I make the following assumptions for these steps, as I can’t cover every scenario out there:

• You’re using a build command to compile production assets
• Your production branch is gh-pages and your source branch is master
• You’re using a “dist” folder that contains all production assets after running your build command

I’m more than happy to help you out if your situation is different than the assumptions I’m making here, just contact me on and I’ll help you out with this step.

To be able to make everything automatic, I’m going to include an NPM package called Husky. Husky is a tool for NPM that enables you to define git hooks right inside of your package.json file. Git hooks are essentially events that are triggered when you interact with Git. For example, when you commit a change, the events pre-commit and post-commit are emitted. Husky allows us to listen for those events and perform certain tasks. For this tutorial we only need pre-commit, so let’s set that up. First, let’s install husky:

npm install --save-dev husky # ORyarn add -D husky

Now, in our package.json file, include the following configuration:

    }}

One last thing that we need to do is add new scripts to your package.json:

    // husky, etc. }

Create / Update Your Github Repository To Be Public

GitHub Pages can be done on private repositories, but for this tutorial, we’ll focus on using a public repository for your website. The only difference between using private and public repositories for this is that you need to have a pro membership in order to use private repositories. If you already have this, you can skip to step 2 and follow along from there.

If this will be a new project for you and you still need to create a repository for your website, make sure to select the public option like displayed below:

If you already have a repository, but it’s a private repository, you can make it public by clicking “Settings” and scrolling down to the danger zone:

Don’t Miss: How Much Do Domains Cost Per Year

How To Configure Dns For Custom Domains On Github Pages

Recently-ish GitHub announced that HTTPS would now work on custom domains with GitHub Pages. This was a great bit of news, because the web is slowly moving towards a HTTPS-only state of being and it’s nice not to be left behind.

Unfortunately for me, for this new feature to work you had to be using either CNAME or ALIAS records to point to your GitHub Pages domain. At the time, I was using A records pointed at the old GitHub Pages servers, which didn’t have the new features enabled. All these terms can be quite confusing if you’re not familiar with DNS, so let’s take a look at some basics.

Hosting Websites Using Github

Github is an online Git Repository hosting service you can use, to host your projects, share your code, contribute to various open source projects and also collaborate with others on a project.

Another awesome feature about GitHub is, you can use it to host your static websites. So, In this tutorial, you will learn how to host fast, secure and reliable static websites on Github for FREE!.

Note: This is a beginner-friendly tutorial. No prior experience of Git or Github is required.

Recommended Reading: Domainnamechecker

About Custom Domain Configuration

Make sure you add your custom domain to your GitHub Pages site before configuring your custom domain with your DNS provider. Configuring your custom domain with your DNS provider without adding your custom domain to GitHub could result in someone else being able to host a site on one of your subdomains.

The dig command, which can be used to verify correct configuration of DNS records, is not included in Windows. Before you can verify that your DNS records are configured correctly, you must install BIND.

Note: DNS changes can take up to 24 hours to propagate.

Build Hugo With Github Action

GitHub executes your software development workflows. Everytime you push your code on the Github repository, Github Actions will build the site automatically.

Create a file in .github/workflows/gh-pages.yml containing the following content :

For more advanced settings actions-hugo and actions-gh-pages.

Don’t Miss: How Much Does It Cost To Register A Domain