the * quilting * bee

Welcome to Lost Letters


How to Write a Blog Comfortably with an SSG

Published on 06 Nov 2022

If you’re reading this, it means that I’ve figured out an ideal blog writing and publishing experience for Neocities.
Here’s my criteria for a solution:

  1. Allows me to use all the key commands I’m used to for formatting text (ex: CTRL + b for bolding text, etc.)
  2. Doesn’t require me to learn markdown
  3. Has spell check & grammar correction
  4. Has dark mode
  5. Has yaml template functionality
  6. Plays nicely with GitHub Desktop, so I can commit and push new posts alongside any changes I also make in VS Code

I started with a search of Markdown text editors and was drawn to Obsidian.md. Apparently, this app got popular alongside Notion.so as a note-taking app for students. I watched this overview by Nicole van der Hoeven, which wasn’t specific to my use case, but intrigued me enough to look into it further because she demonstrated criteria 1-4. When I saw Nicole using yaml, the language Jekyll uses to format blog posts, I dove deeper, finding this video that provided an accessible beginner overview of yaml and how yaml works in Obsidian. In the video, the creator mentioned he made a whole video on how to create and use templates in Obsidian, which was excellent. These videos convinced me that Obsidian could meet my 5th criteria, so I downloaded and set up everything to confirm GitHub was picking up the new blog post file, which led me to believe all would be well. If you’re reading this, then I was able to commit, push, and deploy this new post to Neocities, so I was right! 🥳

I really recommend watching the three videos I linked above before diving into this step-by-step guide, so you’re familiar with Obsidian’s UI (it’s not laid out like any other programs I use. Now, here’s how I did it:

  1. Download Obsidian.md
  2. Create a new vault > Create
  3. Pick a Vault name - I just went with the name of my site, but it doesn’t matter
  4. Specify a location - specify your local GitHub folder that houses all your site’s blog post files, so that GitHub Desktop will pick up new files as changes you can commit and push to your repo and subsequently deploy to Neocities if you already followed my guide to setting up Jekyll. For me, this folder is called _posts.
  5. Click Create. If you’ve already written blog posts, they should appear automatically now.
  6. Settings > Editor > toggle on Show Frontmatter (this allows you to preview your yaml)
  7. Get automatic spell check and grammar help with the LanguageTool Integration plugin.
    1. Settings > Community Plugins >Browse > Periodic Notes > Install
    2. Settings > Community plugins > toggle on LanguageTool Integration
    3. Settings > LanguageTool Integration > toggle on Autocheck Text (this gives you spell check) > toggle on Picky mode (this gives you grammar suggestions)
  8. Create a template for your blog posts
    1. New folder > call it Templates > New note > title it 2022-MM-DD, then add your blog’s yaml info below that. You can copy this from a previous blog post if you have one, or feel free to use mine:
           ---
           layout:  post
           title:  "Title"
           date:   
           tags:  [tag1, tag2]  
           ---
      
    2. Settings > Templates > Template folder location > pick the Templates folder you just created from the dropdown > Date format - leave this as YYYY-MM-DD > Time format - change to HH:mm:ss ZZ since that’s what Jekyll uses
  9. Get Periodic Notes plugin, so that new posts will be created with the right file title format.
    1. Settings > Community Plugins >Browse > Periodic Notes > Install
    2. Settings > Community plugins > toggle on Periodic Notes
    3. Settings > Periodic Notes> toggle on daily notes > For Daily Note Template, specify Template/2022-MM-DD.md > For Note Folder, specify /
  10. Get Calendar plugin.
    1. Settings > Community Plugins >Browse > Calendar > Install
    2. Settings > Community plugins > toggle on Calendar
    3. Back in the main UI > drag the calendar icon on the top right, such that it ends up taking up some screen real estate on the right side to display a full month’s calendar.
    4. Click today’s date to create a New Daily Note > Create. You should see the template populated automatically now with the month and day that you clicked on the calendar. If you want to write multiple blog posts on the same day, edit the note title to include something after the day like 2022-11-06-birthday. This will become the URL of the post, so keep that in mind.
  11. Write a blog post
    1. Edit yaml like "Title" (keep the quotation marks around your title though!)
    2. After the second --- Hit Enter to start writing your post on the next line.
  12. Publish your blog post by opening GitHub Desktop > select all the files that were created as a result of your vault being housed in the _posts folder that are not your blog post and template > right click > Ignore file (add to .gitignore) to hide these > select just the new blog post with the file title you specified in step 8.4 > Write a summary > Commit to main > Push origin. You can also choose to add the template to .gitignore if you want or publish it.


🏠
since 2022.10.29