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 and merging a git branch diagram

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

rubber duck icon

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 Burger Menu icon 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 Github actions icon 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: