What is it with learning that’s so captivating? I often have a few projects running at a time and I need to force myself to complete one thing before moving onto the next. This is very hard… However, I hope that I will succeed this time, with this project.
It is simple enough. I want to create a my own website “from the bottom up”. This idea has been haunting me since forever but I’ve always found some new technology that I don’t understand. Creating a website (I dare say) is relatively easy in principle. But there is so so many clever tools that has and still is being invented. As a consequence I’ve been back and forth on this quest until now! Finally, I hope to give this tour on how you can create your own website from scratch.
There is plenty of guides on how to do this, but this one will be perhaps no different. See it more as documentation on how I’ve done things rather than a tutorial for how to do new stuff.
There is as many tools and technologies as there are web developers. To keep this lightly let us skip the discussion of this vs. that. I would not be able to give a good explanation to most of that anyway… This project will aim to be a simple blog-like website. A seemingly good fit for this is Svelte with MDsveX, tailwindcss for styling and hosting at firebase. The primary reason for these is to learn the tools. I have done practically no web development so then it’s good to build simple, yet with proper technology.
There are many frameworks for builing user interfaces, currently the most popular is React by Facebook. React is quite recognizable since it mixes HTML and CSS into Javascript as to create dynamic interfaces etc. Recently Svelte was created to address a few problems of traditional frameworks which is brilliantly explained here by its creator.
One of the things I had difficult for when I started looking into Svelte was the difference between Svelte and SvelteKit. The web developer space (which I had/have no clue about) contained many more layers of abstraction than I anticipated. So, simply said…
Svelte is for managing UI components, e.g. butttons, pop-ups, cards, etc.
SvelteKit is for managing the application, e.g. which pages exist, how they are routed, managing assets, application plugins, etc.
Have you ever used Bootstrap (or similar frameworks)? Then you might understand the
power of styling your components using classes. If you don’t then you at least know
the pain of writing CSS! Frameworks like Bootstrap and Tailwind aims to alleviate
this problem by setting appropriate names to predefined styles using classes. What
Tailwind brings to the table is the naming conventions! This is best highlighted by
colours. In Bootstrap you have a few colours by names like primary or secondary.
In Tailwind you write the actual colour red-700 or teal-200. And, they have really
good documentation.
Firebase is essentially server-as-a-service provided by Google. For small projects you can use it for free and then start pay when you need more resources as you go. In this project I only need to host the files (html, javascript, images, PDFs, etc.).