A week ago from now, while creating this blog, I decided on choosing HUGO as the static site generator and host it on Netlify. The process is simple, download Hugo, choose a theme, write your post and then publish it on netlify. Easy right? Right?!!

So I followed the steps :-

  • Download Hugo → Simple
  • Choose a theme → Not so simple, there are thousands of these. But eventually I settled up on this one, which satisfies most of my needs, but then I needed to change somethings in it. Which should be simple since the code is available on Github as the theme is open source.
  • I never reached the next step.

You see, when I went to the theme’s repo and took a look, these are all the files that I saw →

├──assets
├── images
├── layouts
├──static
├── exampleSite
├── .eslintrc.yml
├── .gitignore
├── .prettierrc
├── babel.config.js
├── COMMUNITY-FEATURES.md
├── LICENSE.md
├── package.json
├── postcss.config.js
├── README.md
├── theme.toml
├── USERS.md
├── webpack.config.js
├── yarn.lock

If you are unfamiliar with the HUGO themes, this is what a freshly generated theme directory looks like

├── assets
├── images
├── layouts
├── static
├── exampleSite
├── LICENSE.md
├── theme.toml

That’s what I was hoping but when I saw the files in the Github repo, my head started to spin.

My thoughts as I went through the files that I saw for the first time with my limited knowledge and experience (2 months) of web development ecosystem and reading hundreds of comments of HN about these topics -

  • .eslintrc.yml : Something to do with ESLint
  • .prettierrc : I too use the prettier VSCode extension, so this might be for the code formatting, wait, since when did code format config started accompanying code?
  • babel.config.js : Oh for transpiling ES6 to ES5.
  • postcss.config.js : No idea what this is, a quick search told me that PostCSS was the way to write CSS, similar to SASS
  • webpack.config.js : I have heard about Webpack, no idea what it’s for, some kind of bundling?
  • yarn.lock : Yarn, as I understand is for package management, but there’s also package.json in the folder, so are we using NPM or Yarn?

As you can see, I was a little bit familiar with all of these files, but seeing all of them at once in one single project created a genuine feeling of anxiety in me as I stared at the screen and my body stated swimming in cold sweat.

I did soldier for some time and read the instructions on how to make modifications on the theme, ran the commands listed on there, but after installing the dependencies, the yarn command threw an error and I noped the fuck out of that folder, deleted it, and spent the rest of the evening on a mind numbing TV show on netflix.

The next day, I took a bare bones theme, took it’s contents, and piece by piece, built a personal theme to build this blog for you to read these words from just HTML and CSS.

The harrowing experience of peeking in that directory is still stuck with me though, I thought that the knowledge of HTML, CSS, JS and even SASS should be good enough, but then I was caught by surprise with all this tooling.

My experience to me felt very much like this article which was written 2 years before I even wrote my first line of code. So new learners have had this problem for quite a while now, and can rest a little knowing that I am not alone.

I don’t want this to end up in another rant on front end development, I feel like I read one on HN almost everyday. I am sure all those files had good reason for being there, and my unfamiliarity with them should be no excuse to curse at them. And either ways, they are pretty much standard in almost every project that I see, so I would have to learn about them anyways.

And that’s exactly what I will do, and I hope to document my experience as I parse all these files on this very blog, so that we all have a better understanding of this chaotic world of front end development. It will take a while though, as after learning web development for 2 months straight, I need to take a well deserved break.