Edit GitHub Pages

Here’s a quick guide to editing GitHub Pages. Not familiar with GitHub Pages? It’s a totally free service provided by GitHub where you can freely host HTML pages. Read more about it here: https://pages.github.com/

The Details

GitHub uses a separate branch for those pages so you can access the gh-pages branch like so:

In your GitHub repo, click to open the Branches drop-down.

Select gh-pages.

You’ll be switched over to the gh-pages branch, where you should see the files served publicly such as the index.html file.

Click on the index.html file to open it, then click Edit (pencil) icon to make changes.

Once you’re done with editing, scroll to the bottom of the page and you’ll see a Commit changes button. To save the changes, press that button and optionally leave a comment about the changes.

That’s it!

You should see the change(s) reflected when viewing the page in your browser, through the page’s github.io url (or via a custom domain if you’ve set configured that).

The command-line method

Of course, if you’re more comfortable editing through your command-line or linux terminal, it’s very simple. If you haven’t already, clone your repo locally. For example, you can clone my Nibble project like so:

git clone https://github.com/Ugotsta/nibble.git

Once that’s cloned, go to the project folder:

cd nibble

Then access the gh-pages branch using the git-checkout command like so:

git checkout gh-pages

You’ll then be able to see and edit the files from the gh-pages branch. You can make your changes to the index.html file, like so (using Vim) for example:

vim index.html

You can make the changes to the file, then add those files as part of a commit using git add:

git add .

Commit those changes with git-commit:

git commit

The commit process will request a comment, to be added to the changelog. On linux systems, usually Nano is used for the comments.

When using Nano:

1. Type any comments you’d like to add.
2. Press CTRL-O to save.
3. To select and overwrite the file you’re viewing, press ENTER.
4. Then CTRL-X to return to your terminal prompt.

Now you can push those changes back to the repository with git-push:

git push

that’s it for the command-line!

Here’s a quick syntax-colored summary of those commands:

git clone https://github.com/Ugotsta/nibble.git
cd nibble
git checkout gh-pages
vim index.html
git add .
git commit
git push

I hope that helps, feel free to ask if anything’s unclear. 🙂

Host a blog for free with GitHub and HubPress

For those who don’t know, GitHub is code repositor service that’s totally free for publicly hosted code projects. And they’ve got this service called GitHub Pages where you can host an HTML based website for free. Normally, you’d have to manage content there yourself, by code. But HubPress lets you manage blog posts using a JavaScript-driven admin interface.

Here’s a quick installation video:

HubPress is currently very simple, allowing you to create and edit posts from the interface. It’s open source though, so it’s possible to extend it. The app uses Asciidoctor for editing posts and Handlebars for templating, so it should be able to use existing Handlebars-based themes. I’ll try and cover more details on those through separate videos.

You’ll also find extensive instructions at their repo: https://github.com/HubPress/hubpress.io

 

Have fun with it!