A peek under the hood of the website revamp

Under the hood

_Image by riversidetransport under a CC-BY-NC-SA license

I am not a web developer. My HTML is rudimentary at best and you should be very afraid when I start poking at CSS and Javascript. Though things might be a bit prettier than they were, I’m going to take this opportunity to highlight the tools I used to give my website a makeover.

Homepage

For 5 years, I left up a “Coming Soon” webpage with some links to Twitter, LinkedIn, etc. I am the definition of lazy!

BootstrapFor anyone looking to quickly get a webpage up, be it for a homepage or a project page for a personal project, I highly recommend Bootstrap. Originally created by Twitter to help them standardize, Twitter later made Bootstrap open source and it’s been widely adopted and extended. Bootstrap features the latest in web development – it’s grid based, responsive and uses a combination of HTML, CSS and Javascript to help you quickly build web pages.

JetstrapBeing even lazier, I used Jetstrap, a web based interface to build Bootstrap pages. Log in using your favorite service, pick from a couple of default page templates, customize them and Jestrap will take it from there. Pressing download, Jetstrap will give you the HTML, CSS and Javascript in one zip file. Quickly edit the text in the HTML files and you’re ready for deployment.

Bootswatch has created a number of themes for Bootstrap. The homepage is using the Spacelab theme. Pick a theme, save the CSS file, replace the Bootstrap CSS with the new CSS file, and done! Couldn’t be easier.

The social media icons are by Fairhead Creative. They use a combination of SVG icons and CSS to display and are available on Github.

Blog

WordpressWordPress has been powering this blog for almost 10 years. I started with the original b2/cafelog ten years ago, migrating to WordPress months later when WordPress was first released.

The blog theme is a WordPress Twitter Bootstrap theme by 320press. It features sub-themes built on the Bootswatch themes for Bootstrap and I’m using the Spacelabs theme, similar to the homepage. The theme doesn’t feature a header image that I’ve been able to find, so I’ve turned off the hero feature, which allows you to get to the blog content faster. The theme, like the homepage, is responsive, so if you’re viewing on a tablet or a mobile phone, the page will scale to the device you’re viewing it on.

WordPress plugins that are being used:

Tools

GithubGithub is the magic that ties it all together. I try and do everything in Git using source control, making it easier to do development from any computer I might be using. I’ve been using Git for a few years, but I barely scratch the surface with what Git can do. You can find my repositories on Github.

I’ve been a very happy Linode customer for a few years. If you’re in the market for a new webhost, Linode’s Linux virtual private servers are the way to go.

Last, and definitely not least, all of the code was written and edited in Panic’s Coda 2 web editor. A brilliant text / code editor, with a built-in FTP client, terminal, version control support and more, it makes it all too easy.

comments powered by Disqus