I talked about lack of high level planning before in SPA and SEO - can we make peace? post. High level planning is extremely important. With high level planning, we can achieve:
- A much shorter development time: I don’t have to wait until the problem arises after all the coding.
- A better product: well planned product vs. a toy!
The problem is that coding is fun, so whenever I have an idea I have this urge to just get my IDE up and start creating something. Well, it’s definitely much, much, much better than not creating anything, (no product vs. a toy) and I think it’s a good way to get used to programming and all when you’re a beginner. In fact, when you’re just starting programming, maybe you know too little to plan anything good. But now I should be moving on from the beginner phase, so it has almost no benefits, but a lot of harms.
I did a little more research to solve the problem I’m facing; SEO and static website. My blog being a react app is definitely an overkill, so I wanted to fix that. Because I felt stupid. I do want to move onto Svelte soon, but for now I wanted to explore more options and just gain some knowledge about the current landscape of this part of web development.
Oh actually, the reason why I was looking at this today was because I wanted to re-factor the codes for a commercial project I did. It’s a very simple website of a tattooist. Definitely static. You won’t believe it, but I did not use any tool. It contains 3 pages, and they all share header and footer sections, and I manually copied and pasted those for each page. True story! Of course I had to re-copy and paste whenever there was a change. Also it was pure CSS, which means a LOT of repetition. Again, true story! The final result was really good, because I worked with a great designer, and I made his design happen. But I wasn’t proud of my code. I must fix it.
So I wanted something like template engine (like Pug, ejs, etc.), but wasn’t sure if I could use those to output a static website. But I knew it must be possible. So I looked up and the keyword was static site generator, and there were a number of solutions I could use. I had a look at eleventy, or 11ty, and it looked like it could do the job, but it’s in a very early stage. Check out more about 11ty here.
Basically what 11ty or its alternatives does is:
- Create static web using the template engine of your choice;
- Build it -> this build is the static site!
- Deploy it, wherever you want to. Freedom!
I liked it because it was framework agnostic, and left much to the developer. This meant it is perfect for a small project like the tattooist website.
After that, I started to have a more look at the whole topic, because it is very related to the current problem I’m facing (SEO with SPA). And there were a few interesting topics and this is where I started to, again, think that I really should have done some planning before I made this blog. The most interesting topic was Jamstack.
Jamstack is an architecture. You know LAMP stack, or MERN stack? It’s something like that. J for Javascript, A for API, M for Markup. It claims to have many benefits, but I haven’t looked at the details yet. Hers it Jamstack’s website if you’re interested.
So because it’s an architecture, it’ll be like ’this webite is a Jamstack webiste’ or ‘adheres to Jamstack’s standards’ or sth like that.
In their webiste, they have a list of frameworks that follows Jamstack architecture, and their I saw Next.js, Svelte, 11ty, and MANY MORE. I gave Next.js a quick try, and it’s great, but I didn’t like the fact that it felt like its structure was too stiff (not flexible). But I only tried it very briefly.
But I definitely could have used it for this blog! It’s has all the solutions to my current problems built-in it, such as pre-rendering, SEO, etc. I may switch to Next.js for now. Or, I could just make switch directly to Svelte. Idk.
But man, plan ahead when programming. Pretty please?
