🌐Making a Personal Website for Fun and Profit💲

You don’t have to pay for web hosting, domain name, or SSL cert.

This is the modern age. If you’re paying for web hosting, you’re a chump. With the cloud (AWS, Azure, etc.), you can pay nothing for hosting a personal website that only your mother and the odd job recruiter will visit.

I was a chump paying 7$ per month to host my website on a VIRTUAL MACHINE in Digital Ocean for years. 84$ a year for web hosting! Bless my poor little soul.

You personal website is for enterprise marketing in the context of being a working professional. Of course, as a professional, you want to market to companies and clients your elite skills and that you’re a half-decent person. People that just meet you, job recruiters and crazy ex’s will look you up and be amazed at your curated online-presence. Your personal website should be your ~professional~ virtual first impression. Sites are the business cards of the remote working world.

The tasteful web design… Oh my god… It even has a professional domain name.

Step 0: Design your website

You can find hundreds of free personal website templates online. Beware, their are lots of sites that will try to bait and switch you with ‘free’ website templates. This one is legit.

This doesn’t have to be fancy. Chances are you aren’t a web designer and you don’t need to be. Just replace the images with pictures of yourself and your projects. Replace the text with descriptions of yourself and your work. Download the template you like, unzip it and open it up in your text editor of choice. Open the index.html file in your browser and you’re on your way to developing your website locally.

Edit the html, save file, refresh the browser. Rinse and repeat until everything is to your liking. If you have trouble finding a particular part you want to chance, type ctrl-f and search for it in your text editor.

How do you change a photo or specific part of the website? Right click this image, for instance, in your browser and click ‘inspect’. You will then see the HTML that you need to look for:

Simply search for the code in your text editor, now you can modify the image with your own in the website source files.

Also make sure you change the following fields otherwise it will be extra obvious that you lazily copied an website template.

Step 1: Options for Acquiring a Domain

Now that you have designed your personalized website, time to bite some costs with a domain name. There are plenty of options for using website creation platforms and being content with a their subdomain (yourname.wordpress.com). However, not having your own domain makes you look a bit unprofessional, and in all likelihood, you can get a domain for a few dollars anyway. If you’re a student, you have options to get a domain for free using the Github Student Developer Pack.

Otherwise, there are tons of services online that make it simple to buy a domain name. Here is a guide to purchasing a domain name you can reference.

Alternatively, there is a service I’ve been using for free domains for years, however, you are required to use fixed domains and then can name your own subdomains. The service is called Free DNS. Here are some of the fixed domains you can select from:

After imputing the subdomain you desire, be it your business name or legal/personal name. You simply select a domain (there is a lot to chose from) and then can set DNS records to point to where your website is hosted (we will get to that soon).

You can set up to 5 subdomains for free, here is an example of how I am using it for various projects. The mooo.com domain is my favorite. Of course, it will look a bit less professional but you get what you pay for.

Since I’m no longer a university student and have those big cyber bucks, I’m opting to buy a domain.

Web Hosting

The simplest 0 cost web hosting I’ve found has been through DigitalOcean. It is a user friendly cloud service provider I’ve been using for my tinkering and websites for years. If you’re not already signed up, please use my referral link, if you’re so inclined. Assuming you’re signed up, create a project for your personal website from the Digital Ocean GUI. Skip allocating resources to the project for now.

Here is how you host your website. Click on Manage -> App Platform -> Create App from the Digital Ocean GUI.

Now we need to pick where to keep our website code so that Digital Ocean can access it, the simplest way is though GitHub.

Assuming you already have a Github account, like the L33T h@xor you are, create a new repository to keep your websites code, then upload your code to the repository.

From the current working directory of the website files, in Powershell, use the following commands to upload the website files to Github.

echo "# Patrick-Uwechue-Personal-Website" >> README.md
git init
git add README.md
git add assets
git add .\components.html
git add .\index.html
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/remembercds/Patrick-Uwechue-Personal-Website.git
git push -u origin main

Next we need to edit the permissions of what Digital Ocean can access from the Github account, then select the repository to build the web app from.

Click “Skip to Review”.

Note happily that it costs nothing to host the website with this method.

Using your Domain

Now we need to configure the DNS so that your website is using your fancy domain. This can be done though Digital Ocean, so click on your project then “Manage DNS on Digital Ocean” button.

Then write in your domain name, then click “Add Domain”.

Next we need to add the DNS Name Servers of Digital Ocean to our domain though our domain provider dashboard. Depending on what domain provider you use, it will look slightly different. Here are the instructions for Namecheap and this is what it looks like configured.

Then we make some configurations from the Digital Ocean App GUI.

Your digital ocean DNS records should populate automatically based on the previous buttons that were pressed, but make sure the records look like this, just with your domain instead of Pat’s.

These DNS records make sure that your domain is pointing to the Digital Ocean web application. It can take up to two days but usually the DNS records work within 10–20 minutes. At that point, browsing to your domain will go to your new website. You can browse to the one we have made for Pat here: https://patrickuwechue.com/

What about the SSL certificate for the website? That is set up automatically though Digital Ocean and Google Trust Services.