Rebranding something personal is hard. In fact, many people push it aside, making excuses about not having enough time. I’m guilty of that. After several failed attempts, I finally put my foot down. It was time to whip this ol’ site back in to shape.

In that spirit, I’ve decided to gather my thoughts here in hopes that it will inspire someone who might be neglecting a site or project they’ve started. I’m not saying this site is finished—it’s always a work in progress. But after going through the process, I feel much better about the current state of affairs around here and more confident about having a modern platform to build upon.

Starting with the basics

On the surface, the old site felt stale. The palette was somewhat interesting, but it definitely lacked character and dimension. It was time to shake things up.

I updated the color palette, giving it a more vibrant, fresh feel. The tones are expansive enough for future flexibility and will make updating pages and posts down the line a snap.

Color Palette

With the palette in place, it was now time to consider typography. I ended up going with Inter UI for the sans-serif, Source Serif Pro for the serif, Unna Italic for quotes, and IBM Plex Mono for the monospaced type. I opted for a bold underline on text links as well, which helps break up the typographic flow (in a good way).

Finally, I brought in other graphic elements to set the tone. Clean, cohesive imagery for blog posts and newsletter sections, as well as little touches like the icons below (thanks Streamline!). These details helped round out the design and bring everything together.

Graphics and icons

The real reason for the rebranding

As with any project, there are always a boatload of reasons for hitting the reset button on a site. After all, it had been a couple of years since I had a) launched the previous version and b) written a blog post of any kind. I could no longer ignore the elephant in the room. I had to ask myself: What the heck is this the purpose of this site? And truth be told, I wasn’t sure.

Here’s the deal. There was stuff I would come across on a daily basis that I wanted to share. Sometimes I wanted to give my opinion on the thing I found. Or sometimes it was just as simple as having a place to shout, “Hey, look at this thing I found!”. The 45royale blog didn’t seem like the appropriate place for that, so I ended up wavering back and forth on what I should do.

“I failed to pick a direction and this site sat in limbo for a long time. A classic case of paralysis by analysis.”

But the old site didn’t work because it boxed me in. More specifically, the layout wasn’t conducive to adding new content. No bueno. This time around I wanted apply what I learned in the recent 45royale build and take a new approach. And boy is this a lot better.

Using modern apps, frameworks, and tools

There are so many great tools available for front-end web development these days. Some people have their preferences, but I figured I’d document what I used in case someone would like to follow in my footsteps.

WordPress & Bootstrap 4

As some of you may know, I’m a big fan of WordPress. So it was only natural to go with the platform that runs 30% of the internet. I also decided I wanted a framework to make the build more modular and easier to expand upon in the future. I looked at a lot of frameworks when we were deciding what to use for the new 45royale build. We ultimately chose Bootstrap 4 for it’s versatility and legendary documentation. Using it on this build was a no brainer.

Local by Flywheel

I used to be a hardcore MAMP user, but Local has taken it’s place recently. I love the interface and how easy it is to spin up new production environments. Like MAMP, it’s a free download and comes with some great features out of the box. It’s definitely changed the way I develop on my local machine.

CodeKit

If you haven’t checked out CodeKit yet, do yourself a favor and give it a go. I used it for all my code pre-processing, image optimization, and more. There are so many other things you can tweak with your environment, it’s incredible. Pay the money—it’s worth it.

GitHub

Now that I had chosen the tech, I needed a way to keep things synced between my local build and the production server. I chose to keep everything neat and organized in a GitHub repository. If you want to know how to get started with your own repository, I wrote a step-by-step article about using GitHub and WordPress together on the 45royale blog.

Pulling it all together. Literally.

So now that I’m keeping tabs on my site in a Github repo, making changes is pretty simple. I can make updates to my local environment, push them to the Github repo with their newly redesigned app, and then do a git pull on the theme directory. Voilà, updates are live on the production site.

By the way, I wrote an in-depth article on how to set up a modern local environment over on the 45royale blog. I walk you through all the tools and apps above in detail so you can start building WordPress sites like this one.

In conclusion

I hope you found this interesting and who knows, maybe it gave you a little bit of motivation to go out and make or finish that project you’ve been putting off. My plan is to keep this place a little bit more active in the coming months—so stay tuned. Thanks for reading!