curious builders

How to Start a Personal Website (And Why You Should)

|

I love my personal websites.

Just typing in their URLs brings me joy. Browsing them fills me with a calm sense of accomplishment. Not because they represent something grand (they really don’t). But because they are entirely my own creations.

If you do not yet have a personal website I urge you to consider starting one. For me, it has been a wonderful journey and I would hate for you to miss out on that.

This is a guide on the what/why/how of starting a personal website as a developer/builder.

What is a personal website?

My definition is very broad:

A personal website can be anything you want it to be.

It can be a 3D-rendered presentation with visual effects and background music or it can be a static HTML site with a few lines of CSS.

But that’s just the presentation format. What about the content? What is a personal website supposed to present?

Again. Anything you want.

There are no rules.

In a moment I’ll show you some examples and give you some ideas. I’ll present what I usually see on personal websites. But before I do I want to make sure you grasp the freedom a personal site has — there are no norms you have to follow.

And that is a big part of the beauty.

Commercial websites are optimized for profits. Blogs, newsletters, landing pages, etc. are usually optimized for some sort of action. Personal websites are optimized for whatever you want to optimize for.

One of my favorite things about Hacker News is that you often see personal websites ranking on the front page. I love visiting these websites and seeing how people express themselves through their pages. These different styles and perspectives contribute to the internet in a way that big corporations just can’t.

… this website is the home of my life’s work

Common themes

Here are some of the things I often see on personal websites:

Projects

A list of current and old projects. A personal website is the perfect place to show off what you are working on. Now and in the past.

Projects

Bio / About

Most personal websites have some sort of bio/about section. Some display their professional resumes. Some write about their interests and hobbies.

Bio

Essays / Blog posts

A lot of personal websites have some sort of blog post section. Some people post small microblogging updates while others post long-form essays.

Popular articles

Now Page

A now page shows what you are currently up to.

Other creative work

Personal websites can also show off all kinds of creative work. Images, videos, music, etc.

Personal website examples

Personal website example

Here are some personal website examples. They are from my own bookmarks so they are all related to my interests. But I’m sure you have already seen personal website examples in other fields related to your own interests.

Why have a personal website?

Now that we have covered the what let’s dive into the why. Why spend time, energy, and resources on building a personal website?

I’m glad you asked.

Create something without pressure

A personal website gives you a place to build. A personal space for creating things. A place where you don’t have to conform to any norms and where you don’t have to optimize for anything but what you decide to optimize for.

The mere act of creating something can have a profoundly positive impact on the rest of your life.

A place to experiment

Curious.builders experiments

A personal website isn’t just a place to create. It is a place to experiment. You could try building your own AI Overlord and have to run a mini blog series like I did. Or you could experiment with new frameworks and tools — as I have also done.

Experimenting brings such joy to life. Trying new things just for the sake of experimentation. But we forget this when we don’t have a forum or a dedicated space for such experimentation.

A personal website can be such a place if you want it to be.

Show off your skills

With a personal website, you can also market yourself. You can show off projects to potential future employers. As a builder, it is more impressive to have a website where you display yourself than just a Linkedin profile.

If you are working freelance then a personal website is an obvious benefit. But even if you are not, building up a body of work is a positive thing for any future career moves you may want to make.

Grow as a builder (and as a person)

Think Week 2021

The value I have gained from building my own websites is hard to overstate.

I don’t have any big, long-running sites. But I have tried (and failed) a lot of times and the lessons I carry with me are invaluable.

Many years ago, before I even knew how to code properly, I learned the ins and outs of WordPress. Then in December 2021 I picked up the craft again and created a small personal site using GitHub Pages. Later I changed to another provider but we’ll discuss hosting in a moment.

My point here is that I learned a lot from each of my websites. I learned a lot of technical lessons, from Static Site Generation (and the Jamstack) to Responsive Images to Dependabot and GitHub Actions.

But it wasn’t just technical. I also learned a lot and grew as a human. This may sound a bit much but I have the experience to know it is true. Think Week 2021 and the journey towards more financial freedom that it sparked has changed how I think about money.

And there are smaller lessons too. Sitting down to write anything for my websites is usually a lesson in itself. The act of writing down my ideas and thoughts means I have to articulate myself. Which in turn means I have to understand what I’m really about. And that is a big beautiful lesson to have.

Build something you can be proud of

Proof that you can do hard things article

Finally, a personal website is a place where you can build something to be proud of. I recently read Nat Eliason’s Proof You Can Do Hard Things and I loved it. Here’s a quote:

The proof you can do hard things is one of the most powerful gifts you can give yourself.

A personal website is the perfect place to keep track of the hard things you have done. Or even just things you have done.

When I look back on my Everyday Adventure post I feel good. Not because it is a good post. But because I remember I did that. Even a simple experiment like my No Coding Required: Train Your Own AI Model post is now part of my recorded achievements.

In the beginning, your personal website won’t have much to show. But over time you will build up a catalog of things you have done. Maybe even things you have built. And such a collection is a beautiful thing to have. Even if nobody else but you visit the place, you’ll have it. And you’ll come back to see how far you have come.

How to build a personal website

Today you can create your own website in a few clicks. It wasn’t always so but we are blessed with technology that has made building websites increasingly simple.

However, the abundance of options can make it difficult to choose. In this section, I will go through some of the most popular setups and help you decide what is right for you.

WordPress (and other no-code solutions)

Wordpress website

If you don’t want to code or tinker with anything, WordPress is the world’s most-used website builder. So you can’t really go much wrong with it. But you will miss out on some of the fun (in my opinion).

Before I knew how to code I used WordPress to publish. But I have not used it for years so I don’t know how it has developed since. But WordPress is the most popular website builder for a reason. So it’s a solid choice if you don’t want any technical challenges.

Now onto a few other options that will give you a bit more room to code and build with.

Static Site Generators (SSG)

If you want to build your own personal website you probably want to use a Static Site Generator to do it. A common setup is to write your pages in Markdown and use a static site generator to turn the pages into a static website.

The most popular generators, ranked by GitHub stars:

And that’s just the top 10. Jamstack.org lists 355 static site generators in total.

With that many options, it can be hard to decide. What are you even looking for when you are trying to build a personal site?

A few of the generators listed above are tailored to special cases. E.g., Docusaurus and Slate are built for documentation, and GitBook is for creating books. So unless you are looking for that, those a probably not an obvious choice.

Then there are some of the generators that are built to be general purpose. Next.js is one such example — it is much more than just a static site generator. It is a full-fledged react framework, used by major websites. Gatsby and Nuxt are similar.

The general purpose frameworks are powerful. But they also come with added complexity. If you just want to create a simple blog then it’s unlikely that you will use most of the features and instead, it may slow you down.

In that case options like Jekyll (“Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites.”) or Hexo (“A fast, simple & powerful blog framework, powered by Node.js.) may be more down your alley.

Pick a Static Site Generator

It may seem overwhelming with all the options. But I think you should see it as exciting. All of these projects are amazing. And you get to try one of them out. If you stick around as a builder you may even end up trying a few of them in time.

Here are a few questions to ask yourself if you are still unsure:

  • Do you have a preferred framework or language already?

    • If so, narrow down your search to those
  • Do you want to blog?

    • Consider a blogging-friendly framework to get off the ground faster.
  • What are your aspirations? Keep it simple or experiment with more powerful options?

  • Does any of the projects excite you?

Personally, I have used several of the frameworks in the top 10 above and I have enjoyed the experience every time.

Or just go with plain HTML?

If you are creating a simple personal website, you don’t actually need anything but HTML and CSS. You can write your HTML files directly, upload them somewhere, and you have a fully functional (and blazingly fast) website.

One of the big advantages to this approach is that you have no dependencies. So if you come back to the project in a year you won’t struggle remembering how to use your tools and face issues with e.g., abandoned frameworks.

A big downside is of course that you have to do everything manually and the approach probably does not scale very well if you grow your website. Nonetheless, it is worth mentioning.

Version Control

I strongly urge you to use version control (Git) for your website. Even if it is just a small tiny thing it is nice to know that you have control over your changes and you can always roll back if you make a mistake.

I also recommend you use GitHub to host your repository. I have not tried other git providers so I don’t know how good they are. But GitHub has not given me any reason to seek out other options. Their features are great and you get access to most of them with a free account.

Next up is hosting. And all the hosting providers we go through below have GitHub integration which means you just have to push your changes to your repository and your website will be built for you. Automagically.

Hosting Providers

Once you have decided on a framework to use for your website, it is time to find a hosting provider that will host your website for the world to visit. You could of course do this yourself but that is a (big) challenge in itself and not something we will cover here. Instead, we’ll focus on some of the many options that are freely available online.

GitHub Pages

GitHub Pages website

GitHub Pages allows you to publish content directly from GitHub without a third-party provider. For free. Just set up your repository and a few settings and you have a website running.

The easiest way to publish via GitHub pages is with static files checked into your repository. That way GitHub can just serve the files directly. Another option is to use Jekyll which has built-in support for GitHub pages.

This is how I started my first personal website (after my WordPress days). With Jekyll on GitHub. It was a good learning experience but the setup was actually more complicated than some of the other providers listed below. I also quickly ran into a lot of issues as I wanted to experiment with my website and go beyond the limits of GitHup pages.

If you decide to go with Jekyll on GitHub pages you should be aware of this. GitHub has made a supported setup and you run into issues if you want to venture beyond this. E.g., here are the supported themes and supported plugins. You can apply another theme manually but you can’t use any unsupported plugins.

It should be possible to use other static site generators than Jekyll on Github Pages. One way would be to generate the files and check them into your repository manually. Another would be to create a GitHub Action script to do it for you.

Cloudflare

Cloudflare Pages website

With Cloudflare Pages you can host your static sites for free. And with their framework guides you’ll be up and running with any popular framework in next to no time.

I’m a bit of a Cloudflare fan so take my words with a grain of salt. But I have hosted several websites using their Pages functionality and I also use their DNS for all my domains.

Cloudflare has much more than just Pages and when you host your website with them you get easier access to some of these features.

Vercel

Vercel website

Vercel is another provider I have had good experiences with. If you have using Next.js it is an obvious choice as Next.js is made by Vercel (so you know their framework support is top tier).

But Vercel also supports a wide range of frameworks. Their focus on frontend frameworks and their support for these is phenomenal.

As a hobby user you get free access to most of their features with very few limitations.

Netlify

Netlify website

Netlify is another frontend focused provider, similar to Vercel. It supports most popular frontend frameworks and let’s you host for free as a hobby/starter user.

I have not used Netlify much. But the one time I have the experience was good. Git integration and automatic redeployment like you would expect.

Render

Render website

Render is a more general purpose web hosting provider. Their focus isn’t solely frontend frameworks, but they do have support for free static websites.

I have used Render for other websites where I needed a backend also and so I have decided to include it here as well as it is an option.

Which hosting provider to pick?

All of the providers I have mentioned above deliver a good user experience. And superb performance. It is staggering the tools that are available for free when you are looking to host a static personal website.

So go with any of them and you will be fine. There are also other options I have not listed here. I decided to only include providers I have personal experience with so I can somewhat vouch for them. But I’m sure there are great providers I have missed here.

Once you have set up your provider you won’t really spend much time thinking about it. The tools are so good that you will just be pushing your changes to your GitHub repository and everything else runs on autopilot.

Domain

Next up we go shopping for a domain for your personal website. All of the hosting providers listed above will make your site accessible via an auto-generated domain, so strictly speaking you don’t need a domain.

E.g., Andrej Karpathy’s blog is just his github.io domain: https://karpathy.github.io. But he does have a domain for his personal site though: https://karpathy.ai.

So far in this guide everything has been free. But you will have to pay a few bucks a year if you want to own a domain. Not a lot though.

Gergely Orosz from the Pragmatic Engineer recently did a poll on what domain registrars his readers (developers) used and recommended.

The top 3 were:

I have personally used Namecheap for many years and have never had any issues. From what I can tell they have a lot of top-level domain options (e.g., builders) and their domains are cheap.

Cloudflare I have not used for buying domains but I have used for a lot of other stuff — including DNS hosting for my domains. One advantage I can see with Cloudflare is that you will get easy access to many of their features without any configuration if you also buy your domain from them directly.

Porkbun I don’t know. Like Gergely I was a surprised to see it that far up the list of providers.

You can read the Domain Registrars which Developers Recommend post here if you want to know more.

Once you have a domain it is fairly easy to integrate it with any of the hosting providers. They all have guides on how to do it and the process shouldn’t take long.

Now what?

Static Site Generator + Version Control + Hosting Provider + Domain = You now have a personal website with a custom domain name.

Your own little space in the vast universe that is the internet.

Congratulations! (that is if you have followed along on the way. If not, what are you waiting for ? :))

Now what?

Now you build. You build your website into what you want it to be. It will take some time. And in the beginning it won’t look like much. But over time this little project may turn into something you will be proud of.

And if everything fails, at least you will have learned something along the way.