Why i ditched Wordpress to do a blog from scratch with Next.js

Published: 30.07.2022

Hi!

Let's start with a really really short introduction to me as this is the first post on this website.

I am Till. I like emojis a lot 😹. And that's it! More on me will either be in another post or maybe in that (currently empty) about me page.

And now take some ice cubes, take something heavy, crush those ice cubes with it. Thanks, that was a great way to break the ice between you and me 🤘. I'm gonna head out now, my people at /r/dadjokes need me.

Blog from scratch - a journey to learn frontend development but also a platform to talk about anything software development

Before we start - if you like what you read, yea, than keep on reading but also come back regularly. I will write more posts about all those topics that i talked about here in this blog post (and more).

With that out of the way let's talk about that headline. I installed Wordpress with that big dream to actually write some nice content. I didn't actually use it... Why? Because there were lots of hurdles that i didn't want to tackle.

I do like to take the easy road where i can as it saves time and headaches. So Wordpress was ideal to just go and write content, right? But what about Cookie banners? SEO? Theme customization? Code customization? Databases and backups? WHAT ABOUT PHP? How can i make everything work together? How could i look my friends into their eyes again? How to do XYZ?

Sure there is probably a plugin for everything (yea, i guess even for friends that would not judge me by using Wordpress 🤌) but to have a clean and smooth working system i would have to write glue code anyway, right? I am a senior developer and know my way around code. I could do that, yea. But if i have to code anyway, why not do it from scratch then? Learning frontend development is something on my todo list for ages. So i could actually hit (erm, we do not kill here, ok?) 2 birds with one stone:

• Learn frontend
• Have a nice little coding project
• Not learn Wordpress
• Get a blog, duh!
• Get a system where i do not have to care for any quirks except for my bug... erm features
• Fully statically generated - no need for backends (yet)
• No need for Backups - git will be my friend
• Cook spaghetti with JavaScript 🍝
• Nice SEO (that's how you got here, right?)
• I can f****ing (freaking, not the other word you thought of) do it as I AM AN IT GUY, baby!
• ...

Seems like as if i can't count but let's just say that there were AT LEAST 2 bullet points that got me to do my blog without Wordpress.

Ok, so Wordpress is ditched, let's get to the fun part by telling you how i came to exactly this point from a technical standpoint from where you can read this word here... and this one.... and also this and the others 🤡 (yes, i am a very funny guy). I am actually not done yet as the "deployment" is still missing - putting this blog online - but as you are reading this it seems as if the future me did succeed in that 🙃. As hinted before, this page is not the typical CMS (e.g. Wordpress, Drupal, Strapi,...) based blog but my own creation "from scratch" if you don't count that i did not reinvent JavaScript or React/Next.js ( or the other stuff i definitely did not do from scratch 😅). This is basically a statically generated site without a backend API (yet).

What follows is a list of things i did to reach this point, as small chapters, to give you an overview. I will probably follow up on all of those topics in separate posts. So if you want to know about my reasoning on why i chose Next.js, why i didn't pick MDX for content or why every damn html tag is wrapped in a component, or... then please go on reading but also come back "soon"™ 🤗

Setting up the project with Next.js

I have a memory like a goldfish. (Read that sentence again, did you also read "memory leak"? Would also bit here, right? 🤡) That is why my wife usually knows about all of my appointments and reminds me about everything about 3.6 times. In this case? Yea, i mean, she likes the results of what i am programming, but the "journey" to that result? She couldn't care less and who am i to blame her? So this is on me to remember. And luckily i have tooling to assist me on that 🤓.

The tool to remember things? Not your usual "notes" app or something similar. It's git! But yea, only if i remember to commit often with useful commit messages... Tell me, what do you think? Look at that great Image right below! (Wow, i am just now writing an image component to show you something 😅 who would have thought that images would be a good addition to a blog? 🤡)

Phewww... luckily i didn't do it just in one single commit but rather wrote some "useful" stuff in there 😅. So let's see what we did here. First commit, *click*, yea there is a Readme, ah... yea.... ( Thank god that my virtual assistant git "remembers" what i did 🙈 )

So i googled on how to start a Next.js project. Sure, there is possibly a way to start "more" from scratch but i somehow ended up at Next.js learn where it starts with a tutorial project example. I don't know which way is better to get started or if there is even another more useful way. That's a mystery i won't find out in the near future except for when i change my mind and start a new project 🤡.

Ok, run that command there from Next.js learn but change up the name to something more meaningful like "best-blog-eva" (i didn't do that, fo shoo!).

(Yea, that was the codeblock component i JUST made up to wrap those shell commands in)

Followed by a

in the directory of that app

Hello World® seems to work so let's add stuff to the project to actually make it mine.

SEO (Search Engine Optimization) is king - adding Preact

Hey Mom. If only you are reading this then my Plan didn't work out. If you are not my Mom then i guess SEO somehow brought you here. AND THAT'S GREAT! 🎉🎊🎉🎊🎉🎊

I am doing Next.js to have easy SSG (Server Side Generation) of pages. This is good for SEO as the content is fully loaded when navigating to the page. Another nice thing to have in terms of SEO is performance. That means things like "First Contentful Paint" or "Time to Interactive". How do we get those? Small bundle size and not doing stupid stuff in the JS (JavaScript) Code 👌. To learn more take your page on a ride in Chrome Dev Tools - Lighthouse. That thing is nice!!!!one!eleven11!

So bundle size is important and i already knew about Preact. Preact works something like a full replacement to React as in that it does "the same things"© but the lib is way smaller. It also does it in a nice compatible way so that you can basically plug it into your package.json und next.config.js and be done with it. Basically you can still do as if you work with React, like doing imports to the React lib but under the hood Preact is used. The magic of aliasing!

That's nice to shave of some KBs from that page! 🌈 And if i remember correctly (goldfish memory, remember? me neither) then it also helps with other performance characteristics.

The first impression is the most important one - Material UI

Yes it is true. This page looks so awesome that you didn't even think about all that nice design that is thrown into your face. The design is so nice and invisible one could think there isn't one.

And do you know how i did that? I just added Material UI to the project! Yea, and that's basically it. Just.... added.

I mean... i didn't tell you in the first part that i am a frontend guru. Nono, i am learning to get there some day. And you will literally see when that happens 😇. First time using react, too.

Ok, the start was a blatant lie. I actually did my best with my limited knowledge to create an experience where you do not immediately want to puke 🤢. The design is simple, colors hand picked, some shadows here and there, some margin "somewhere" and that's what you see here. I hope you like it for now. As this is a dictatorship there is nothing you can do anyway.

Material UI helped me to get those things done. The other reason for picking a UI lib was that it comes with ready-to-use components that i can use to "get shit done"™. It's also nice that things like a11y (Accessibility) is mostly taken care of by setting ARIA labels and setting components in relationships. Could probably also help with i18n but i didn't look into that. English is the best way to reach most of anyone anyway, for now 👍. Hey, and probably some other badass sh**t (that's shirt, 5 letters!), probably helps with SEO too as it is using the right structural elements.

So, i am using some Material UI things. Getting used to it. Seems like a good addition 😇.

(Did you notice that those emojis repeat a lot? That's because i am too lazy to find new ones and just copy those over some from some paragraph above)

Works on my machine

YES! The thing works! But does it? I am a veteran software developer so one of the first things i do is make sure that the "thing" i am working on is actually deployable. I mean i do NOT want to ship my machine right? Should work on other machines, too. It's also important to check if all the things are doing what they are supposed to do, e.g. is Preact actually working?

See, when in Next.js dev mode there is all this convenience for development. But did you take a look at the bundle size?

That's like having a animal bedding for a squirrel and trying to tell your pet elephant to sleep in there. I don't know where you got that elephant from but yea, that's not gonna fit.

To fix that i went on and first get to know on how to do a Next.js production build. Furthermore there is containerization technology like Docker to actually write down part of the build pipeline and make it reproducible. And that's what i did 🧑‍💻.

(That's a new emoji, did you notice?)

So the blog is now dockerized and ready for production. Let's see what that gets us.

I marked the most important one. You can probably spot some more shaved of KBs. I mean we all know that having less KBs is sexy. And you now know what the girls are talking about when they say that bigger size is not everything.

Foundation is done, let's start with the Scaffolding

As usual in software development... i did a lot of things, really important things, but nothing to show of. Let's change that by trying to actually write some JS. Easier done than said.

(Or was that the other way round?)

It was "easy" in terms of getting stuff done. The combination of React / Preact / Next.js / Material UI works really well. Sure i had to read some tutorials and definitely copie.... did not copy some code from StackOverflow but the page started to get somewhere.

What did i build? First of all i "ejected" some Next.js "config/layout" like _app.js and _document.js to get more options on what i can actually do. Using those files lets me create a nice sandwich layout of navigation, content and footer, but also lets me do stuff outside of content, e.g. set meta attributes.

I went on by copyi... creating my own navigation. Actually i went on and modified the navigation so that i can feed it a JSON with tuples of name + link so that i can easily extend the clickable links. Same thing with the footer for legal topics like the pages for legal notice and data privacy. There is also a dummy about me page that i used to test out that routing works. I also dabbled with color themes, basically i disabled the light theme and then picked some colors that i thought would work well.

And this is how the page looked at some point.

(Damn, that Image is really big)

That's blog inception right here. Lot's of empty space but as WSB (WallStreetBets) would say: "It's free real estate". I mean i know that you are looking at the website RIGHT NOW and know how it looks 🥴. But i am leaving that screenshot in here for teh futura! Will be fun to look at it when i start to get gud with styling!

Ok, so scaffolding almost done. What i now needed was 2 pages and the blog framework would be done. (Who needs content anyway? Nice empty pages is all we need 📖.) What pages you ask? Ah, sorry, yea, almost missed telling you that. (1) a page that can show content as posts and (2) a page that can list all available posts like an index or "latest blogs" page.

(Wow, i really lied when i said the chapters will be small in this post...)

I started with the "slug" page. The slug page works like a wildcard: Any URL that fits the URL pattern of the slug page gets routed to it. Then the slug page gets the URL that was called and can show content based on it. Let's give an example. I do have my slug page in the directory

So when i call something likethe slug page will get "xyz" and fetch that blog post with that name and show it to you. That's exactly how this post here works, just that xyz is what you currently see in the address bar of your browser.

I had lots of fun with the slug page because it didn't work out at first as i hoped for. For my blog posts i wanted to have the full might of React/Next.js. So i needed a way to render React components instead of basic HTML. I looked around and found that others write their content in MDX. That's markdown with some glitter on top. You can also embed some meta data in there.

MDX looks good, but WHY WOULD I DO THAT? I am right here in JavaScript. I could just define my content as JavaScript, right? Would work out of the box! Here is how i wanted my content to look like. Pretty simple and straight forward.

Content is a real React component. That means i can do some magic tricks and those will work. See this number here? Click it. Do it! I know you want to!

0

Can also shift-click it! That's the power of JS and React 💩.

So all i have to do is just require/import it when doing SSG and be done with it, right? There were some gotchas with Next.js like that static properties (e.g. that blog post as JS) need to be serializable. What do you think? Are React components serializable? Maybe, but i didn't get to find out in multiple hours. Eventually i found my way around that problem but i was on the brink of going the MDX route. BUT I DIDN'T! Me alpha male! I've made fire with my bare hands! (No humans were hurt while writing this blog).

Ok, so i got that to work and i can finally render my posts nicely. But no one would be able to navigate to them. Great prospects for a blog, right? RIP 💀. So i did that other thing, that "index" page called "latest" right on top in the navigation. It looks for all content files and aggregates them to a nice list. For now that works for me. Will do an upgrade to that page when there are "too many" posts in the aggregation and no one can find the newest posts anymore.

Legal stuff or how to not fuck up GDPR and german law

Last "content" (besides this post here, that i obviously wrote "last") was those legal pages that you find in the footer. Here we have the legal notice, mandated by german law, and a data privacy document.

For the legal notice i basically took other pages legal notices as a template and filled in my own data. Should work out 🥴.

The data privacy was generated from a generator (doh!). In there you find all the needed information on how i handle your data (what data? I am not handling anything right now). There are already chapters for Google Analytics, VG Wort and all the social media in there as i intend to use those services in the future. But before i implement those services i will create a cookie banner to comply with GDPR.

The end?

And that's how we ended right here! Sure, i need to deploy this baby to a server now but yea, that's future Till 🧑‍💻. I already have some infrastructure for that. I will add a route to my API Gateway and that's it (almost). Will write about that at some point.

Crazy if you got here by reading and not just scrolling. Thanks for taking your time. Hope you liked it. If you do then hit that like button and subscri... woops, wrong platform... then please come back in the future. I will do some kind of notification in the future like an RSS feed or something to notify on updates. Other social media will follow so you can stay up to date.

More to follow! Peace out