Week 01 : Building a Website from Scratch(ish)

I knew a lot had changed since I built my own website using the Geocities platform in the '90s. Back then, I didn't know about CSS or Javascript (did they exist???). Animated GIF's were used un-ironically.

I had very little idea of what was out there in terms of site builders or text editors, but I knew what I was hoping to find:

  • Mac-Compatible
  • Simple interface
  • Clean code
  • Stores files locally
  • Free (Preferably)

After reading several comparison articles on different text editors, I decided I would try Brackets, which is a free, open-source text editor because it is well supported by the community and offers a reliable live preview functionality.

As soon as I opened Brackets, the introduction to the platform and the how-to's were all written in HTML code on the Index.html file, as a sample, and there was a sample CSS file as well. This was very helpful in getting me started. I referenced W3C Schools on functionality that were not included in the sample code, such as applying an image into the header and changing the font family.

After 2-3 hours, I had a template that I am happy with and confidence that I will be able to update my weekly assignments with ease using this platform.

Screen capture of Brackets in Action

Next, I wanted to clean the code up just a little. My nav was coded on every single page, and I wanted to know how to have the nav exist in one place so that any edits I make to the nav persist on all pages of my site.

Craig, from my Working Group posted a link to a piece of code on GitHub, called "brace tags", which is a bit of hack, but for a simple site like mine, it's perfect.

I had never used my computer's Terminal before (!!!), but luckily Ben was on Google Hangouts and told me how to search for it on my computer. It was quite cool giving a command to my computer and having it do things. I was able to add the brace tags to my site in a a few minutes.

After 2 months, I decided up update the design of my website using an HTML5 template found on HTML5 Up, which offers some really nice HTML5 templates for free using a Creative Commons License.. I downloaded the template, tweaked the design, and then copied my existing content into the new pages. I'm really pleased with the aesthetic of the design and hope to continue using this website to document my adventures in digital fabrication after Fab Academy is completed.

How to Push Mercurial Updates

The first time I made a push to the archive was a bit intense. So much could go wrong! I didn't have any experience with version control platforms before, even though many of my friends use Github.

The way we did it at Fab Lab Wellington, every week, someone new had to do the push. If it was your first time, it would be the responsibility of the previous person to teach you. This was really effective in getting everyone to do a push - and in teaching how to do it, deepen their own understanding of the process.

Craig was my teacher, and here are my notes from that first push. I have made many other pushes in the last 6 months.

  • Step 1: Play this song so everyone knows what time it is
  • Salt-N-Pepa - Push It from Golden Era Videos on Vimeo.

  • Step 2: Reboot computer in Ubuntu
  • Step 3: Pull everyone’s site files on to the desktop, delete the Hidden Files from Mac user folders (check all folders)
  • Step 4: cd ~/Desktop/Archive
  • Step 5: hg pull
  • Step 6: Wait for files to upload
  • Step 7: hg update (if there were changes - skip if no changes)
  • Step 8: Open Archive folder on desktop and your own folder, delete everything in the file, move new files into folder
  • Step 9: hg addremove
  • Step 10: Check for weird characters or files starting with symbols - check to make sure the right files were added and removed
  • Step 11: hg commit -m [enter descriptive message re: push]
  • Step 12: While we were doing stuff, the site was changed, so we have to : hg pull (always) and then : hg merge (to deal with errors - read errors first before doing anything)
  • Step 13: hg push
  • Step 14: hg serve (to check URL - look at merge tracks)