A Step by Step Guide for Developers

Desinging and building a personal site and blog can be one of the best career moves you can make as a developer. I was recently inspired to take this seriously after reading a post by Troy Hunt, a well-known security researcher, blogger, and Pluralsight author.

I recommend reading that post if you have the time, but in a nutshell he describes how he owes basically his entire career to creating a personal site and blog, and writing regularly about the work he was doing.

I've always had a site up, but I have never taken the time to really sit down and plan out what I want to do with it.

It's time I did that. This post is the first in a two part series about creating a personal site and blog for developers.

This part will focus on the concept and design portion, and the second part will cover how I built it using Gatsby.

I'm going to assume you already know the benefits of having your own site, so we'll just be getting into the practical side of actually making it happen in this series.

I highly recommend you follow along with the process and get your site up and running.

Let's get started.

Goals

Designing your own personal site can be surprisingly difficult. When designing a site for someone else, you can be somewhat detached and neutral on the purpose and content, and in general the client/employer will dictate the concept.

You may help steer them in the right direction, but the idea usually doesn't originate with you.

In addition to that, personal sites are more difficult to create than our own projects, even if we did come up with the idea.

There's something about the process of creating something that is supposed to represent ourselves and where we want to go in our careers that makes it difficult to know exactly where to start.

The easiest way to overcome that is by setting concrete goals.

What do you want this site to accomplish?

If you are building a personal site to advance your career, like I am, your main goal is to increase your online presence.

There are many potential tactics that can help us take action on this particular goal in different ways, but the primary goal is to grow our personal brand and online presence.

Start Small and Iterate

I'm a big fan of starting as small as possible and making small adjustments as I learn new information.

Applying this concept to my personal site, it meant that I needed to keep it as minimal as possible, at least at first.

At the time of writing, my site only has a few main components:

  1. Writing
  2. Consulting page
  3. Mailing list signup
  4. Link to my startup website

I'm starting small and basic because writing is the method that I am choosing to build my online presence with, and a mailing list is how I intend on keeping in touch with an audience over the long term.

I also do occasional design and development work for clients, so the consulting page gives interested people more information on that.

Finally, I am in the process of bootstrapping a startup, which most of my writing will be geared toward, so I have a link for people to learn about that.

That's it for right now.

No courses, no marketing gimmicks, no funnels.

Just me writing and giving people the option to get updates when I write more.

As I learn more about what kind of people I attract and what they are interested in, I can start tweaking things as necessary.

Doing more than this right now is only going to overwhelm me with decision paralysis, and anything I do will be a guessing game anyway, rather than being based on real data.

Focus

You know you want to build your online presence, now you need to determine why. This is how you will make design and content decisions.

My why is the new startup I am working on, Cognition.

It's in the very early stages of ideation and design right now, so I am looking to attract people that are interested in the concept and want to help me flesh out the software.

Your why might be getting a job, starting a freelance business, or any number of other things.

Whatever it is, write it down somewhere and use it as an anchor for all of your decisions in designing and building your site.

What kind of content will you have?

What should the design look and feel like?

What pages will you need?

Someone looking for a job might not need a page dedicated to their design and development process for clients, where that might be essential for someone looking to start up their own freelancing business

Content

Start with content, not design.

Let the content inform your design decisions, instead of trying to force your content writing to fit into an already-made design.

Again, I recommend iterating here.

Pages

First, come up with a list of pages you will need, and a brief, one sentence goal of that page.

Outline

Next, make a short outline that contains the content you want to write for that page.

Content

Finally, expand on the outline to actually write the content.

Often, writing content for your personal site can be the most difficult part. About pages are particularly troublesome.

The easiest option is to start out very basic, tell you story: where you came from, where you are now, and where you want to go.

Then use the process of getting where you want to be as the content of your blog posts.

Write the article you are searching for on Google but can't find anywhere.

Discuss your though process and decision-making when designing or coding a new project.

The post you are reading now is a result of me just writing down the process I went through when creating my personal site.

Design

Even if you aren't a designer, I recommend designing your own site.

This will be your home base throughout your career, take the time to make it yours, that you made from scratch, and can be proud of.

I'm a relatively amateur designer, and do not at all consider myself qualified to teach others, so I'm going to refer you to the places I learned design from. There are three courses in particular that have made a drastic difference in my design skills.

I highly recommend all three of these.

Design Fundamentals by Laura Elizabeth

This was the course that made a lot of design click for me. It took it from an abstract, mystical practice into something practical that I could actually practice and get better at.

Refactoring UI by Adam Wathan and Steve Schoger

Along the same lines as Design Fundamentals, Refactoring UI is super practical and filled with actionable techniques that make designs look polished and professional.

Better Web Typography for a Better Web by Matej Latin

I've always been fascinated by beautiful typography-based design, and always wanted my personal site to have that style. I bought this book and it was exactly what I was looking for. I followed the process laid out in this book to create my current site.

These three courses have made a massive difference in how I design.

I now look at design as an interative process, rather than an end goal.

One thing that has really changed not just how I design but how I do most things is being okay with lots of little steps, rather than needing to get everything done right away.

In the next part of this post I'll be walking through how I actually built my site using Gatsby.