The Final (For Now) Setting for My Personal Blog as a Dev

As developers, we often find ourselves in a cycle of continuous improvement, especially when it comes to our personal projects. For me, revamping my personal blog has become a recurring theme, each iteration serving as a valuable learning experience. This latest setup marks a significant leap forward, addressing previous challenges while embracing new technologies that enhance both functionality and productivity.

Check out the Github repo of this project.

The Struggle with SPAs

Before this latest revamp, my blog was built solely with Angular as a Single Page Application (SPA). While SPAs offer a seamless user experience, they come with inherent drawbacks, particularly in terms of SEO and social sharing:

SEO Challenges: SPAs rely heavily on JavaScript for dynamic content rendering, which can be problematic for search engine crawlers. Some crawlers struggle to index JavaScript-based content effectively, leading to poor visibility in search results.

Before the improvement for my personal blog

Social Sharing Issues: When sharing SPA content on social media, the lack of distinct URLs for each page can result in incorrect metadata being displayed, affecting how your content is perceived by potential readers.

The New Setup: A Leap Forward

The latest iteration of my blog addresses these challenges by incorporating a more robust and SEO-friendly setup:

Key Components

Angular (AnalogJS) for SSG: By leveraging AnalogJS, I've implemented Server-Side Rendering (SSR) and Static Site Generation (SSG) capabilities. This approach ensures that my blog posts are pre-rendered as static HTML files, significantly improving SEO by making content more accessible to search engine crawlers.
Tailwind + Material for Styling: Combining Tailwind CSS with Material Design provides a consistent and visually appealing interface, enhancing user experience without sacrificing performance.
Vercel for Deployment: Vercel offers seamless deployment and hosting, ensuring fast load times and reliable uptime.
Giscus for Comments: Integrating giscus allows for a more personalized and developer-friendly commenting system.
Google Analytics: For better insights into user behavior and engagement, Google Analytics provides valuable data to inform future improvements.

Benefits of the New Setup

This setup offers several advantages that have significantly improved my productivity as a developer:

SEO Improvements: With SSG, my blog posts are now more easily indexed by search engines, enhancing visibility and reach.
100% Control: By using a custom setup, I have complete control over how each component is implemented, allowing for tailored solutions to specific needs.
Staying Updated with New Technologies: This setup keeps me engaged with the latest developments in web technologies, which is invaluable for my professional growth.

Good sharing experience with SPA — Good sharing experience with SSG

Technical Insights

Let's see how the the blog project work under my current set up.

The project is using Nx workspace + PNPM for package management

Some of the highlights of the project structure:

File based routing
Blog post is written using markdown

Now, let's check out the project. First, you need to clone the project from the Github:

git clone https://github.com/dalenguyen/dalenguyen.github.io.git

Then install the packages and run the project

pnpm i
npx nx serve blog-app

You will able to access it locally at http://localhost:3000

Note: you may need to disable ssr: false for local development from vite.config.ts

After that, for building project, you just need to run the following command:

npx nx build blog-app

Since I have vercel as a preset in vite.config.ts, you will find the generated content under .vercel/output/static folder:

If you connect your Github project with Vercel, the deployment process is automated. If not, you can manually deploy the project to other hosting providers. However, the final built files will be under dist/apps/blog-app folder.

Conclusion

While this might not be the "final" iteration of my blog, it represents a significant milestone in my journey as a developer. Each revamp is an opportunity to learn and adapt, and this setup has undoubtedly made me more productive and better equipped to tackle future projects. Whether you're a seasoned developer or just starting out, embracing change and continuous improvement is key to staying ahead in the ever-evolving world of web development.