As someone who loves the web and how it makes it so easy to find something whenever you need it, I am always raving about how people should publish their own website… especially students.
A few of my student friends in the tech sector have recently started talking about their portfolio and projects they’ve done, which sparked my interest in writing this guide.
Having your own personal website looks great in the eyes of employers. You can add the link to your CV, social media, LinkedIn profile and tell a story about yourself that will certainly make you more employable than someone who hasn’t.
Also, learning how to build and host your own website is a great set of skills to have, since many jobs in the tech sector expect you to have this skillset as standard.
I am going to tell you how you can launch your own personal website for free and trust me, it’s a lot easier than you think.
Step 1: Learn HTML and CSS
Most websites are build using a technology called HTML or HyperText Markup Language, this is what defines the structure of your website and the elements that appear on it like text, headings, images, links etc… You can learn this skill on W3Schools, which is where I learnt primarily.
CSS stands for Cascading Style Sheets and allows you to style and customise the HTML elements you have defined, beyond their default appearance. Again, you can learn this skill on W3Schools.
Expert Tip: Check out Bootstrap as well, it allows you to make websites with a responsive layout (mobile friendly) by default and reduces the amount of CSS you will have to write.
Step 2: Make your “index.html” file
Once you have got to grips with HTML and CSS (and Bootstrap if you like), you can make your first webpage by creating a file with a text editor like Notepad++ or VSCode. Create a file and call it “index.html”, since this filename is what the webserver looks for to display the first page or the “homepage” as it is often known as.
In this “index.html” file, you can write your HTML and choose to write your CSS in the same file or create a “style.css” file and link it to your HTML to allow the styling to take place.
Step 3: Create a GitHub account
GitHub is what we will be using to host our website and its source code. GitHub is 100% free for personal use and you can even attach a custom domain later if you wish (more on that in a bit).
If you don’t want to pay a penny, you will get provided with a free subdomain like “yourname.github.io” that you can direct people to to visit your website.
Step 4: Create a new repository to hold your website
Repositories are what GitHub use to hold code, almost like a folder. Create a new one using the “+” in the top right and make sure to call it “yourname.github.io”, where “yourname” is the name of your GitHub username.
E.g. my GitHub username is @robsd so my repository name will be “robsd.github.io”.
You can change your GitHub username in the settings if you wish, but make sure your repository name reflects the changes too, otherwise it won’t work.
The reason it has to be called this is so GitHub knows that this repository will contain a website and needs to be hosted.
Step 5: Upload your “index.html” (and any other supporting files)
Once you have created the repository, you should see a page that says “Quick setup — if you’ve done this kind of thing before”.
Click on the link that says “uploading an existing file” and you will be able to upload your “index.html” file and any other supporting files like images, CSS stylesheets etc…
Once you have uploaded all the files, click on “Commit changes” (don’t worry, you’ll be able to make more changes to your website later on).
Step 6: Going live is pretty much instantaneous
If everything went well, you should (after about a minute or so) be able to visit your website by going to your free subdomain “yourname.github.io” (where “yourname” is your GitHub username).
Your website is now online and ready to be viewed by anyone that visits the link (your subdomain) – congrats!
If you want to add your own custom domain like “yourname.com” (not free, but very cheap), hang around in the next step and I’ll tell you how.
Step 7: Adding a custom domain (not free, but very cheap)
If you don’t like the free subdomain you were provided with like “yourname.github.io”, you can point a custom domain to it like “yourname.com”.
Firstly, go and register your custom domain through a domain registrar like Namecheap (not free, but very cheap).
Then, in the DNS settings, create 4 “A” records and point each of them to the following IP addresses (these are GitHub’s): “22.214.171.124”, “126.96.36.199”, “188.8.131.52”, “184.108.40.206”.
Then, in the DNS settings, create a “CNAME” record and point it to your GitHub provided subdomain like “yourname.github.io” (where “yourname” is your GitHub username).
Finally, go into your repository settings, click on the “Pages” tab and you should be able to add your custom domain in there. GitHub will tell you if it worked or not.
Congrats! You now have a shiny new website online that you can show off to your friends, family, employers, colleagues, cats, dogs, etc…