Scribd
Upload
21 views6 pages

Github Pages Reference

The document provides a step-by-step guide on how to set up a website using GitHub Pages, which allows users to host HTML, CSS, and JavaScript websites. It details the process of creating a GitHub repository, uploading code, enabling GitHub Pages, and linking a custom domain with DNS records. Additionally, it explains how to activate HTTPS for secure data transmission between the browser and the website.

Uploaded by

munirajradha9676
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views6 pages

Github Pages Reference

The document provides a step-by-step guide on how to set up a website using GitHub Pages, which allows users to host HTML, CSS, and JavaScript websites. It details the process of creating a GitHub repository, uploading code, enabling GitHub Pages, and linking a custom domain with DNS records. Additionally, it explains how to activate HTTPS for secure data transmission between the browser and the website.

Uploaded by

munirajradha9676
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

GitHub Pages Reference

By: supersimple.dev
Video Tutorial: https://youtu.be/p1QU3kLFPdg

GitHub Pages
Lets us put websites created with HTML, CSS, and JavaScript code on the Internet

Overall Process
1. Write your HTML, CSS, and JavaScript code on your computer (as normal)
2. Upload your code to a GitHub repository
3. Turn on GitHub Pages from the repository's settings
That's it!

Step By Step
1. Write the code for your website as normal (make sure your website works when you open the
HTML file in your browser)
2. In your browser, go to "github.com" and sign in

3. Click your icon in the top-right > Click "Your repositories"


(repository = folder that contains all your code)

4. If you already have a repository, open it. Otherwise, on the right side click "New"
4a. When creating a new repository:
● Give it a name (any name is fine)
● Make sure it is "Public" (private repositories need to pay a fee to use GitHub Pages)
● Everything else can be left as default

Upload Your Code


5. Click "Upload files"

New repository: Existing repository:

You can also add "/upload" to the end of the URL:

6. Drag and drop the code you want to upload and click "Commit Changes" at the bottom.
❌ Don't drag the folder containing all your code into GitHub
✅ First open the folder, then select all your code and drag and drop into GitHub

Turn on GitHub Pages


7. In your repository, click "Settings" on the top-right.

8. Click the "Pages" tab on the left.


9. Select Branch: main (or master) and click Save.

10. To visit your GitHub Pages website, enter this URL at the top of your browser:
[your_github_username].github.io/[repository_name]/[file_name].html

If you don't provide an HTML file, GitHub Pages will look for a file called "index.html":
[your_github_username].github.io/[repository_name]

Set up a Domain Name


1. Purchase a domain from a domain registrar (Namecheap, domain.com, Google Domains, etc.)

2. We'll link our domain name to GitHub Pages' IP address. Here's the diagram for reference

IP Address
● Is like a phone number (but for the Internet)
● Any device that connects to the Internet is given an IP address. At home, you connect to the
Internet through a router. In this case, only the router will get an IP address that is public
● A device can communicate with another device across the Internet using an IP address
IPv4 example: 185.199.108.153
IPv6 example: 2606:50c0:8000::153

3. Find GitHub Pages IP address. Go to https://mxtoolbox.com/DNSLookup.aspx and search for


"[your_github_username].github.io"

Create DNS Records


DNS records let us link IP addresses (and other information) to a domain name.

4. Log into your domain registrar > open the "Settings" for your domain.
If you're not using Namecheap, see https://supersimple.dev/infrastructure/dns-records
In Namecheap:
● Go to your Dashboard > click "Domain List" on the left
● Find your domain > click "Manage" on the right > click "Advanced DNS"
● Look for this table (that lets us create DNS records):

5. Create an A Record = links a domain name to an IP address

● 1st value, select "A Record"


● 2nd value is the subdomain, which is the part of a URL in front of a domain name (like
subdomain.mywebsite.com). Namecheap, use "@". Other domain registrars, leave it blank
● 3rd value, enter an IP address found in step 3
● 4th value is TTL = time to live (how long DNS records will live before being refreshed).
Namecheap, select "5 min". Other domain registrars, enter "300" (300 seconds)

Create a DNS A Record for each IP address from step 3. Here's the end result:
6. Create a CNAME Record = links a domain name to another domain name.
Set up the subdomain "www" (www.mywebsite.com). This is recommended by GitHub Pages.

● 1st value, select "CNAME Record"


● 2nd value, enter "www"
● 3rd value, enter your GitHub Pages domain name = [your_github_username].github.io
● 4th value, enter "5 min" or "300"

Here's the end result:

Summary
A Record = mywebsite.com -> ip address
CNAME Record = subdomain.mywebsite.com -> domain name

Note
A CNAME Record can only be used when there is a subdomain. Some registrars offer an ALIAS
Record which can link the base domain name ("mywebsite.com") to another domain.
Set up Domain Name in GitHub Pages
1. Go to the GitHub repository for your website

2. Click "Settings" on the right > click "Pages" on the left

3. In the "Custom domain" section, enter your domain name. Click Save

4. Wait for GitHub's process to finish. Then check the box to activate HTTPS

HTTPS encrypts all data flowing between your browser and your website.

5. Finally visit your website by entering in the top of your browser:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy