What I've learned from setting up this website

This was so hard.

A little context

Building this site has been quite an experience, ranging from fun and excitedness, to stress and straight up frustration.

For whatever reasons, I’ve never wanted to touch anything related to webdev in my career. Ever since back in college. There was so much stuff around it that it always seemed very daunting and overwhelming. I can’t stand to even know all of the terms involved: HTML, NGINX, CSS, JavaScript, React, Bootstrap, PHP, Boilerplate, TypeScript, Vue, Flutter, Django, Flask and whatever other bullshit there is out there. I just never wanted to have anything to do with this.

Of course, at some point, reality hit me in the face. Web development is one of the areas with the most job availability out there in the industry, even if the tech jobs bubble had popped. So when I tried to get a job as a Software Engineer for some months and got absolutely nothing, I started to think about my options and after some weeks of thought, I realized I should be honest with myself and admit that I was pretty underqualified and that I needed to learn at least some elements of Web Development.

So, motivated and determined to get back on track and refresh my (few) webdev skills and learn new things, I got back to CS50, Harvard’s Introductory course to Computer Science. This is, in my opinion, a pretty great course for anyone interested in Computer Science. Why take an introductory course? Because this course is pretty different to what you might be thinking. CS50 starts with pretty basic stuff, moves on to The C Programming Language and then to Python and then to SQL and then to Web Development, including very, very hard assignments along the way. This was good, I wanted a course that felt like a road or a structured path, because I hate to tackle new technologies by themselves.

Week 7 was a fun introduction to SQL, sqlite more specifically, it was pretty fun, to be honest. At around Week 8, I was assigned to set up a full website, with HTML, CSS and some JavaScript. I was quite annoyed even before starting and just did not wanted to do it, but of course, I just pushed through.

The end result was a quite simple, (but cute in a way) site with very minimal CSS and/or JS fanciness. It looked like something out of the 90’s internet, and I loved that. Still, I wanted to improve it a little more. By the way, I submitted the website and got a passing grade on the couse’s assignment.

After looking up some stuff and visiting the amazing Lain Webring and going through many people’s badass websites, I just wanted to create something better. In particular, I was quite interested in Sizeof(cat)’s website’. Long story short, they have their theme up there available to download for free. I did so and tried to set up my own website and it was a nightmare.

My error and what no one should ever do

• Do not copy someone else’s configuration just like that.
  In my case, I just read the part where it said “this website is powered by Hugo”, went to Google, installed Hugo and copied the configs. Nothing worked and it was a mess to get it up working. Even after I managed to get around 80% of stuff to work properly, there were still many little elements that would not work and I just couldn’t figure out.

• Do not rush.
  I googled like crazy, I tried to look up through Hugo’s documentation, but not reading in an orderly way, but instead trying to find what I was looking for. In a sort of putting pieces together in a rather clunky way. I was even looking at a Luke Smith’s video tutorial on Hugo (which did help me a little, honestly).

I deleted my site’s directory multiple times out of frustration and started from zero multiple times. I moved this, copied that, modified there, etc… I even (very ashamedly) emailed Sizeof(cat) asking my stupid questions. I think he got tired of me because he never replied after my second message.

Why did I do that to myself?

What I should have done and I recommend for everyone

• Be patient.
  Start from the bottom. Go slowly, hell; you got a very basic HTML site with only text and white background? Keep and use that for some weeks or months. Add stuff slowly, don’t lose track of your project and directories structures (this is kind of hypocritical because the structure of this website is already getting messy).

• When moving up to something more fancy, pick something simple
  Like for example Hugo, it is quite simple and (somewhat) straightforward, that is, if you listen to the next point.

• Read the docs slowly and in order
  This is something that you probably know, but, like me, you probably keep ignoring it. You should always try to read the whole (or as much as you can) of the docs slowly and in order. Do not look for the specific thing you want to fix on your shitty broken website/app because you rushed and copied someone else’s config. Instead, pick one of the documentation’s examples, work slowly, adding to it little by little, step by step, and reading the documentation in order.

• KISS
  Keep It Simple, Stupid. There is no shame in setting up something simple but practical. lots of great websites and projects look very simple but work great, for example, a classic: suckless.org.

Thanks, Captain Obvious

You probably know all of this and probably think this is quite silly. But the stress of building this thing was killing me. My eyes were so tired and dry, that it was so uncomfortable to work at the computer. My neck and left shoulder were so strained and in pain. I had so much stress. You are probably laughing, but it was hard for me.

This post could be rubbish for some people, but I am posting it anyway because it feels like it could assert some good practices/habits in me. I guess that makes it worth it.

Happy coding!