I built my own personal website! Yaaay 😎

Hey, devs from all over the world!! 🤗

In today's post, I wanna talk about my personal website building journey. What technologies I am using? and why? Also, It has gone through two versions. Each using totally different technologies. Let's talk about those two.

Ohh by the way! It is live at https://bassemmohamed.me. It is still far from complete. But, If you want to talk a quick look. Be my guest. Even better, you could tell me if you liked it! Can't wait!! 🤤

Why a personal website anyway? 🤔

Well, I wanted to have my own space that can act as a bio and a blog. I didn't care much for analytics nor traffic (still don't 😏). I just needed a free space for me to tell people about myself, my thoughts and my interests. Also, It is a bit of something to brag about. I like being able to apply for a position and fill in that personal website field. Just makes me feel good about myself, boosts my confidence.

Now that we covered the WHY let's dive into the HOW 🏊‍♂️

Before we start, This post is not intended to be technology pros and cons list or a guide on how to build your personal website. It is just how I did it. I am sure there are better ways out there. I am just sharing my short journey.

First off, What is the checklist? 🗒

1. Personal bio (Simple about page will do. Not a big deal 😎)
2. Blog (A bit tricky 😓)
3. Limited budget (Got no money for this shit 💸)
4. Quick and easy (I have work to do, you know 👨‍💻)

I looked around for a bit, read a few articles, saw some videos. In the end, Wordpress felt like a match made in heaven. It's built with PHP which I am familiar with. It has a rich editor and an open-source license. Also, It is very quick to set up and start with.

Let's get down to business (First trail).

I got my domain and my hosting service up and running. Digital ocean offered droplets with Wordpress pre-installed which was perfect for me. All I had to do was to add an SSL certificate. Then, I started on the most important part. Building the UI. In Wordpress terms, I built my own mini Wordpress theme. It didn't take long because the website was very minimalistic. Home, About and Post page. That's it!

Time to party! I have my own website!! 🎉🎉

It's not all good and dandy 😔

After a while. It was some random normal day when I decided to check my site out. To my surprise. I was greeted with this error message Error Establishing a Database Connection 😨, I didn't do anything! I don't post that often and there is hardly any traffic. What has gone wrong? I had no idea!! 🤔

After failing miserably in debugging the issue myself. I contacted Digital ocean's support. They told me that it is a Wordpress issue, not a hosting one and It may be fixed by increasing the droplet's specs. I didn't wanna do that ✋. So I decided it was time for an easier approach.

I am a ReactJS developer. Why do I have my site in Wordpress anyway?! Well, At first I thought that the blog would be impossible without some sort of an editor and a database. That's basically what attracted me to Wordpress in the first place. Turns out, I was wrong.

Markdown to the rescue.

Markdown! What's that?! According to Wikipedia: A lightweight markup language with plain text formatting syntax. Its design allows it to be converted to many output formats. Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.

You know that readme.md file in almost every Github repository? md stands for markdown.

For example, This markdown snippet :

  # H1 heading
  ** Bold text **

Can be converted to HTML like this :

  <h1>H1 heading</>
  <b>Bold text</b>

Super cool right?! Not just headings and bold text. It supports tons of stuff. Take a look at the cheat sheet.

What does that have to do with anything? 🤔

That means that we can replace the database and the editor with just some markdown files. One for each article. The only thing we need is that awesome ReactJS library. React Markdown parse markdown files and outputs their corresponding HTML.

Of course, I will have to add the markdown file manually every time I want to publish a new post. Which is something I will gladly do If it means that my website will be built in my favorite language Javascript.

Now, the site is fully built with ReactJS. That's basically it! ⌛

If you liked this post, Make sure to never miss a future one by following me on twitter.
And if you really liked it. Please let me know in the comments below. ✍️

As always,
Happy coding 🔥🔥
“كود بسعادة”

Comments

[molamk]

Awesome stuff! Since you're a React dev, you might want to take a look at Gatsby.js.

It gives you:

• A super fast blog
• PWA out of the box
• Really easy to work on your SEO with Helmet
• Easy to add analytics
• Also optimized images & RSS feeds
• Free hosting w/ Netlify and/or Github Pages
• Easy Markdown integration (plugin)

This is what I used for my own blog, if you want to see it in action: molamk.com

Keep up the good work!

[Bassem]

Great! I like how clean your blog is. Will definitely check out Gatsby.

[Kryselle Matienzo]

Yay congratulations! I was looking to build my own website, too. Someday! I only know html, css and a bit of Js right now, and currently learning asp.net.. Hopefully by end of this semester, I will be able to go live for my website too! :) Congratulations again!

[Bassem]

Thanks!! Good luck with that! I would say start small ( That's what I am doing anyway ). Also, don't forget to show me!

[Kryselle Matienzo]

Thank you!! Yes, i tried creating an account on wordpress, but.. cant figure out (yet) on how to use it. Yes for sure I will it to you when it's live! :)

[Mustafa Anas]

حبيبي يا جدع
Funny thing, I always wanted to put a personal website for me out there and I kept on delaying it. Just yesterday though I was like hell no I need to do somthing. So I deployed my first website yesterday night too!(also far from complete but I am still working on it. have a look! mustafaanas.com/).

I noticed a post from dev.to published to your twitter and scraped from there to your website. Which made me think, is there an official API to scrape from here? most of my writings are here and I wanna do the same.

Anyways, I love your website.
Keep it up and goo luck!

[Bassem]

Good work صديقى!!, It looks good. You might wanna fix your Medium icon thought. Right now it's pointing to facebook. 🤯

What do you mean by scraping? Do you want your blog to automatically post every article you have here? For me. I am cross-posting. But I am doing it manually.

Dev.to welcomes cross-posting. They even have canonical_url tag. Take a look over here :

How to Configure Cross Posting?

Gift Egwuenu ・ Sep 9 ・ 1 min read

#help

I haven't used that tag yet. But I am planning to.
Anyways, Thanks for your comment. Really appreciate it.

[Mustafa Anas]

Thanks for the feedback! I got it fixed.
Yes I want to be able to fetch all my articles that are here to my portfolio. I'll have a look, thnx.

[Bassem]

Ummm. Its a good idea for sure, Let me know what you find!

[Alexander Kim]

Grats, but there's a problem, you've built your website as SPA, thus you won't get a SEO benefits. I suggest you to use something like Next.js (if react) or Nuxt.js (if vue). You need SSR badly.

[Bassem]

Yeah, I was totally in the dark about that until I finished deploying it and I was hit with that client-side rendering vs server-side rendering issue. Had to use a .htaccess workaround for it to even work.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Anyway, It is working now. But, I definitely want to look into NextJS. At the least for my own knowledge.

Just wondering thought, Is it a pain to set up? SSR I mean?

[Joshua Johnson]

Congratulations! I remember my first website :)

[Bassem]

Thanks! How long ago was that?

[Joshua Johnson]

1. I didn't know anything about a CMS so I read tutorials on how to build a PHP site. And I built my first one. A flat file database that allowed users to submit articles. It was a blast!