How To Get Your Webpage Online: Easy Step by Step Guide

So, you've have just put the finishing touches on your webpage, congratulations! Now you're ready to share your creation with the world wide web. There are a couple of ways to accomplish this, but this guide will focus on how to publish your webpage using the popular hosting provider GitHub. At the end you will also learn how to connect your Google domain to your Github account. Explore the rest of the site to delve deeper into some of the terminology by clicking the hyperlink throughout the article.

Step 1: Create your Github account

Go to "www.gihub.com" and click "Sign" up. This is your hosting provider. Try to keep the username that you choose simple as this will be part of your URL.

Step 2: Choose your repository name

Type in your account name and end with "github.io". Your repository name shoud match your accounts name

Create repositiory Step 2 screenshot part 1

Step 3: Add files

Click "add file" drop down and choose "upload files". You can upload individual files or you can click and drag your entire folder containing her html, CSS, images, etc. Click here for an alternative option to upload your files.

Step 4: Confirm upload to web

Copy and paste your repository name ending in "github.io". If it doesn't show up the first time, wait a couple of minutes and try again. The end result should look like this:

How to connect your custom Google domain to Github

Before you begin this section, make sure you have purchased a custom domain from Google Domains Most domains will be around 12 dollars, some are significantly more than that. Choose a domain that fits your budget and you will be billed annually. By the end you will have fully functioning webpage accessible on the world wide web.

Step 1: Deploy your website using Github pages.

Open Github pages. Click "Settings" and go to the pages section on the left hand side. Choose main branch. Your Source should read "Deploy from branch" and the Branch section should read Main and (root). The link that presents at the top is your deployed site. Copy and paste the generated URL and save to a note on your desktop.

Step 2: Create your CNAME record

Set up your Custom domain. Type in the name of the domain you purchased. You will likely get an error that says that your site is not configured properly. This is okay. Click your repository name in the top left corner. This will take you to the "Code" section of your repository. You will find a CNAME file that was created. Click the CNAME link an you will see a line of code that is your domain. This is how your computer interally links between your domain and your github page. Now open Google Domains.

Step 3: Configure your DNS

Now on Google Domains you will provide the directions that will route future visitors to you website hosted on Github. Click on your purchased domain name. Go to DNS on the left hand side. You will find four columns titled "Host name", "Type", "TTL", and "Data". You will only need to update "Type" and "Data" sections.

Step 4: Add 'A' and 'CNAME' records

Use your Google search engine and type "Manage a custom domain for your Github pages site" or click here. Scroll about halfway down the page to step 5 of the section titled "Configuring an apex domain". Copy and paste the four listed IP addresses into the "Data" section. Make sure your "Type" section is changed to 'A'. Click "Add more to this record" to populate additional empty boxes.

Return to settings section in Github and go to "pages". You should now see your domain name following "Your site is live at...". Your last and final step is to wait for your certificate to proprogate which may take up to one hour.