codepen to deploy

When I started thinking about building a site for The Signs of Austin, I gave myself a challenge: no Photoshop. For the first time ever, I wanted to build something completely in code. As it turns out, CodePen ended up being the perfect solution.


To start, I knew I wanted the site to resemble a full-page magazine spread with big punches of color. I wanted the the commentary to be short, yet interesting (“snackable content” as my friend Benson likes to say). Rather than opening up Photoshop or even getting out a pen and paper, I started building the site in CodePen. It’s such a gratifying tool because it offers you instant feedback. You immediately know whether or not the line of code you just wrote works. I spent about a week getting everything just how I wanted it. There was a lot of ghetto code to address, but I knew I could get my co-workers to help me tidy that up later. The most important thing initially was to get a working prototype built.


During the next phase of my build, I discovered another valuable use for CodePen: collaboration. My coding skills are average at best, but I’m fortunate to work with Trent and Dave. I leaned on them to make sure I didn’t embarrass myself. First, I sent Trent a private CodePen url. The next day he sent back a forked CodePen with a few comments and additions. I spent the following afternoon studying his changes and making some edits of my own. Having his comments in code next to my own made it really easy to understand what I did wrong and how I could improve. We spent an hour or so on Skype going over fixes, and I was ready to deploy.


Before deployment I needed to figure out a simple way to publish new posts. Dave quickly recommended that I try Jekyll. I’ll be honest… Jekyll scared the shit out of me. It was an unknown, and it involved terminal commands. After reading a few blog posts and the documentation, Trent helped me get it up and running, and I was in Terminal controlling my site that same day. And creating new posts? I write a document in markdown, drop it in a _posts folder, and Jekyll does the rest. It’s crazy easy.


The last piece of the puzzle was figuring out where to host the site. We’re pretty careful with our Paravel servers, and I wanted the Signs of Austin to have it’s own place. Dave recommended GitHub Pages, and again, because it was an unknown it made me a little nervous. That nervousness quickly went away when I followed two steps to get my domain redirected and I had a live, working site I could share with the world.

My biggest takeaway from the whole process is this: don’t be scared to get outside of your comfort zone. If you’re afraid of coding and deploying your own site, don’t be. There are so many resources out there to help you along the way. Get in CodePen and start experimenting. Put something up on GitHub and see how it works. After all, practice makes perfect.