Build a Blog Toolbox

February 20, 2016

It’s been about 3 months into this New Year’s resolution and I’ve picked up some pretty dece tools and techniques for building a blog. In this post, we’ll break away from convention and blog about blogging (Yo dawg, I heard you liked blogging…). Here I’ll list and discuss some of the tools and techniques that have come in most handy along the way so far.

In our very first post, we mentioned this post in Smashing Magazine as the most fool-proof way to get a blog off the ground. I maintain that it was the perfect jumping off point and recommend any new blogger who wants to dabble in custom code start with these instructions. And it’s all free!

Once you’ve got that ready, here are some of my favorite blogging toolbox items:

Blogging Toolbox

Tools
Atom
Atom.io Logo
Atom is a great, customizable file editor that I use to organize and edit all of the files associated with the Pretty Dece blog. It cleanly shows me the file structure and highlights code in context so I can easily see what's what. It also comes with lots of fun hackable plug-ins to help you customize it to your liking.
ColorHexa
ColorHexa Logo
ColorHexa dubs itself the color encyclopedia. I use it frequently to convert RGB values to hex values for use in my CSS files to style the blog. It also helps you find complimentary colors to build a nice palette.
Inkscape
Inscape Logo
Inkscape is a free vector graphic editing program that I use to create logos like the Pretty Dece lopsided circuit-smoke house and the little circuit lines at the bottom of each post. Making logos in a vector program is important because it'll allow you to resize the item without worrying about pixelating the image. A paid example of a program like Inkscape is Adobe Illustrator.
Gimp
Gimp Logo
Gimp stands for the GNU Image Manipulation Program. It's a free, open source version of a program like Photoshop (though a little more buggy). For the blog, I use it to edit photos and to create animated gifs out of videos.
fritzing
Fritzing Logo
Fritzing is a very cool open source program for designing circuit schematics and diagrams. I use it to show clean representations of our Arduino projects for the blog. You can also submit your design to then get printed by fritzing, but that's a paid service.
Web Developer Browser Plug-In
This plugin, available on Chrome, Firefox, and Opera, is super useful for testing. I use it to test how the blog will look for people with color-blindness, people who have CSS disabled, and people who may be reading the blog with only screen readers.
Font Awesome
Font Awesome Logo
Font Awesome is a free font of logos and icons. I use it on the blog to create the buttons at the bottom of the page to link to an RSS feed and my Github and LinkedIn accounts. I used it in the row above to create the gear icon!
Google Fonts
Google Logo
Google graciously offers a bunch of nice free fonts to use in any of your web development projects. Just add the reference to the font in your default.html file and you're good to go!
Microsoft PowerPoint
PowerPoint Logo
Ok, this one's not free, but I'm really comfortable using it for rapid prototyping purposes and more complicated graphics. It's not great if you're trying to be a legit designer, but it's easy to use. There are a lot of free alternatives out there as well, and you can probably use Gimp and Inkscape to do all the same things.
Techniques
Run the blog locally before posting
Command Prompt Logo
It's very helpful to see what your blog will look like as you're building it and before you show it to everyone else. You'll need to make sure to follow the directions in the Smashing Magazine post or this Jekyll Quick-Start Guide first. Then I use my Command Prompt (just search of it on your computer) to navigate into my blog directory and then serve it on my local computer. The commands are super basic:
</br> Then you'll use your web browser to go to <a href="http://127.0.0.1:4000" target=\_blank">http://127.0.0.1:4000</a> to check out your blog!
</br> Another option is to use Git Bash instead of Command Prompt.
</br> Fun fact: Jekyll is smart enough to know the date you want your blog posted, and it won't show it even locally if you put a future date on it, so for testing purposes, title your blog with today's date and then change it when you're ready to push it to the world.
Use git for source control and repository
GitHub Logo
This blog is built using the free GitHub Pages feature of GitHub, so it makes sense to use git for source control as well. I downloaded Cygwin for my Windows computer (you won't have to do this if you're using a Mac) and use it to save my blog changes locally and then push them to the master repository when they're dece enough for the world to see! Check out this 15 minute tutorial on how to use git.

To show you how far we’ve come with these tools, here’s a screenshot of the first out-of-the-box iteration of this blog before I began styling it, side-by-side with the prototype I built in PowerPoint for my vision of what I wanted the blog to look like in the end.

Screenshot of unstyled blog
Screenshot of blog prototype

If you’ve been thinking about starting a blog, I hope my toolbox can serve as some inspiration of where to start! What are your favorite tools?

-JMad