How I Built This Website
Posted May 4, 2022. Updated May 23, 2022.
I built this website by myself with zero prior experience in coding. This article outlines the overall process of building this website without going into the nitty-gritty of coding, so that readers can evaluate the general level of trouble involved, and decide whether they want to DIY a website.
Step 0 – Understand what you need to build a website
To have your own website, you need 3 things:
- A domain name (cheap and easy to buy)
- Your webpages (which you get by coding [difficult but rewarding] or by using a drag-n-drop website builder app [easy])
- A server space to host the webpages (free or paid)
Step 1 – Buy a domain name
My domain name is charlielu.com. You can buy your own domain name from many domain name registration websites. I bought
mine at US$13.98 per year. Buying a domain name takes about 10 minutes: just go to the registration website of your choice, search for the domain name you want, to see if it is available. If yes, then buy it following the simple checkout steps as you would when buying on Amazon.
Step 2 – Build a placeholder webpage
As a total beginner, it would take you at least a few days to code or build your website into a decent, presentable
form. And I am sure you can’t wait to see if the domain name you’ve just purchased actually works, so you want to whip out
a placeholder webpage in just a few minutes to test if it can really show up in your web address (your domain).
To build a webpage, you need software. Basically, you have three options:
- Visual Studio Code (free, but needs coding)
- WordPress (free easy drag-n-drop website builder, no coding needed)
- Paid easy drag-and-drop website builders (Wix, Zyro, etc., no coding needed)
Since I want to build my website at a budget, and have total control over the customization of my website, and pick
up some basic coding skills in the process, I opted for coding my webpages with Visual Studio Code (VSC).
VSC is a free coding program, which is quite easy to use. If you want to code your own webpages, you can download VSC here. Once you've installed VSC on your computer, follow the
below steps to create your placeholder webpage:
- Open VSC and in the left panel click the “New File” icon to create a new file
- Name the new file “index.html”
- In the right panel, type “html:5” and press ENTER
- In the line immediately under “body”, type “p” and press ENTER
- Type in any placeholder text, such as "my website"
That’s all. Now you have your first webpage ready to go live to test if your domain works.
Step 3 – Get server space to host your placeholder webpage
I recommend two options for getting a
server space:
- GitHub Pages (free; there are other free alternatives, but I don't recommend them)
- Paid servers (costs about US$84 or a little higher per year)
GitHub Pages is a static site (no dynamic features such as e-shopping) hosting service available in public repositories with GitHub Free, and in public as well as
private repositories with GitHub Pro which costs $4/month. If you publish your website in a public repository on GitHub,
you grant other users of GitHub the rights to view and fork (copy) your repository. If you don't mind granting such
rights, then GitHub Free is your best choice for a static blogging website.
I do want "All rights reserved" for this particular website, so I opted for a mainstream hosting service provider at the
initial price of $2.99 /month for the first 4 years, and at the renewal price of $6.99 /month 4 years later.
Step 4 – Upload the placeholder webpage to the server to go live
This involves two sub-steps:
- Specify the DNS settings (takes about 10 minutes to set up, just follow your hosting service provider's simple instructions)
- Upload your placeholder page to your server space (The DNS setting in the preceding step takes some time to update across the internet; so after the upload, you won't immediately see your page show up on the internet; in my case, I had to wait for 4 hours)
Step 5 – Build webpages with real content
After your placeholder page has successfully gone live, it’s time to build your pages with real content. It's impossible to learn how to do build webpages by reading a text post like this. You need to spend at least a few hours watching some YouTube tutorials on HTML and CSS to get a general idea about what it means to code a webpage. It took me a week to code the layout and styling of this website.
Step 6 – Make the website show up in Google search results
Now that you have a live website that people from around the world can visit if you tell them your web address
(domain name); however, at this stage, they cannot Google your webpage content or keywords. To make your webpages
show up in Google search results, you need to tell Google some info about your website. To do this, you need to request indexing of your pages using Google Search Console (GSC) in the following steps:
- Create an account on GSC and verify ownership of your site in one of the methods suggested to you by GSC. I used the URL-prefix method: inserting the "google-site-verification" tag to head of the index.html file.
- Add your site to GSC as a property.
- Use the URL Inspection tool to request indexing for each of your pages.
It takes a few days for the initial indexing coverage data to show up on GSC. The coverage page on GSC tells you how many pages on your site are indexed and how many are not indexed. The pages that are indexed can now show up in Google Search. After this initial indexing session which took about 5 days in my case, subsequent indexing of new pages takes about just a few hours.
Now you have your own website to say hello to the world.