L14. Publish with GitHub Pages

Allow approximately 40–60 minutes for setup, plus deployment time, to give your website an internet address. You need the finished index.html and styles.css, access to your email and an internet connection. GitHub stores files in a repository, a project folder with a history of changes. GitHub Pages serves those files as a website. A free account and a public repository are suitable for this learning route. [B204]

Public means other people can read the files. Before uploading, replace the practice email with your own public contact address or remove the link. Do not upload passwords, about-me.txt or your backup folder.

In class

The teacher will follow two local files through to a Pages address. Together, we will distinguish profile settings from repository settings and check the site without signing in.

Create the account and verify email

• Open https://github.com/signup. If you already have an account, choose Sign in and continue at step 3. Otherwise, enter your email in Email, a unique password in Password, an available name in Username, and your country in Your Country/Region. The username will form part of your website address. Complete the verification presented and choose Create account. [B202]
• Open your mailbox, find GitHub’s message and follow the email verification instructions in the message and on the page. If it does not arrive, check Spam and the address you entered. Verify the email before creating the repository. [B201]
• On GitHub, select your profile picture at the upper right, then Settings → Emails. Enable Keep my email addresses private. GitHub will use a service address instead of your personal email for web-based changes. This does not hide an address you put in the HTML yourself. [B203]

Upload the website files

• Open https://github.com/new. Check that Owner is your account. Enter personal-site in Repository name. Choose Public, turn on Add README, then select Create repository. A README describes the project. Adding it when you create the repository also gives you the first commit and initial branch, the main line of saved file versions. [B214]
• On the Code tab, choose Add file → Upload files. Drag index.html and styles.css from File Explorer. Upload those two files, not the enclosing personal-site folder: they must be at the repository’s top level. [B205]
• Enter Add personal website in Commit message. A commit is a saved record of a change. For this repository that you own and use for practice, select Commit directly to the main branch, then Commit changes. If a new branch is selected, the button may say Propose changes; return to saving directly to main. [B205][B212]

Enable Pages

• Open Settings → Pages inside the repository, rather than in your profile settings. Under Build and deployment, choose Source → Deploy from a branch. Select main as the branch and /(root) as the folder, then choose Save. Root means the top level containing index.html. [B206]
• Wait for deployment and refresh the Pages settings. When Visit site appears, open it. A typical address is https://YOUR-USERNAME.github.io/personal-site/. Replace YOUR-USERNAME with your actual username; copying GitHub’s finished link is easier. Changes can take up to ten minutes to publish. [B204][B213]

[[VIS:b5_site_publish]]

• In Chrome or Edge, press Ctrl+Shift+N to open a private window. Paste the website link there and do not sign in to GitHub in that window. Check the heading, menu and appearance. Visitors should be able to view the page without an account.
• For a later edit, change the local file, check it, and repeat Add file → Upload files for that file. Save the commit, wait for deployment, then reload the website. Uploading the same name replaces the corresponding file in the repository.

> [FIX]

> Seeing 404? Check the Code tab: is the file named exactly index.html, without an extra enclosing folder? Then check Pages: main and /(root). If those are correct, open Actions. A red result indicates a deployment failure. Copy its error text to the AI and ask, “Explain this GitHub Pages error and suggest one check.”

Home practice

• Create Documents\AI-practice\publish-plan-home.txt in Notepad. Copy three addresses from their windows: the local file, the repository and the published website.
• Imagine you corrected a heading only in Notepad. Write the steps needed before a visitor can see that change. Do not publish anything again.
• Compare your plan with steps 9–10. It should include uploading the changed file, committing, waiting for deployment and checking the website address. Mark the address you would give a reader.

Self-test

• Which address should a reader use to view the page: file:, github.com or Visit site?
• You corrected a heading in Notepad, but a friend sees the old one. Which steps separate your local edit from publication?
• Why check the website in a private window without signing in to GitHub?

Terms

• Repository: a place holding project files and their change history.
• Commit: a saved set of changes with a short description.
• Deployment: preparing files and making them available at a website address.