Blog = Joplin + Hugo + Github

    how-to  Comments

It’s been quite a while since I was thinking about writing a blog. The only thing that kept me away from writing is set of tools which are easy, quick and more imporantly can fuse with my day-to-day note taking process.

Swith to Joplin

I was using Boostnote as note taking app but it lacks mobile app, web-clipper and sychronization features; moreover it became very buggy lately. Then I switched to Jopline and it has all the feature as note taking app I was looking for.

Switching from Boostnote to Joplin is very straight forward.

  • Export notes from Boostnote as markdown.
  • Import them in Joplin.
  • Fix images and tags by manually copying them.

I don’t know if there’s any automated way but I could do that since I had just started taking notes and didn’t have many of them.

Hugo: Joplin to A Blog

Hugo is a static site generator and moderately simple. So the idea is to convert Joplin files to Hugo markdown format and publish them automatically to GitHub Pages.

Requirements

  • Github account
  • Google Drive
  • Insync (this is optional. You can choose any to sync Joplin directory to Google Drive.)

Steps

  • Make Joplin notes available publically.

    • Sync Joplin to local directory.
    • Directory is synced to Google Drive via Insync.
    • Share the Google Drive directory as Anyone with Link option.

  • Get Google service account credential.

    • Create a new project if you don’t have any at Developer Console
    • Enable Google Drive API.

    2f7546ec74aaf8e083682e4b43923b05.png

    • Create a service account, furnish a new private key and download it in JSON format.

    4311b793c59ef1c3f8346afa4344647a.png

  • Prepare a GitHub Page respository.

    • Create a GitHub Page respository.
    • Create two branches: www and master
      • Make www as default branch.
      • www branch is where (http://mysite.com) Hugo source and Joplin to Hugo converter script will live.
      • master branch is where actual static site will live. GitHub doesn’t allow any other branch to publish content in personal account.
    • Add following attribute to repository’s secret.
      • GD_FOLDER_ID: <shared Joplin’s Goole Drive folder id>
      • GD_SERVICE_ACC_INFO: Service account’s json file content.

  • Enable GitHub Action and edit workflow to do the followings.

    • Enable action on push and schedule.
    • Check out www branches with their submodule to www directory.
    • Change python version to 3.7
    • Run converter script that pull drive content to temporary location and output content to www/post
    • Check out master branch to www/public directory.
    • Build www with Hugo.
    • Commit and push www/public (this is a master branch).

Here is the GitHub Repository of my setup for your reference. I host two separate static sites: https://abhi9.in for my website and https://abhi9.in/blog for my blog.

This enables me to write from any device and publish a blog post from anywhere.