- Kassym Dorsel
It's now been just over 2 years since I started this blog. When I started this blog I spent time researching blogging frameworks and finally selecting Gridsome. Back then, and now also Jamstack Site Generators are a perfect match for building small simple blogs. My initial selection was based on the following.
- Previous experience with Vue.js.
- Online consensus that Vue.js is slightly easier to learn than React.
- Gridsome was the most popular Vue.js framework at the time.
- There was a blog starter theme available gridsome-portfolio-starter.
Current state of affairs
Mid 2022 after a lull in blog posts, I wrote up a blog which required me to setup my development environment again and this turned out to be a huge pain due to dependency incompatibility. Vue.js 3 had recently been released and there seemed to be no concrete plan for Gridsome to start using it and to this day there has been no progress. It seems Gridsome maintenance is non existent.
I started looking for a new framework to rebuild my blog with. My criteria.
- Ready made, easy to use template for building a blog. Preferably one with a UI I like.
- Established framework with obvious current and future support. This can be backed by a company or a established set of core maintainers.
- Preferably use tailwindcss.
I ended searching for ready templates for the top 4 most popular site generators based on Jamstack Github stars.
During my research I did run into SvelteKit. This framework looked promising and I liked the philosophy, however it was still pre 1.0 and didn't have any templates I liked. v1.0 has just been released now as of this writing. The next time I plan on switching frameworks for my blog, this will be on the top of my list.
The blog posts themselves were easily migrated with a copy paste to the new folder. Most static site generators use the same format and front matter.
The repository dependencies were slightly out of date, but I was able to easily upgrade it to the latest version of Next.js and React.
I've been using GraphComment as my commenting system. It does provide a basic free tier which is sufficient for my needs. It worked fine, but I was never happy with it. The comment box was slow to load on the blog, the admin interface was clunky and it was a third party.
As part of the switch to a new framework, I also went looking for a better commenting system. I was looking for something simple, elegant and fast. No more bloat.
My research lead me to Comment.io service which looks great. However, at this time, with my minimal comment needs, I cannot justify the cost. I was left with a clunky free service (Disqus, GraphComment, etc), a Github based comment (utterances, giscus), paying for a good service (Comment.io) or running my own self hosting comment system.
I finally found two self hosted solutions, Cusdis and Isso. I implemented and tested both of them out and finally decided on Isso. Isso proved to be the simpler one to integrate, and I was never able to fully get the comment email notifications to work on Cusdis.
Isso requires either Docker or Python server support. I was again looking for a free option given the low resources needed to run it. My search lead me to Fly.io. Their free tier is perfect for my use case.
Installing Isso on Fly.io
Given the architecture of the service, it required a few extra steps to get everything configured and I will explain them here.
First up, installing and signing in to Fly. You can follow the instructions.
brew install flyctl
flyctl auth signup
Create an empty directory:
mkdir isso && cd isso
fly.toml configuration file based on the Isso Docker Image.
flyctl launch --image ghcr.io/isso-comments/isso:latest
Create a persistent volume where the SQLite db and Isso configuration file will be saved.
flyctl volumes create isso_data --size 1
Add the persistent volume to the fly configuration file. The Isso Docker image looks for its configuration file in
/config and this is hardcoded.
[mounts] source="isso_data" destination="/config"
The Isso Docker image will fail to start if the config is missing. This is where the trick is needed to get the config to the persistent volume on Fly. It's the catch 22, as Fly requires Docker start to succeed to get access to the persistent volume, however the Isso will not start unless it has a config file.
Therefore, we need to start a dummy image to get initial access to the persistent volume. Manually change the image in the config to the Fly test image.
[build] # image = "ghcr.io/isso-comments/isso:latest" image = "flyio/hellofly:latest"
Now we can deploy this dummy app.
Once complete you can check the status and ensure the instance is running. Record the
Hostname here as this will be needed in the Isso config.
Now to setup ssh access to the server.
flyctl ssh issue --agent
Before we get ahead, the Isso config file is needed. This is based on the default config and modified to deploy on Fly. The two items which must be changed are the
public-endpoint. These must point to the persistent Fly volume which was created and mounted to
[general] name = johndoe dbpath = /config/comments.db host = https://johndoe.com/ max-age = 15m notify = smtp reply-notifications = true log-file = /config/isso.log gravatar = true latest-enabled = true [moderation] enabled = false [admin] enabled = true password = a long and hard to guess password [server] listen = http://localhost:8080 reload = false profile = false public-endpoint = https://my-awesome-project-12345.fly.dev [guard] enabled = true ratelimit = 3 direct-reply = 5 reply-to-self = false require-author = true require-email = false [smtp] username = smtp user name password = smtp password host = smtp host relay port = 587 security = starttls to = personal email address from = "John Doe" <email@example.com> timeout = 10
Now log into the sftp shell and transfer the
isso.cfg. If you'd like to import comments from another platform this is where you'd upload those files as needed.
flyctl ssh sftp shell cd config put isso.cfg
Now back to the
fly.toml file, change the image back to isso.
[build] image = "ghcr.io/isso-comments/isso:latest" # image = "flyio/hellofly:latest"
Finally deploy the isso comment platform.
If everything goes to plan, Isso backend will now be up and running. To verify go to
/js/embed.min.js from the base URL.
The blog was due for a refresh, both the front end and the back end. This is now successfully completed. Now I can go back to writing some new content blogs and doing basic dependency maintenance on the framework.
Here's the final breakdown of my tech stack. Now that I see it written down, seems quite complicated for a simple static blog.
- Static Blog Generator -> Next.js
- Blog Hosting -> Vercel
- Comment Framework -> Isso
- Comment Hosting -> Fly.io
- Comment email notification and newsletter provider -> Sendinblue
- Analytics -> Clicky
- Analytics -> Vercel Analytics
Future plans include combining newsletter email and notification emails to a single provider. Vercel Analytics is a new feature currently in Beta. Pricing will be released once out of beta. At that point I will be reviewing the analytics platform I will use.
What do you use for your stack?
Happy New Year!