Logo
Published on

How to Build Your Own Blog(4): Introduction to Frontend Plugins

209 Views

Why use plugins?

The most important reason is that it saves development time. Some features are too complex to implement them quickly. With third-party plugins, powerful features can be added quickly with reliability guaranteed.

Another reason is to pick up some knowledge on the development of these plugins if I want to implement the feature later.

The List of Features and Plugins

Here is a breakdown of the features built with plugins, why I built these features and the plugins I used for these features.

  1. Comment System

Comments are the heartbeat of engagement on any blog. This is the primary way I can get feedback from visitors of this website. I'm expecting anyone leaving any comments on any blog. (Though I haven't received any :( ). The comment system I used is Waline.

Waline is lightweight, supports markdown, emoji and social login. It is also easy to deploy, which only took me 1 hour to get it integrated with my website. And best of all, it's completely FREE!!!

  1. Tracking Post Views

Knowing the number of views of each post helps me understand what reasonates with visitors. Fortunately, Waline also supports tracking page views, which saves me time to find and integrate with another plugin.

  1. Tracking the Number of Online Visitors

This feature is less important, but when I researched other blogs, I found some of them have this feature, which makes me wondering how I could brought this feature to my website.

After some research (asking ChatGPT), I found some chat plugins that can do this but they're overkill. So I decided to implement this feature by myself.

I implemented a real-time WebSocket solution:

  • A WebSocket server tracks the number of open connections.
  • When a visitor accesses the site, the frontend establishes a WebSocket connection with the server.
  • The server broadcasts the total number of active connections as the "online visitor count" to all connected clients.

Limitation: This solution works only with a single WebSocket server since the count is stored in memory. To scale it, you’d need to store the connection count in a database like Redis and handle failure scenarios (e.g., if Redis goes down when a visitor disconnects).

  1. Tracking Visitors from Different Places

Tracking the total number of visitors can help set milestones for the site. Beyond that, I’m also curious about the geographic distribution of visitors.

While many web analytics tools like Google Analytics and ClustrMap can track visitor data, they lack built-in UI components for visualizing the data on your website. My solution involves integrating Google Analytics, GeoNames, and Leaflet.

  • Google Analytics: Stores and retrieves visitor data. However, the data is partially anonymized and doesn’t include latitude and longitude, which are required for rendering a map.
  • GeoNames API: Converts city names from Google Analytics data into latitude and longitude.
  • Leaflet: Renders the visitor distribution on a world map.

Note: Both Google Analytics and GeoNames APIs are free but have usage limits. Unless my site faces an attack, I’m not concerned about hitting those limits.

  1. Subscription

To keep readers updated with the latest post, I’ve added a newsletter subscription system using EmailOctopus. Again, the reason is that it offers free tier service and is easy to be integrated with.


By leveraging these plugins and tools, I’ve been able to add valuable features to my website without spending excessive time on development. They’ve not only saved time but also enhanced my learning, making the journey of building this blog all the more rewarding.