From Angular to Analog

A few days ago, this Website switched from Angular homepage plus a Docusaurus blog to a single Analog site. This article will explain why I made this decision, what are the differences, and how I made the migration.

Motivation

My first motivation was to explore Analog in general and the decision that the old home, which is still available here, was not very eye pleasing in my opinion. So I decided that it was time for a rewrite. In addition to that the old blog was made with Docusaurus and was not directly connected to the homepage and instead deployed under a subdomain (which is now redirected to this page) and because of that it had also a different theme.

By combining the homepage and the blog on one site with a rewrite using Analog, the fresh and great angular meta-framework, there would be less cross-linking between sites and also less work to keep the sites up to date in the future.

Analog vs. Angular + Docusaurus

Angular and Docusaurus are great technologies, but Analog is a great way to untangle your dependencies in the project and be able to do more with less work.

Problems of Angular

A general problem of pure Angular is that it is not very SEO-friendly. If you want to get good SEO, you have to use Server-Site-Rendering (SSR), but I did not want to use SEO for a purely static web page with no dynamic content on it. Everything on this site is 100% static and can be served statically, so there is no reason to add a complicated SSR setup to the site.

Problems of Docusaurus

The biggest problem here was the cross site linking. I completely forgot to do that all the time and, because of that, the old homepage was never linked to the blog. Probably nobody ever noticed that there was a blog at all. And the second problem is that Docusaurus is React based, which is not bad at all, but my personal React knowledge is not that good as an Angular developer. So I probably will get into some trouble with Docusaurus in the future if I want to extend the blog with some special features.

Solution with Analog

For me, Analog resolves all the issues I had with pure Angular and Docusaurus. With the Static-Site-Generation (SSG), it resolves the SEO issues pure Angular has without the hassle of implementing SSR and, since it is Angular based, I can use all my knowledge that I already have for it and I can extend the site with all things I want to use in the future. It's also great that it's now possible for me to simply combine the homepage with the blog on one single page. That will also result in less hassle about dependency updates later on.

Migrating

Homepage Rewrite

Since I already had a homepage, it was quite simple to decide what I wanted to show on the new site. I did not like everything about the old site, so I decided to make a total rewrite that implements more but also clear information about myself and what I do. As example, the old technology overview didn't made it to the new site, but a simpler and less cluttered version is on the about me page.

I also updated the design to a material 3 theme but this time also with TailwindCSS because I wanted to try the utility functions from it which I normal would write myself in the css and give it a try.

I also updated the design to a material 3 theme and this time I added TailwindCSS, because I wanted to try the utility classes from it which I normally would write myself and give it a try.

Deployment

After the rewrite of the old homepage was finished I deployed it just like the hold page. I stayed with Cloudflare pages since that worked pretty well for my setup and with the SSG build its also the best way to serve all the pages. The deployment is made by my GitLab CI/CD pipeline and can be automatically or manual executed whenever I want.

After the rewrite of the old homepage was finished, I deployed it just like the old page. I stayed with CloudFlare Pages since that worked pretty well for me and with the SSG build, it's also the best way to serve all the pages. The deployment is made using my GitLab CI/CD pipeline and can be automatically or manual executed whenever I want.

Blog Implementation

Now it was time for the more interesting part. The implementation of the Docusaurus blog into the page.

Docusaurus is using markdown files for the blog pages with some descriptions on top of the markdown files and the content transformed to semantic HTML on the page.

Since analog is already supporting content pages and markdown it is a very simple setup to move everything over. So I simply had to add a overview page for all blog entries and a page how the blog entry would be rendered. The markdown pages stayed nearly the same as in the docusaurus docs. Just the image setup is something that I am not that happy with at the moment. But that is something that can be improved in the future.

Since Analog is already supporting content pages and markdown, it is a very simple setup to move everything over. I simply had to add an overview page for all blog entries and a page about how a blog entry would be rendered. The markdown pages stayed nearly the same as in the Docusaurus docs. Just the image setup is something that I am not that happy with at the moment. But that is something that can be improved in the future.

After that, I added the blog pages to the pre-rendered pages and automatically deployed the update to production.

Future plans

I am very happy with the new page. It is more descriptive about me and what I do but at the same time, with a cleaner layout and a better navigation through the site.

Since the blog is now integrated into the site, I definitely want to use that opportunity more often and write about topics that I am interested in. I want to share what I learn or how I would implement new techniques and more.

It would be great if you wanted to follow me on that journey and if you got any questions or topics you want to talk about with me have to don't hesitate to contact me via email, X/Twitter or any other way you could think about.