This week, I learned what Git really is, how to use it via the command line, and forked this lovely site to make this, my first Jekyll site! I was exceedingly lucky to have guidance throughout from some very clever, and patient, people.

In part to help me remember things I learned, and in part because part of me hopes one day I'll look back on this first week coding with nostalgic fondness in years to come, I wanted to write down a few things I learned.

First; the very basics. I learned what makes Git different to other Version Control Systems. I'd recommend looking at the diagrams on this page to understand this. We looked at how Git saves data through trees and blobs (incidentally, which stands for Binary Large Object, though I like the name 'blob'), and looked at how each 'commit' generates a unique 40-character object identifier, which you can see by typing 'git-show'.

One thing I found amazing about these identifier numbers is that as they are generated solely from the content of a certain repository, if you happen to have exactly the same content in a repository on two different machines, exactly the same 40-character identifier number is generated! We proved this by copying out two identical text files on two different computers, committing them to a repository, then comparing identifiers. It worked! (Aside: I downloaded the text editor 'Sublime' here to make creating and editing those text files much easier)

Next, some basic git commands to use in the terminal: mkdir, cd and git init, to make a new repository (more detailed instructions here), and also how to add a new file. I also changed the background of the terminal screen to black to make it easier to read, via 'Preferences' in Terminal.

Then; putting it into practice, as I wanted to make a simple website for my new project. As I only needed a holding page, I thought it might be a good time to try using Github pages, which makes it easy to get information from a Github repository onto a website – and, allows people to collaborate very easily – which runs off Jekyll, a “static site generator”, in Ruby. Basically, it makes making websites from text files very easy and really rather beautiful - these are all examples of sites that can be built on Jekyll.

Unfortunately, though much of the online documentation says that you should be able to get “from 0 to blog in 3 minutes!” I ran into a few problems here, as it was my first time using Jekyll, and Ruby, so I didn't have the prerequisites assumed in the quick start up guides. This is where I was very glad to have assistance from people who knew what they were doing – yes, the pains of installation will just happen once, but I would've been completely lost if it hadn't been for help at this point. Pro tip – Homebrew is a good package to install here, too.

Once I had Jekyll and ruby up and running, I set up a basic blog as per the instructions on this page. I picked one of the basic themes from this page and switched themes, after reading the instructions here.

But then some other more beautiful sites came to my attention... including this one, which was done by colleagues of mine for a hackday they ran last year. It's fairly simple, also done using Jekyll and Ruby, and it's on Github. I figured starting with something that looked so good must be easier than starting from scratch (though I have nothing to base this on.)

So – my friend Annabel helped me set up my own version of this, which we put in the repository 'Open Dev Toolkit' on my Github, so it appeared at http://zararah.github.io/opendevtoolkit. We also set up a local server which meant that the site appeared at http://localhost:4000/ in my Chrome window. So, I could make changes 'locally' (just on my machine) without pushing them to git- this made seeing what I'd done a lot easier. I set up the local server by typing “jekyll serve” into the Terminal, and I ended up leaving the command “jekyll serve -w” running constantly in one window of the terminal, and making my changes in git in another window. (The -w part of “jekyll serve-w” makes it automatically regenerate, so you don't need to keep cancelling it (with control-c) and running it again to see changes.

Then, the most satisfying part of this whole thing began – using what I had learned earlier to hack the website!

Here, I quickly established that 'Inspect Element' in Chrome was basically my best friend; seeing something on the site that I wanted to change, highlighting it and clicking 'Inspect Element' allowed me to see where exactly it was in the files, making it much easier to find which part I needed to change.

Once all that was set up, it was fairly simple; for example, the main heading, subheading and basic text was in the index.html file, so I did the following steps to change them to be relevant for my website:

I opened up the project 'opendevtoolkit' with Sublime, so that all of the text files that you can see on Github here were available. Then, I opened 'index.html', edited the relevant text, saved it, and looked what had happened on the local version I was running, at http://localhost:4000/ It had changed! So, as they were good changes, I wanted to keep them and put them online, also known as “pushing them” to Github.

In the terminal, I checked what I'd done by typing 'git-status'. As expected, there were changes there that hadn't been updated online: so next came the following commands:

git add “whichever filename came up when typing git status” (in my case, index.html)

Then, I needed to 'commit' the change:

git commit

...but, other people (and I) need to know what the change was, so here you're asked for a 'commit message' which describes what the change is. The commit message is, I learned, always written in the imperative – so, 'Update heading', for example.

Once that has been added, you're free to 'git push' which pushes the changes online. Ta-da!

Other tips I picked up:

• If you've got text you want to edit on the website, but you're not sure where to find it within all the files, you can do a project wide search in Sublime, with shift+command+F to find out where it is.

• Inspect Element is just great. Really.

• If you're looking for a new font, look at Google Fonts – they're lovely, and really easy to implement (if you don't want to bother having them in a font file, it just takes one line of code which will be generated when you pick your font)

• For creating the background image, I downloaded Inkscape – admittedly not very Mac friendly, but still good, and picked some public domain gear icons from the Noun Project to play around with. (Confession – I then sent it over to my rather clever friend Julia to arrange into a gorgeous looking tile design for me!)

• I used the 'Eye dropper' Chrome plugin to find out where the colours were that I needed to change.

Then, it was just a case of lots of little changes, deleting lots of the content from the EnergyHack page as I didn't need it, updating content, changing the design and font, and there you go. My first Jekyll site!

A huge gigantic thank you to Nick, Stefan, Annabel and Michael for a. getting me started on all of this, b. not giving me all of the answers but showing me how to find them myself, and c. having infinite patience with my questions!