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
inplays
category. The resulting URL will betoheeb.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 π@toheebdotcomI 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
Top comments (0)