Migrating KevinCarlson.codes from Ghost to Hugo
As far back as my earliest post in 2017, I’ve been using Ghost CMS to power this site. While it has worked well over the last several years, it’s also pretty clear that it’s overkill for what I’m doing here. As of now, I’m using a static site generator called Hugo to cut down on hosting costs, and potentially increase overall site performance.
Moving Content
Originally, Ghost used Markdown for its content, just like Hugo. However, as the Ghost platform has grown, it moved to a What You See Is What You Get style editor in the interest of usability, and adding features. This makes it a lot nicer to edit posts from within Ghost, but made the migration process a lot more difficult than it would have been a few years ago.
Since the old site only had seven articles (those are rookie numbers!), I figured it was easier to copy and paste the content into Visual Studio Code, and redo the formatting manually. This also gave me a chance to review all of the content on the site, and add a few warning labels to posts with outdated information. As part of the process, I also made an effort to keep the same paths for existing content just in case there were any inbound links out there.
Theming
Unlike the actual posts, I wasn’t too worried about faithfully recreating my old Ghost theme in Hugo. It’s similar to what I had before, albeit a bit more simplified. Essentially, I created a basic mobile first layout, and used a few CSS rules to handle larger screen sizes. There’s no boilerplate code or CSS reset, so there may be some inconsistencies across browsers and platforms. At the same time, I’m not fighting against default styling that Ghost adds for its content blocks, so the CSS feels a lot cleaner.
Callout blocks like this one were particularly frustrating to style the way I wanted them in Ghost. Doing these in Hugo was mercifully straightforward.
To be clear, Hugo can handle more sophisticated styling with SCSS, SASS, or anything else you want to throw at it. But it also doesn’t add anything out of the box that you have to fight with, if you only need something simple. In my case, I anticipate that the smaller CSS and HTML files will provide the bulk of the performance improvements to the site.
Hosting
The main draw for me is that many services offer free hosting for static sites. I don’t need to keep a virtual server instance running to keep my site up, or log into the service to work on writing new posts. The entire site exists as a private GitHub repository that’s cloned locally on my machine. Technically, I don’t even need to be online if I’m just writing something. When I’m ready to publish, all I need to do is commit my changes to GitHub, and the hosting service automatically runs Hugo to generate the updated site, and uploads the new version to where they’re hosting it.