This post doesn't tell you how to make a website, it is just here to show people different approaches and methods to creating one. I try my best to not get too technical as this article is not about the how; but instead on the what.
At the end of the day, all of the methods mentioned below get you to the same outcome. Some may find one way easier than another. I never knew there were different ways to make websites until someone pointed them out to me, so this article aims to do that.
The many ways to make websites
So you've decided you want to make a website, but don't know where to start? Well I'm not here to hold your hand and dig through the weeds with you, but I might be able to give you some scissors and maybe some gloves idk...
There are lots of ways you can go about creating a website, some ways let you build your website with little blocks and you don't have to ever touch a piece of code; other ways let you create page templates to fill with content.
I'll be going over a few methods in this post along with what I personally think is the quickest and easiest, the most robust and the hardest.
Websites what the heck are they?
So websites in essence are just documents with some extra steps. You go to a website via a URL, the file or document is requested by your computer, a server sends you the document you asked for and then your web browser displays it once it gets it.
So websites are just piles of documents that anyone can request to look through.
This is why you see alot of websites being used as portfolios! It's alot easier to show people what you do on a website than having to wait until someone requests a copy of your PDF portfolio!
Static and dynamic
So before we start actually looking at different ways to make websites, I'm going to just throw this piece of information out here, it took me way too long to figure out this distinction so I'm putting this up front so you don't get as confused as I did.
Some websites like this one have static data and information which is as close to a piece of text and pictures on paper you can get. Whereas other websites have dynamic data which is hand tailored to each user. Youtube uses dynamic content to change and recommend you videos based on your watch history or subscriptions.
The confusing part is when you start to break down websites and realize that pages are a combination of static and dynamic data/elements... take this page for example.
All the words you are reading right now were pre created by me, it is static; but at the top of the page there is a view counter for the page. That information cannot be pre-determined, it will change every time someone new visits the page, it is dynamic.
Understanding the difference between these two types of content will help you as we continue.
Raw HTML and CSS, the hard way
What I am going to explain below is not the hardest way to make a website, it's actually the most straight forward out of all the other options and is in fact the format that all of the other options will end up being when it is being served to the user. The real reason it is the hardest in my opinion is due to the increasing level complexity that can arise as the size of the website increases... There's lots of jumping around files that gets hard to keep track of.
However, I feel that you should understand that when a website is rendered and displayed on a browser, the file that is displayed is made up of HTML and CSS. Even if you decide to use a website builder or site generator, it will always (in most cases) end up as HTML and CSS.
I'd recommend gaining a basic understanding of these two file formats as it is how websites are displayed and structured.
HTML
So when you go on a website the thing you are looking at is normally made up of a thing called HTML which is a type of markup which dictates how pages are formatted and shown.
So to say it in simpler terms, HTML is a document writing format that you can use to define how text should look on a page.
Tags are what HTML uses to define certain elements on a page, a <h1> tag is a heading element, a <p> tag is a paragraph element and so on...
By using these tags you can build up a page that is structured and formatted properly.
<h1>This is a big ass heading</h1>
<p>This is a paragraph of text.</p>
<h2>This is a sub heading of the one above</h2>
<p>This is a paragraph under the subheading.</p>The best part about raw HTML is the fact that you could open up a text editor right now, copy and paste that code above into the file, save it as a .html file and then open it and it will work without any extra setup.
Lots of people use just pure HTML as a way to display their websites so there's nothing wrong with going for it raw:
Be warned though... it's not the easiest to maintain if you start making lots of pages but if your website is small, it might be the quickest and easiest route to go down.
To start wrapping your head around HTML, I'd recommend this site: W3Schools, it has helped me understand the capabilities and uses of each type of HTML tag.
CSS
So lots of HTML pages seem to have cool colors or nice formatting on the images and text; how do you do that on your page? Well for HTML pages, there's a thing called CSS.
CSS stands for Cascading Style Sheet, which is a document that you create to set rules for how certain elements on your page should look or be rendered.
HTML manages the structure of the page, text and images; CSS handles the ♥ style ♥.
I am still learning CSS myself as it is an in depth and crazy language, there's so much you can do with it that it's pretty hard to try and explain.
But if you want the <h1> tags on your website to be centered and blue, then you can do so with CSS:
h1{
text-align: center;
color: blue;
}As you can see, just like HTML, the code is quite easy to read and understand. The names of the properties and their values can be read out as a sentence.
The heading tag text is aligned to the center and the heading color is blue.
I will probably create some tutorials about CSS, but this post is already going to be massive, so just go DYOR and start fiddling with the wonderful world of HTML and CSS.
Once again I will be recommending W3Schools for learning CSS as they do a great job of easing you into to the complexity of it all.
Pros
Pure and simple
HTML and CSS is the simplest and purest way you can create websites. What you type and style is what the page will render and display. The advantage to this method is that you are cutting out alot of the fluff that other methods create, the only thing you need to worry about is right infront of you.
Making the site this way is a great way to make sure that everything looks and feels the way you intend it to be. Each page is created and styled by you and it's a very rewarding and fun experience!
Lightweight for users
Have you ever heard of the term web-bloat? It's the idea that alot of websites have unnecessary code that slows down the page and makes it difficult for users with limited internet to be able to view and use your website. The best example of this is to go and look up how to make a sponge cake and any recipe website you click on will have 700 adverts and slow loading times.
When you create your site with just HTML and CSS the file size of your site will be small and therefor the time and bandwith required to view your site will be small aswell.
Not only that, but there's no unnecessary code to be loaded on your website, meaning that the only thing that's being loaded is what needs to be there to be displayed.
If you choose to go down this route, there is quite a large audience of people who will appreciate your extra effort to make a website that is quick and slim.
Customizable
This pro will probably show up a few times in this article but I cannot begin to stress how much of a benefit it is. Being able to style and shape your website is probably the most important plus to coding it yourself. You get to control how things should look and depending on your requirements; you can display it in the most effective and nicest way.
Having the ability to customize the look and flow of your website is a benefit that should be heavily considered when choosing what method you want to use.
Free!
Since you are just writing documents and styling them, there's no service or subscription needed to get your website online!
All you need is a domain to host your site on. There's lots of ways to get a free domain to host your website on! If you want a specific domain (like bensden.xyz) then you'll have to pay to keep it every year. My domain costs ~10GBP every year and that's all I have to pay!
Cons
Hard to maintain
When you start building your website, it will be easy to handle, if you need to change something on one page, then you only have 4 other pages to make that change on so it's not too much hassle right?
Once you start upping the size of your website, making changes or updates to the site can be cumbersome, especially when it involves modifying multiple pages.
The chance of error also increases as the website gets larger, this is just due to the volume of files and the number of places your head will be at, at any one point.
Pure HTML and CSS websites confused me due to the constant splitting of attention, I personally found it very hard to manage and maintain concentration and focus when doing this method.
Content management
Similar to the issue above, when making changes or updates to the content on you website, you will be constantly fighting to figure out how many places you will have to make an edit or change a link. If you structure your site well however, this may never become an issue.
If your website is mainly based around individual pages that do not interact or overlap with each other then content management is very manageable.
Site builders, the easy but costly way
So you've heard of things like WordPress, Wix and SquareSpace. You probably found them when you looked up easy way to make a website. I think they are straightforward and easy to use. However those two things come at a cost... and quite a steep one at that!
At an average cost of around 15GBP per month (that's if you go for the cheapest, most unrestricted monthly plan on one of the websites mentioned above) it's up to you to decide whether or not you are willing to pay to have your very own, out-of-the-box website.
I've tried using these website builders and I'll give you a few pros and cons so that you can decide whether or not this route is right for you...
Pros
No code
So here's the biggest plus, no code!!!.
You don't have to look at a single HTML or CSS tag to get your website up and running. These site building websites let you drag and drop elements onto the page and fill them with whatever content you like. It's a quick and easy process that lets you put together a page that is structured the way you want it to be.
Alot of the elements that you can use out of the box are more than capable of doing everything you'd ever need them to do. When it comes to creating a portfolio website or a place to write about your favorite movies, a website builder will have you covered.
Easy to maintain
With all of the elements being drag and drop, you don't have to put alot of effort into modifying or adding to pages. Editing content on a page is a quick and simple process; changing the order of elements on a page is just a drag and drop away.
When creating new pages, you can copy the structure of other pages you've made previously and reuse them! This means all you have to do is change the content and you've already got a new page on your website.
The duplication of effort that is present in the raw HTML and CSS building of websites is no longer an issue.
Hard to break
When using a site builder, there will not be a point in time where your website will break and not display, when you code your own website, if you mess something up, the web page may not load or your browser may throw an error. When you are dragging and dropping elements, the only thing you can mess up is your spelling or the color/style.
This removes alot of the headache that coding your own website brings about, letting you get on with actually creating the content of the site.
Cons
Rigid templates
The most frustrating part for me when it comes to site builders is the fact that I have to adhere to the templates that they are providing me with.
This is not an issue if you want to go out of your way and code some custom components using the site builder, but that just defeats the entire purpose of using one.
Many of the templates are good enough. If you aren't doing anything too crazy then site builders are a good enough method for creating and developing your online presence.
Generic looking website
The other issue with site building websites is that everyone else is using the same stuff you are using. This fact alone means that your website will look generic and samey.
This may not be a concern for alot of people, as long as the website lets them create and show off their work they are happy. I am not one of those people, I hate template websites.
But you aren't me and maybe you've found a template that is everything you could have dreamed for and more.
If you just need your website to be easy to set up and display what you want it to display, then ignore this con.
Performance
Alot of these site building websites have alot of bloat to them. This makes your website load and run slower than if you weren't using a site builder.
Not only is the website slower due to an increased amount of code, but the site-building companies may also put your website onto a server that is not very high speed, meaning it may take longer for your website to load and render.
This issue can be avoided by spending more money and upgrading your plan, but that's up to you.
Cost
This one is pretty self explanatory but the ease of use and creation of site building websites comes at a cost, and that cost is a monthly subscription that if you don't pay, your website is no longer accessible to the public.
So you do have a website and it was easy to create but now you are on the hook until you either decide to build the website again yourself or you decide you don't want a website anymore.
It's up to you to figure out whether or not the ease of creation and hosting is worth the cost.
Locked in
As soon as you start using a site-builder, it's very hard to migrate or move away from it. You can't take a copy of the website and then make it yourself for free. You are stuck within that ecosystem and the only way you can get out is by starting over again.
In my previous post about why you should have your own website I spoke about the benefit of owning all of your content. If you decide to use one of these site-building websites, you don't really own the content your putting on it.
Static-Site-Generators, my favorite
With the issues I mentioned before with HTML being hard to maintain and site builders being too rigid to customize, static-site-generators (SSG) are a good middle ground that provides good scalability, customization and maintainability.
The main thing that SSGs do best is that they allow you to break up your pages and content into smaller, reusable chunks that you can use wherever you like.
Let me create an example...
A shopping website has 100 unique items for sale and each item has a page where you can view information and images of the item. It would be a pain to have to create a new page for each one of those items so instead; I create a template for the item page, putting the item description chunk on the right and the item image viewing chunk on the left. Now I have a page template and I'm able to create those 100 pages for those items without having to do it all by hand!
Your pages are no longer hand crafted documents and are instead patched together using different hand crafted chunks and elements. This process could be compared to the site-builder method where you have a bunch of pre created elements and components that you are dragging and dropping into place.
Basically, you are creating page templates and then you are creating content for those templates that is then used to generate the HTML/CSS files that are your website!
This website uses SSG to make the pages, my blog section is a generic page template that searches a folder for blog articles and then populates the page to display those articles.
Each tag and category on each article has it's own page, you can see how if I were to do that by hand, it would become unmanageable very quickly.
There are many different SSGs but I'll list a few so you can go and take a look at them:
- HUGO | A fast SSG that has a plethora of themes and templates to ~~steal~~ use.
- Gatsby | A well connected SSG that has lots of support as well as a bustling ecosystem. I'm actually looking into making some stuff with it myself.
- Astro | A SSG that has lots of integrations as well as plugins to help with creation.
- NextJS | A framework that has SSG built in as an extra little feature, can be used for alot more. This is what my site (as of 30/05/2023) is using.
All of these options mentioned have pretty well built out templates that you can use and modify. You can also just use it out of the box which is what I've recommended to a few of my friends.
I'd take a long, hard look at what you really need your site to do before you start building.
I chose NextJS because I'm comfortable with the file structure and syntax, I also knew I could create custom components that can be embedded in my posts like this thing.
Pros
Maintainable
The name of the game when it comes to SSGs is to make the development process alot less of a headache. Being able to create reusable chunks of code and page templates instead of hand coding every page gets rid of alot of the hassle that comes with static site creation.
Modular
Due to the nature of SSGs, when it comes to making changes or adding stuff to pages, the process is a breeze! IF you set it up correctly, you'll only have to change one or two files to affect multiple pages on your website.
My navigation bar at the top is it's own separate component; if I change the navbar file, the changes are present in every other page that has the navbar!
Well supported
Since SSGs are a relatively new way to create static sites, there's alot of support, plugins and templates that are being created around them. If you get stuck trying to do something, you'll be able to find an answer that isn't outdated.
Free!
Just like HTML/CSS, you aren't paying to use a service, therefor your website is free to create.
I use Vercel to host my website, they have a generous free tier that let's me do everything I need to do. The best part about vercel is that you can hook it up to a github repository and the website will automatically update whenever you make changes! The same kind of thing can be done with HUGO and Astro.
Cons
Different mindset, learning curve
It's hard to adjust your mindset when working with SSGs... you're no longer dealing with discrete, individual pages/documents. Instead you are coming up with components and collections of components that can be populated with content.
This new way of thinking tripped me up quite a bit when starting, I ended up just building a static site instead of a system that would generate it for me.
Code heavy
If you decide to not use a template, then you will be developing and programming the website yourself. Which is not too difficult since there's alot of resources and tutorials on how to do that, but you will be creating all of the components and page templates by hand.
Site regeneration
Due to the nature of SSGs, if you modify some component or template that is used throughout many pages, then the entire website has to be rebuilt and uploaded to reflect those changes. Depending on the size of your website, this may become a problem.
If you are using something that uploads and updates the site for you like (vercel)[https://vercel.com]; then you don't need to worry about this con, but if you are using something like (neocities)[https://neocities.org/] to host your website then you will have to manually upload the new files.
Closing
This has been awfully long, I hope I can get more brief as I get better at writing these posts...
No matter what route you decide to go down, the stuff that you will learn will let you improve your website or make new ones altogether! The best part about making your own website is that you can either leave it as it is, or improve upon it incrementally.
I hope the information provided helps, I wish someone had laid this all out for me when I was trying to figure out how to make my website.