Lets Make an Edit
In the last section of adding hosting to our website we saw that the 404.html page needed to be updated.
Though now any commit made to the Main branch of our repository will cause our website to update. So we need a "working area" for making updates to this file without it causing an auto update to the website. To do this we are going to create a Dev Branch to work in.
Creating an Issue
We do this by creating an "Issue" first on your GitHub repository page by clicking the Issues tab in the menu
If you do not see Issues on the menu between "Code" and "Pull Requests" you will need to turn them on by clicking on Settings then scroll down the page to "Features" and tick the Issues checkbox. You should now see "Issues" appear in the top menu, you can now click on the Issues tab and continue with the following steps
Next click on the green New Issue button
Enter a title (e.g 404 needs updating)
Enter description of task (e.g We need to update the 404 to have our site details)
Then click Create or press Ctrl + Enter
Creating a Branch
Your newly raised issue will automatically open (if it does not go to issues and click on your newly raised issue)
Now on the right hand side you will see "Development" click the Create a branch for this issue or link a pull request
You will see a pop up window called "Create a branch for this issue" which has Branch Name, Repository Destination, Branch source and What's Next? Checkout locally selected. You can accept the default options or update them if you want to
Then click the green Create branch button
You will then see a pop up window titled "Checkout in your local repository" which you can close, by clicking the X in the top corner
Next click the < > Code from the navigation menu and go to the code view page of your repository on GitHub.
We are now going to click the grey Main ▼ branch dropdown button, there you will see a list of your branches
Select your newly created branch by clicking on it and the screen will now change to that branch
Editing the Branch
We can now open our github.dev web-editor to start making updates to our file by clicking either . or Shift ↑ + > This will open the editor on our new branch
Or you could open a Codespace if you prefer instead of the github.dev web-editor
We can now freely change and update any text, image paths and links that we need to. Then when we are happy with our changes we can stage and commit the file
Editing the 404
So let's make the changes to our 404.html page, hopefully the changes we are about to make are familiar to you now as we have previously done them on the other pages.
First click on and open the 404.html file in the editor
<head> Section
In here we are going to change the <title> plus contents of the <meta name="description" and <meta name="author" to your website & name details. Then change the 404 page in the title and description to say Error Page
<header> Section
We first need to change the <h1> to the same website name on the home page
Next add the <nav> under the <h1> like we added to About & Home page, though on this page we need to prefix the URL with your repository name like this <meta href="/repository name/url", and neither of the list items need to be active
If you added a logo to your other pages above the <h1> you will need to do the same on this page too, but again it will need prefixing with your repository name <img src="/repository name/img/....."
<main> Section
We only need to make a small change in this section to the homepage link, changing the details in the href="/repository name/" to your repository name
<footer> Section
The first area we come to in the footer is the "social_icons" which will only need the href="" changing if you have previously added links to your own social media accounts. Otherwise you can leave these as dummy links but you will need to prefix the img with your repository name <img src="/repository name/img/....."
Next area is "contact_details" which you need to change to whatever details you have added on the Home & About pages
Lastly is the "copyrights" area you need to make sure the <time> has the correct year in both places, then change the name details to yours
Don't forget to stage and commit your changes before proceeding!!
We now want to go back to our main GitHub repository page by clicking on the burger menu and selecting Go to repository
Making a Pull Request
You will see a yellow bar saying "[your branch name] had recent pushes [number] minutes ago" and a green Compare & pull request button
If we click this button we are taken to a page called "Comparing changes"
Then we need to click the Base dropdown and make sure we select the repository name that we setup hosting on
We can now give our pull request a name and description (like us you may find your commit message in the name box which you can leave as the name or change), now click the green Pull request button
Which will move us to the "Pull request" page
You can now see the title and description that we set with a green open button on the right, then below this is a box that says "This branch has not been deployed"
If we keep reading down the page you will come to a ✓ and "This branch has no conflicts with the base branch" with a green "Merge pull request" button which if you click the arrow dropdown you will see some options:
- Create a merge commit (default)
- Squash and merge
- Rebase and merge
For this pull request we are going to go with the default option of "Create a merge commit"
These options are about how the working branch commit history is treated when it is combined to the Main branch. The option we are using will keep the working branch commits and place them into the Main branch commit history. This makes it easier to look back to see what has happened. We will look at the other options at a later date.
Now click the Merge pull request
The button will change to say Confirm merge which we will click again
The box border and icon will now change colour to purple and inside say "Pull request successfully merged and closed" with a Delete branch button, click this button
Now if we go back to the < > Code page of our repository by clicking on it in the top menu
We can now see from the grey branch button that we are on the Main branch again and if you click and look at its pulldown options you will see that the 404 branch has now gone
Also in the top section of our repository list we can see that the Merge pull request has been carried out
If we now go to the Issues page (from the top menu) we see our Issue has been closed
And if we click on the word Closed then on the Issue name we will see the details of what happened
Reviewing Our Edits
Once we have merged our working branch into our main branch it will cause the GitHub Action to run which will update our website with the new changes
Now if we look at the Actions page (from the top menu) we see that our action has run again to update our website
Remember you can also view your updated page by going to the new URL as we did before when we added hosting in the Set up GitHub Pages section
A Quick Recap
So to recap what we have just done
- Raised an Issue - To track the task we need to do
- Created a linked Issue to Branch
- Updated a Page & Committed
- Raised a Pull Request
- Merged a Pull Request
- GitHub Actions republished our website
Here we have introduced you to a workflow that created a branch. Though there are a number of ways to create branches on GitHub.com, in Editors and Command line tools and we will cover a few of these other ways over time in other tutorials.
We hope you have enjoyed the tutorials and have found them useful.
Please feel free to let us know what you liked and anything you did not.
What would you like to learn more about in the future?
Let us know on a GitHub Issue or by our Contact form Thank you
Page Last Edited: