Published on

Moving to Next.js and Isso

Authors
  • avatar
    Name
    Kassym Dorsel
    Twitter

Introduction

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.

I had also settled on GraphComment as my comment platform as it had a free tier and proved to be easy to implement. MainChimp was selected as the email newsletter provider.

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.

Maintaining a framework like this is no easy task, and requires time commitment. The Node.js, Javascript world moves fast and you can quickly be left in the dust.

The future

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.

  • Next.js
  • Hugo
  • Gatsby
  • Jekyll

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.

I finally stumbled on this tailwind-nextjs-starter-blog. It checked all the boxes and as a bonus Next.js is built by Vercel which is where I've been hosting my blog.

Migration

Blog Posts

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.

Dependencies

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.

Comments

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.

Install: brew install flyctl

Signup: flyctl auth signup

Create an empty directory: mkdir isso && cd isso

Generate the 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. flyctl deploy

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. flyctl status

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 dbpath, log-file and public-endpoint. These must point to the persistent Fly volume which was created and mounted to /config.

[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" <comment@johndoe.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. flyctl deploy

If everything goes to plan, Isso backend will now be up and running. To verify go to /admin or /js/embed.min.js from the base URL.

Conclusion

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.

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!

View on GitHub