Websites for Dummies

Or, how I learned to love bootstrap

Posted by mh on Feb 19, 2016

So, this is actually my second website that I've built, but, for fear of personal safety, I won't be linking the first one.

The biggest difference between this one and the last one is that the last one was a single page template.To save everybody from one super long page, I decided to set this one up with a functioning nav bar, and multiple pages. Immediately, this presented a few issues that I hadn't addressed before, namely

  • navigation,
  • page hierarchy, and
  • cross-page consistency.

Before I get into those, I need to gush a little about the free tools that allowed me to even start on this project. Firstly, Bootstrap itself is marvelous, and has allowed me to create sites that work across all sorts of devices off-the-shelf. Secondly, Font Awesome has all the arrows, icons, buttons, etc., you would ever need.

Navigation

Navigation was the easiest to deal with, as I had built internal hyperlinks before (e.g., index.html#section-2). Thankfully, the bootstrap template that I found already had a (mostly) functioning NavBar at the top, which I repurposed. Given that this is a blog, I decided to add dropdowns to make everything more easily accessible.

I would also like to give a "Thank You" to the startbootstrap.com team, as I played with a few different templates before running into dealbreakers for each. Indeed, there's a graveyard of false starts (all with good looking NavBars), so thanks. I should have just started with that one.

With regards to the dropdowns themselves, this got a little complicated given my relative inexperience with CSS. The big issue here was that the white background in the dropdown made the white text completely unreadable. So, changing only the text in the dropdown to black took quite a while. I was poking at the theme css for an embarassingly long amount of time before I realized that I was editing the legible* one, and the site was reading the minified one (smaller file with all spaces removed, so loads faster, but far harder to edit). Didn't take too long after that.

*"Legible" used generously

Page Hierarchy

Likewise, I'd never had to develop a structure for subfolders for various pages of a website. I went with a date-based system (e.g., the "/2016/02/19/" in the URL), but quickly began running into tons of missed links and dropped pages, given that I was using exclusively relative references (e.g., "index.html" vs. "www.grayduckllc.com/index.html"). This also killed all my formatting once I started creating the folders, as I didn't have local copies of the CSS files.

Moving to absolute references wasn't really an option, as that would require me to push all my changes to the web before they would take place, and would kill my "in-progress" local copy.

I looked into using symbolic links to map each folder (I'd previously dabbled with this when I installed a 2nd HDD on my 2008 aluminum MacBook, so iTunes and other folders could keep their files on the SSD (dubbed "Quickness"), while keeping my music on the new HDD ("Thickness")), but decided against it given that it can make recursive loops when listing folders.

Apparently a leading slash (e.g., "/index.html") starts to the root folder, but I couldn't figure out how to marry that with my local, editable copy. Thankfully, a friend saved me by mentioning that python has a super simple web server, appropriately named SimpleHTTPServer, so running

python -m SimpleHTTPServer
in my local copy gives me a fully functional local version at localhost:8000. Problem solved.

Cross-page consistency

Lastly, I now have to keep multiple pages up to date. Since I'm not using any backend system for content management (though will definitely look into it as I write more), I was nervous about updating 10 pages every time I wrote a new blog post. I thought about scripting it with a cross-folder "find-replace", but got a little scared by that proposition.

To be honest, I'm not sure what the proper solution is here. The fix I've gone with is maintaining a central "navbar.html" file (and footer), and loading that with Javascript (JQuery?) at the top of each page. It seems to work, but obviously fails if javascript isn't enabled. If you do know the right answer, feel free to email me, and I'll plug it in.

Anyway, enjoy my blog. Sorry this post doesn't have any tools attached, just figured I'd chronicle my misadventures in getting the site made. As always, lemme know if it helps, or email me what I did wrong.

Parting Thoughts

  • I figure it's best practice to list open issues and try to jot down a few next steps, so I'll be including this on all my posts
  • I need to take some time to replace all the pictures from the template, but haven't come up with a unifying theme. Just gonna browse unsplash.com to find those. Expect nature
  • Install a tool to manage my content so I can just write it in markup and not mess with the HTML directly
  • Write a random function to pull up a random post
  • Change the CSS for Parting Thoughts to turn them into checklists with checkable boxes