Seamonkey + Pandoc + Hugo = Win!
As one of my favorite philosophers like to say, let’s begin by defining our terms?
What is Seamonkey?#
From Wikipedia:
SeaMonkey is a free and open-source Internet suite. It is the continuation of the former Mozilla Application Suite, based on the same source code,[6] which itself grew out of Netscape Communicator and formed the base of Netscape 6 and Netscape 7.
SeaMonkey was created in 2005 after the Mozilla Foundation decided to focus on the standalone projects Firefox and Thunderbird. The development of SeaMonkey is community-driven, in contrast to the Mozilla Application Suite, which until its last released version (1.7.13) was governed by the Mozilla Foundation. The new project-leading group is called the SeaMonkey Council
More importantly for what we’re doing, what is the function that allows us to write documents? That would be the built-in Composer.
SeaMonkey Composer is a WYSIWYG HTML editor descended from Mozilla Composer. Its main user interface features four tabs: Normal (WYSIWYG), HTML tags, HTML code, and browser preview. The generated code is HTML 4.01 Transitional.
What does that mean for us? That means that we have a mature FOSS HTML editor. However it’s a got some secret sauce that I haven’t seen in any other editor.
Working with Images#
Normally when you’re working with Hugo, you need to both upload any images to a static images folder and you need to add in the code to the page to be able to show them. However, since we’re looking for an easier way to do this, we want to see how Seamonkey will work with images.
Let’s take a look at the original HTML source code from the post that I wrote recently on Geoguessr.
Instead of doing the standard <img src="image.png">
function that you
would expect with HTML, it actually incorporates the image directly into
the HTML by converting it to base64. This means that you don’t need to
upload multiple files. You just need to upload a single file that
contains everything.
What about Markdown?#
If you’ve been working with Hugo, you probably know that it works natively with Markdown documents, not with the html that Seamonkey provides. Unfortunately that also means that you will need to convert the HTML to Markdown. It’s pretty simple to do, but it is an extra step. To do this, I suggest using Pandoc.
Pandoc is great in that it handles both the HTML that is created by Seamonkey and the markdown that is used by Hugo very well. The command is pretty simple:
pandoc -f html -t markdown mydocument.html -o mydocument.md
With this command we are telling Pandoc to convert from HTML to Markdown. The original document name is mydocument.html and we want it to output it mydocument.md
What about Hugo?#
Is there anything special that you need to do with Hugo? Not really, but I would do it the following way to ensure that Hugo is OK with the markdown file from Pandoc, but this is probably not the only way.
Create a new post:
hugo new content posts/mydocument.md
Then get the headers section from this file:
+++
title = "Mydocument"
date = "2023-09-09T14:51:00+02:00"
author = "infopunk"
authorTwitter = "" #do not include @
cover = ""
tags = ["", ""]
keywords = ["", ""]
description = ""
showFullContent = false
readingTime = false
hideComments = false
color = "" #color from the theme settings
+++
And then add it to the mydocument.md that was created by Pandoc. After that copy the full file back to the posts directory or where ever you want to it to go and then run the hugo command like you normally would.
What does this do for me?
In my opinion, it simplifies the creation of new pages for Hugo. Yes, you can write the Markdown files by hand if you prefer. I know a lot of people do. However, if you’re using Hugo as a blogging platform and you want to quickly write a page with images without a lot of hassle, this is amazing. To me, this combination is a Wordpress killer. The main reason I kept going back to Wordpress is because it was a lot easier to just write without worrying about a lot of extra details that I am prone to forget. Using this method, I can simply write, save, convert to markdown, and then use the files in hugo. Granted, there are more steps that just pushing “Publish” but the pages that I create are simple. They have no cookies. They have no intrusive Javascript. They are just simple pages that share the information that I want to share.