How to Build A Personal Blog
Tags: frontend, blog
Published: 2023-05-23 22:13:49

> “Keeping tabs on your creation is hard; I mean, look at humans.”

I was randomly flipping through some portfolio sites the other day when I stumbled on an interesting profile — A Web Developer who also happened to be a writer. With a couple of clicks, I found a link to his blog — Medium. Only this time, I wasn’t welcomed with a myriad of insightful articles and content, but a 410 error, saying:

![401 error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3solny28dg65tdo7gem2.png)

Well, that sucks.

As I was interested in finding content written by this individual, I did some more digging around his portfolio; perhaps I’d find somewhere else where his works lay untouched…Nothing.

---
Of course, this was just my experience, but what’s to say there aren’t a dozen more people with similar experience (not to mention recruiters)? Don’t get me wrong, blogging platforms like Medium and Devto have [rules](https://policy.medium.com/medium-rules-30e5502c4eb4) and [codes of conduct](https://dev.to/code-of-conduct) guiding writers on how to use their products. Sometimes, the lines are a bit too blurry for you to see when you’ve stepped out of them, or, simply put, Nobody ever reads these things.

These things might be too small a policy violation to hurt anyone, [but you still get locked out](https://medium.com/feedium/how-to-not-getting-banned-on-medium-what-to-do-if-your-medium-account-is-suspended-cfd4d7f4e722) and your contents confiscated. How to solve this? Just build a self-hosted blog. That way, you and only you can guarantee the 24/7 availability of your content online. Here’s how to get started.

> PS: I wrote a guide on how we built [Devjavu](https://devjavu.space/). If you’d like to read a practical example, here’s one:

{% embed https://devjavu.space/post/how-we-built-and-deployed-devjavu/ %}

---


## Domain Name
The first step would be to get a domain name. [Naming things is hard](https://martinfowler.com/bliki/TwoHardThings.html). But here’s an excellent resource to help you develop catchy titles.
{% embed https://domainwheel.com/ %}
{% embed https://namelix.com/ %}

Be sure to choose a reliable provider, as the wrong service provider can be frustrating. [Paypal left the chat_](https://www.trustpilot.com/review/www.paypal.com), [Whogohost turned on DND](https://www.trustpilot.com/review/whogohost.com). One recommended Domain name provider would be Hostinger. You can buy a .com domain name for as low as USD 8.99 per year (mostly recommended because of their decent customer service).

> PS: This is not a paid Ad. *psst! Hostinger, if you’re reading this, give me a call; who knows, we might work something out.

Another recommended option would be [Namecheap](https://www.namecheap.com/). However, looking up some of these providers on Trustpilot is best to get an idea of their reviews.

---
## Hosting
You’d need to place your blog on someone else’s computer, aka the cloud. For this, there’s the cheap option and the not-so-cheap option. Note that the affordable option may require a bit of technical know-how to execute.

Whether or not you need a cheap or expensive option is determined by the technology stack you choose to go with (more about this further down).

## Cheap/Free Option:
- [Firebase Hosting](https://firebase.google.com/products/hosting)
- [Github Pages](https://pages.github.com/)
- [Cloudflare Pages](https://pages.cloudflare.com/)
- [Vercel](https://vercel.com/)
- [Render](https://render.com/)
- [Surge](https://surge.sh/)

And pretty much any free static site hosting service. These services allow you to host static pages (most of what makes up a blog) for free (at least at the time of writing). The only disadvantage might be the technical know-how requirement. Some of these options require hosting/deployment knowledge. I wrote about deploying to some of these platforms [here](https://devjavu.space/post/deploying-react-vue-applications-with-vercel).

{% embed https://devjavu.space/post/deploying-react-vue-applications-with-vercel/ %}

## Not-so-cheap Option:
Shared hosting: You can buy shared hosting from Hostinger or any other provider for about 1.99 USD per month. Of course, there may be cheaper options out there to choose from. Hostinger is one I’ve used extensively over the years and can recommend.

---
## Development Stack
So far, you have a fancy name and have decided how you want to host your blog site. Now how do you get one up and running in the first place? Let’s discuss some of the options you have for building your blog. We’ll start from the least complex and walk our way up.

## Low-code Website builders (Not so free)
Some blog development options require no code and are simply plug-and-play/drag-and-drop, although they aren’t free. Some of these include;

- [WordPress](https://wordpress.com/) Blog platform (alternatively download the WordPress blog tool and manually manage your blog).
- [Webflow](https://webflow.com/)
- [Wix](https://www.wix.com/)
- [Blogger](https://www.blogger.com/about/)
- [Drop in Blog](https://dropinblog.com/)

## Static Site Generators (SSG)
If you have some technical knowledge in web-related things, you can go with Static Site Generators. There are a whole lot of options to choose from. See an extensive list here.

PS: It’ll be helpful to know markdown to an extent, as most of these options are built with markdown in mind.

{% embed https://jamstack.org/generators/ %}

The good part about the SSG options is that they’re mostly free to use or open source. The list is extensive, so here’s my filtered list:

- [Next.js](https://nextjs.org/) — If you have experience with React.

- [Hugo](https://gohugo.io/) — If you have experience with Go (or any templating engine). The Hugo documentation is pretty extensive to guide you. There are also [free themes](https://themes.gohugo.io/) to get you started.

- [Gatsby](https://www.gatsbyjs.com/) — Also built around React.

- [Nuxt](https://www.gatsbyjs.com/) + [Nuxt Content](https://nuxtjs.org/tutorials/creating-blog-with-nuxt-content)— If you have some Vue experience.

- [Gridsome](https://gridsome.org/docs) — Also built around Vuejs

## Building From Ground Up

If you’re feeling up to it, and time isn’t a factor for you, then you can decide to build your blogging platform from the ground up. If you do go with this option, here are some points to consider:

- Datasource — You need somewhere to store your data (images, blog posts, user accounts); this can be a managed database from any provider. Alternatively, you can use less costly options, like Github, or purchase a shared hosting plan and set up a database.

- SEO — most of the other options are out-of-the-box SEO friendly, so you mostly wouldn’t need to think much about it. As for building from scratch, you have to handle SEO properly. Consider if you’d be building a Server Side or Client Side Rendered application.

- Editing Tool — The assumption is you would need an admin interface to publish your blog. You can integrate a [plug-and-play markdown editing library](https://simplemde.com/) or build one from scratch if you’re feeling funky.

- Design — Deciding what your blog should look like can be a hassle. Here’s a list of inspirations on Dribble to help give you a not-so-vague picture of what you can build.

{% embed https://dribbble.com/search/blog %}

- Templates — If frontend design isn’t your strongest forte, don’t be shy to look up templates to get you off the ground with that. Here’s a list of interesting templates you can get started with on Themeforest.

{% embed https://themeforest.net/search/blog %}

---
## Conclusion
In retrospect, managed blogging services like Medium are probably the simplest options but, you’re now aware of the dangers around them. I may have covered less detail than I expected, but feel free to ask questions in the comments, and I’d gladly answer them.

Cheers ☕️

---