I imagine the first thing I should mention is why go through all this. I don't even work in computer science or in web development. I just look at everything in life as something I can learn. I actually have experience in system administration so ironically I could spin web servers with Apache but I could not write or really troubleshoot them. This is why I decided it was time, just a simple site to get started.
Now the most complicated part, finding the right tools.
Let's clear this out right away, being mainly a python programmer I first tried Django and Flask. Lesson learned, I had more to learn than first anticipated. That's why I decided to go for a static site generator instead. Baby steps.
I knew Sphinx already because that's what I write my python documentation in but it doesn't have the flexibility I want. After looking through the great site that is Jamstack I developed an interest in Zola for a few reasons.
It's a complete solution. The base Zola installation allows for a complete experience without addons and additional packages.
It's well documented. The getting started part of the documentation is easy to understand for someone who never used an SSG. It can get you up and running with something basic in under an hour.
it uses Tera templates, which are similar to Jinja2's. Being used to Ansible this meant I wouldn't have to learn a template syntax as well.
The themes follow the same structure as the base website but in a separate folder. For someone self-learning, comprehensive and diverse examples are the best and the themes did delivered.
It's Fresh. I've seen many softwares and programming languages that became a dependency mess as time went on. It's especially bad when looking at a tutorial or blog post and 15 minutes in I realize it's for Python 2.7.
Having decided which SSG to use, I now had to figure if I wanted to design mobile or desktop first. I read it's usually recommended to go mobile first and then fix what breaks when going with a bigger display. I decided to still go desktop first as it is my main focus.
For the layout I wanted a sidebar (just love full heigh content), an avatar at the top of the sidebar, menu in the middle and socials at the bottom. When going mobile the sidebar would have to be hidden in order to free the screen with a "hamburger" button to show it. I thought this would be easy enough.
Color wise I'm quite fond of the Nord color palette for a neutral feel. If I wanted something more colorful I would probably have gone with Aura which I use for with VScode and my desktop environment (KDE).
Function wise, I wanted to build a site where I could put my projects and ideas. A way to train myself in explaining my taught process, and documenting my accomplishments. On top of that I wanted a search bar, and a way to browse by projects or tags. Taxonomies were a must for that last part. Having the site dynamically create the links from the pages "information header" made things so simple. I could just add a section like this:
+++
...
[taxonomies]
projects = ["Website"]
tags = ["Web Development", "CSS", "Javascript", "SCSS/SASS", "HTML", "Programming", "Zola"]
+++
and a small section like this in my config.extra section:
[extra.projects]
"Website" = "This is where I'll document my process with developing this website"
And now I could have both a page with simple tags as well as a page with project cards to give them some "pop".
So my experience with frontend was limited to a few applications in PyQT. If I wanted to be serious about this site there's a few things I needed to learn.
At first I felt HTML could be a major roadblock because it didn't look like any language I knew. It ended up being the easiest part to learn. HTML is really just a bunch of containers each with their attributes that gets push to their content.
I vaguely knew about CSS but I never heard of SCSS. The syntax was quite easy to understand and comparing with the CSS equivalent one major aspect of SCSS felt like a no-brainer, nesting.
Considering that HTML is all about nesting, it feel so much natural to use a similar styling structure. Let's take for example the following:
<!DOCTYPE html>
<html>
...
<body>
<h1> Body header </h1>
<div class="my-div">
<h1>my-div header</h1>
</div>
</body>
</html>
In this case the second h1 is nested in the my-div section, it makes sense that the styling would look like this:
h1 {
text-align: left;
}
.my-div {
padding: 3em;
h1 {
text-align: center;
text-decoration-line: underline;
}
}
In comparison CSS use a flat syntax with repeating names.
h1 {
text-align: left;
}
.my-div {
padding: 3em;
}
.my-div h1 {
text-align: center;
text-decoration-line: underline;
}
There's also the possibility to nest @media conditional. This mean that all the information for a section is together making it easier to debug in my opinion.
...
h1 {
text-align: center;
text-decoration-line: underline;
@media only screen and (max-width:700px) {
text-align: right;
}
}
...
Having experience in solidity meant that learning javascript in the context of a website was not going to be about syntax. They are both quite similar with solidity having additional "fluff" and strict typing.
// Solidity
function Add(uint256 a, uint256 b) pure public returns (uint256) {
return a + b;
}
// Javascript
function Add(a, b){
return a + b;
}
What I had to learn is how to handle events, like when the screen is resized beyond a set limit
document.addEventListener('DOMContentLoaded', function () {
(window.onresize = function () {
if (window.innerWidth >= 992) {
...
}
})
})
Or when I want to have a search box appear when I click the search button
searchBtn.addEventListener('click', function () {
var modal = document.getElementById("searchModal");
modal.style.display = "block";
}
I taught I was doing great until I stumbled upon discussion using JQuery syntax without any mention of it. I spent too much time trying to understand why $(searchBtn).on('click', function() {} was failing miserably.
So at this point I do have a good grasp of the basics and can actively build on top of what I have already done. One thing I want to add is integrating a comment section to my post. I'll have to test integration with platforms like Lemmy, Mastodon or Disqus.