Create Your Own Website
Like me you are probably frustrated on how to make your own website and host it.
In this post I will show you the overall steps to making your own website but you have to
do the heavy lifting read docs and managing files.
This is an overall guide not an in-depth tutorial to making your own website.
How can I build my website?
There are many ways to get a website and to host it, from easy to hard and free to expensive. Generally these are the ways to making a website:
- Website builders
- SSGs (Static Site Generator)
- Frameworks
- Hand-written code
- Website builder
- Website builders are the easiest in this list, but are usually bloated, requiring subscriptions, limited features. Designed to have an upgrade path in mind.
- SSGs
- Static Site Generators will manage most things relating to creating a website but do not host it, making the process easier, configure it once and pump content to your liking.
- Framework
- Frameworks allow you to code the site to your heart’s content, but requires loads of configuration as opposed to SSGs where the theme you choose will take care of it, and gives you a way to configure it too.
- Hand-written code
- back to the pure 90s, no bloat, no default configs, just you and your editor doing the hard work, you sigh at the end of the day taking your html and hosting it on a web hosting server.
What are my options and what should I choose?
- For website builders you have:
- Wordpress.org + open-source + can be self-hosted
.com is not
- Ghost.org + open-source + can be self-hosted
- Squarespace.com - paid
they are easy to build and host your site, with a viusal builder and easy domain and hosting options but are limited in design/configuration which they also lock you into their systems
- choose them if you don’t want to waste your time and don’t mind lossing few bucks a month
- For SSGs:
Follow their documentation, use a theme, make content, build the website, put the website on repository on github(or gitlab, codeberg), host it on a platform such as vercel, coolify or netlify
- For Frameworks:
- React open-source free
- Vue.js open-source free
- nuxt.js open-source free
- Svelte open-source free
- Check AlternativeTo.net for more frameworks
I have never tried a framework but I think they follow a similar process to SSGs, always check their docs.
- For hand-written code:
- Learn web development
- follows a similar step to SSGs for hosting.
and this brings us onto how to host your site either self-hosting or using the cloud (which has many ways to do so).
- self-hosted (bare-metal or cloud compute)
- cloud services:
- web hosting services such as: vercel, netifly, coolify, hostingr, digitalocean, heroku
out of what I have mentioned, I have used:
- Website build(SSG): Hugo
- Theme: Blowfish
- Git host: Github - I might switch to codeberg, if I can get it to work with vercel or just switch host provider
- Web host: Vercel
Into business
I presume you will use the same tools I did
- I have managed to boil the process down into 7 steps:
- Installing hugo
- getting a theme | check hugo’s themes
- configuring the theme | check blowfish’s docs, you probably need hugo’s docs too.
- adding content | pages - posts
- adding external tools | such as analytics
- making a repository | on github
- hosting the website | on vercel, easy, just connect with github, import repository then add a domain and that’s it
and to put it shortly, I felt a mix of emotions building my website, happniess, joy, sadness, anger, and even insanity, yes kept re-editing the same file over an hour thinking the problem was in it, whilst another file had the wrong formating which caused the date to be “2 January 1000” and even a smarter person than me, looked at my screen and asked: “what is the year in, BC or AD” We all should be baffled at his genius.
Thanks for reading and best of luck!
Hopefully the next post would be about the Hugo experience itself.
- Mohammad Anas Alfailakawi