How to Publish an HTML Website with GitHub Pages

TL;DR

Publish an HTML website for free by uploading its files to a public GitHub repository, enabling GitHub Pages in the repository settings, and selecting the publishing branch. Rename the main page to index.html so the site loads from its base address. A purchased custom domain can then be connected through DNS records, with HTTPS encryption available through GitHub Pages.

Transcript

In this lesson, we're going to learn how to put an H T other people can view our website. We're also going to learn how to set like my website.com. To follow along. You just need to know the basics of HTML I have a full course in the description. Usually when we create a website, we create some HTML and one way to view this website is to The proble... Read More

Key Insights

• GitHub Pages is a free service that publishes website files from a public GitHub repository, making it suitable for beginners who want other people to access an HTML and CSS project through the internet.
• A repository is the location where the website's files are stored on GitHub. Free GitHub Pages publishing requires the repository to be public, while the transcript states that choosing a private repository requires a fee.
• The correct upload method is to drag the files and folders inside the project directory into the repository. Uploading the enclosing project folder creates an unnecessary extra folder that can interfere with the expected website structure.
• GitHub Pages publishing is activated from the repository settings by opening the Pages section and selecting the branch that contains the website code. GitHub then processes those files and makes them accessible through a public GitHub Pages address.
• An index.html file is the default page GitHub Pages looks for when a visitor opens a directory without specifying a filename. Renaming the intended main page to index.html allows the website to load directly from its base address.
• Relative file paths work online in the same general way they work on a local computer. If an HTML document references a CSS file inside a particular folder, the uploaded repository must preserve that folder and file structure.
• A custom domain is an easier address for visitors to remember than the default GitHub Pages URL. The process requires registering an available domain through a domain registrar and then linking that domain to the published website.
• A DNS record links a domain name to the IP address of the computer running GitHub's web server. After the record is configured, a browser can resolve the custom domain, contact GitHub's server, request the website files, and display the returned HTML.

Questions & Answers

Q: How do you publish an HTML website with GitHub Pages?

Create or sign in to a GitHub account, make a new public repository, and upload all files and folders from inside the website's project directory. Commit the uploaded files, open the repository settings, select Pages, and choose the branch containing the code. After GitHub finishes processing the project, the website becomes available through the GitHub Pages address shown in the settings.

Q: Why must a GitHub Pages repository be public?

The lesson states that GitHub Pages is free when the website files are stored in a public repository. If the repository is private, a fee is required. When creating the repository for this workflow, select the public option, leave the other setup choices at their defaults, create the repository, and then upload the website files that visitors should be able to access.

Q: Which website files should be uploaded to GitHub?

Upload the complete contents of the folder that contains the website code, including the HTML files, CSS files, images, and any supporting folders used by the pages. Open the project folder first and drag its contents into the repository upload area. Do not upload the enclosing folder itself, because that creates an unnecessary extra directory around the website's expected file structure.

Q: Why does a GitHub Pages website show a not found page?

A not found page can appear when the address does not specify an HTML filename and the repository has no index.html file for GitHub Pages to load automatically. The site may still work if the correct HTML filename is appended to the address. To make the base website address work, rename the intended main HTML page to index.html and allow time for the change to be published.

Q: Why should the main webpage be named index.html?

GitHub Pages looks for index.html when a visitor opens a website directory without including a specific file at the end of the address. Naming the main page index.html lets visitors reach it through the shorter base address. If the main page has another filename, visitors must include that filename unless it is renamed and the updated repository is processed again.

Q: How do CSS files work after a website is published?

CSS files are loaded online through the same relative paths used by the HTML project on the local computer. If the HTML refers to a stylesheet inside a CSS folder, that folder and stylesheet must appear in the same relative location in the repository. Preserving the complete project structure allows GitHub's web server to return the requested supporting files when the browser loads the page.

Q: How do you connect a custom domain to GitHub Pages?

First register an available domain through a domain registrar, then open that domain's settings and find its DNS configuration table. Create the DNS records needed to link the domain to GitHub's server address, and configure the repository to use the custom domain. Once the DNS changes take effect, requests for the domain can reach GitHub's web server and retrieve the published website files.

Q: What are web servers, IP addresses, and DNS records?

A web server is software running on a computer that returns requested files when a browser sends a URL request. An IP address identifies a device on the internet so other devices can contact it. A DNS record connects a readable domain name to an IP address, allowing a browser to find GitHub's server and request the HTML, CSS, and other website files stored there.

Summary & Key Takeaways

• GitHub Pages provides a beginner-friendly way to publish an HTML and CSS project for free. Create or sign in to a GitHub account, make a public repository, upload the contents of the project folder, and commit the files. Upload the contents directly rather than enclosing them in an unnecessary parent folder.

• Publishing is enabled from the repository's Pages settings by selecting the branch containing the website files. GitHub then processes the project and provides a public address based on the account name and repository name. The deployment may take a few moments before the site and later file changes become available online.

• A custom domain requires purchasing an available name from a domain registrar and connecting it to GitHub's server through DNS records. The registrar's DNS settings determine where requests for that domain are sent. The lesson also covers using a www subdomain and enabling free HTTPS SSL encryption for the published website.