I went STACKless. Here's what it feels like:

#webdev #showdev #html #beginners

I started an adventure - To design my website through the guides I write.

And if I'm to start from ground zero, I'll have to do without any frameworks or build tools.

Meaning, I'm only left with just HTML files and the assets it need.

Funny enough, the experience is not bad.

Here are the only 2 things I've to deal with:

Folder structure
Folder path

In fact, the second is not a problem as you'll soon find out.

Folder Structure

Getting the homepage to work is as we already do:

Drop an index.html file at the root folder.

Boom! And the homepage will load.

Where the challenge starts from is loading other web pages and assets.

But the ideology is the same.

Say you need about-us page, all you have to do is:

Create a folder titled about-us
Drop an index.html file in it.

That's it! Done!

You'll be able to visit the page at example.com/about-us

And if you need a category on that URL, you'll need to create a folder for each one.

Here's how my folder structure looks to accommodate the above scenario

| toheeb.com/
|-- index.html
|-- plays/
|---- coding-ui-1/
|------ index.html

This creates two webpages:

The homepage - toheeb.com
The article coding-ui-1 in plays category. The resulting URL will be toheeb.com/plays/coding-ui-1

You can create as much pages as you want using this methodology.

The second weird thing is referencing assets files, you'll need a path

Folder Path

~~This is where things can become tricky. You need to consider the location of your file in respect to the location of the asset.~~

It'll be tricky if you decide to use relative paths. Save yourself the stress and reference your assets from your domain name.

(Silly me actually mixed things up. Unnecessary headache. I realised while writing now 😂)

In my case, I have images/ and videos/ on the root folder.

| toheeb.com/
|-- index.html
|-- images/
|-- videos/
|-- plays/
|---- coding-ui-1/
|------ index.html

To reference any asset, all I have to do is use the absolute path.

For example: toheeb.com/images/my-image.jpg

With absolute paths, you won't have to worry calculating if you should use ../, ../../, or ../../../../../../../../. You get the gist😉

With that, you can have your website running fine as expected.

No build time needs to be calculated by providers such as Netlify, or Vercel.

That's how my site is currently running. No problems so far with the two pages I currently have:

The homepage - toheeb.com
And one article I still have hidden in plain site -How to code an accessible website with HTML, CSS - by example

Anyways, have you had any experience with going STACKless?

This seems straightforward for me at the moment. I might even stick to it till I can't cope. Should I?

Anyways, let me know your view.

Unto the next adventure - I'm finding interesting using Github for content planning on my blog. Will share details later.

Follow my journey on Twitter with real time updates: 👇

2 👋

@toheebdotcom

I need to make 2 updates on the article above 👆

1.

The PRO of absolute URLs is to avoid relative reference like '../', './.././'

The CON is you won't be able to use your domain on localhost for testing

Best bet is to use relative paths. And go through those worries 😂

18:14 PM - 28 Sep 2021