The following is an annotated transcript of a screencast demonstrating editing using GitHub Pages.

Hello there, in this short recording I’m going to show how to edit a page on a GitHub Pages website.

So at the moment I’m looking at this poster website in my web browser, and we can see that it’s presented quite nicely, with a coloured heading [scrolls down] and we have some navigation down at the bottom, connecting the pages together. [clicks link marked “Why do this”] And we can move between those pages, so here’s the second pag of the poster.

Now if I scroll to the bottom of the page and click on the “source code” link, this opens up GitHub where the files that make this website are hosted. And we can see a list of files, and comments describing recent changes to those files, and when those changes were made. And if I click on the link labelled “poster”, we can look at the files that make up the poster.

We can see that there are a number of files with the file extension “md” indicating “markdown”, numbered 0 to 6. And if I click on number 6 [“6-presentation.md”] then this is the final part of the poster, with the link to the conference. And we can see a preview of what the page looks like, without all the navigation around it, just the actual content of the page. And we can see that there’s a table at the top with the title “Find out more…” and “poster_nav” “true” indicating that it should appear in the navigation.

And we can see the contents of the page, so there are some headings, and a link as well. If I click the “Raw” button I can see the text that actually this page is made from. And it’s very simple formatting, we have at the top, “title” and “poster_nav” again, with just a colon between the keyword and the data.

And then we have headings that are indicated just by putting two hashes at the front of them, and we can see that links are constructed using text in square brackets and the web address in round brackets.

Now if I click “Back” and then click on the pencil icon [“Edit this page”] we can actually edit this file through the web browser. So if I decide that rather than being an experiment in OER creation, it’s an adventure, I can change the text to “adventure”. This is currently displaying as plain text, but I can click “Preview changes” and see the page content as it’s going to look. Changes are indicated so we have “experiment” which now has a line through it, and the word “adventure” has been added with a slight green background, to indicate the change.

And if I am happy with this, I can “commit” this and add it to the history of the page, so I will type “Reword adventure” [in the “Commit changes” box] - (laughs) it’s sometimes difficult to think of a good commit message. And click “Commit changes” … and that has been saved, and if I click on the “History” button, we can see a new entry [in the History list] that shows what’s been changed. And that’s basically how you change these pages.

And if we go back to the website now, and if I reload the page - actually if I navigate to the final page [clicks “Find out more…”] we can see that it’s already updated [the page reflects the new “adventure” text].

Return to screencast