Porting from Wix to Jekyll - how-to

I’ve moved my blog posts from a paid Wix site to GitHub, using GitHub Pages and the Jekyll website/blog engine. This enables me to write posts in Markdown and integrate with my Obsidian vault (I’ll write about that another day).

There were several reasons why I moved this blog:

  • cost - why pay for Wix when GitHub Pages are free?
  • annoyance with Wix 1 - I don’t like organisations that repeatedly email with (the same) “time-limited” offers
  • annoyance with Wix 2 - it was really overkill for what I wanted
  • annoyance with Wix 3 - I didn’t want to get locked into a proprietary system
  • ease of workflow - drafting posts on the Wix website just doesn’t fit with the way I want to work
  • challenge - I like changing things around from time to time and to learn new stuff along the way

The Markdown format is widely used (in several dialects) and has the great advantage that it’s plain text so easy to copy from one system to another. Having control over the files on my own system (and backing them up!) adds to the feeling I’ve got a much more portable system.

There really wasn’t much challenge involved in this change, partly because I wanted the blog to be very straightforward. I’m using the default theme and no tags but may reconsider this approach.

Basic set up

In order to do this you need some basic knowledge of Git/GitHub, a very small amount of HTML and Markdown (but this is really very simple).

I find it easiest to use the GitHub desktop application in Windows but cloning and pushing files to the site can also be done at the command line.

It’s useful but not essential to have your own domain name.

There are various websites that take you through the process in more depth, in particular:

The following sites are limited on Medium but if you don’t have a Medium account then you can save them to Pocket:

You can read more about Git and GitHub at

A quick run-through of what you need to do to set-up:

  • create an account at GitHub if you don’t already have one
  • fork the Jekyll Now repository (link)
  • rename the cloned repository to yourusername.GitHub.io
  • using the GitHub desktop application, clone the repository to your local system
  • add a profile picture to the images folder
  • create a new assets folder
  • customise the _config.yml file
    • this contains the basic details that is shown on the home page, this is a template so it’s just a case of filling in the blanks, no coding needed
  • customise the about.md file
    • this is the text of the About page, again this is a simple template
  • customise the _highlights.scss file
    • renamed the highlight block to pre-highlight to get rid of annoying double-boxes around code (as explained at Stackoverflow)
  • customise the index.html file
    • I changed the post list to include the date and to truncate the post excerpt like so:
---
layout: default
---

<div class="posts">
  {% for post in site.posts %}
    <article class="post">

      <h2><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }} - {{ post.date | date: "%-d %B %Y" }}</a></h2>

      <div class="entry">
		{{ post.excerpt | strip_html | truncatewords:75 }}
      </div>

      <a href="{{ site.baseurl }}{{ post.url }}" class="read-more">Read More</a>
    </article>
  {% endfor %}
</div>
  • add posts to the _posts folder and images to the assets folder
  • commit and push the changes from your system

This whole set up took me about 30 minutes, and I’m sure it can be done a lot quicker. New posts are added just with the last two steps, everything else is a one-off.

Jekyll site - how to write posts is a good site to start with in terms of writing posts but it’s really easy.

Porting from Wix

By far the most time I spent on this whole process was copying the posts and images from Wix to the new site. Some issues I faced:

  • I did not use a good file naming system for the screenshots and I found it tedious to match up the actual files with the posts. I’ve improved this by renaming image files to include the date of the related post.
  • copying the text from Wix introduced backslash quoting of code and file references, particularly to underscores. These were hard to track down.
  • some of the Power BI M code included double curly braces. Unfortunately these are used by the underlying Liquid templating language. I had to surround such code with raw tags.

I used Notepad++ at times to reformat codes since its search and replace features are so powerful. Yes, I used to use Vi(m).

My new process

Now that Obsidian is now very much part of my daily routine, being in it for much of the day, and being able to see my notes from other sources and my page of ideas, makes the whole writing experience so much better. I found it distracting moving from one tool to another.

I can now draft posts in Obsidian in a separate drafts folder, keeping track of ideas in another file. When they’re cooked, I can transfer posts to the final folder. In the meantime, everything is separately backed up (also to GitHub).

Links to images are fine since the draft and final blog post folders are in the same path relative to the assets folder as they are on GitHub. So the markdown:

![Figure 1](../assets/yyyy-mm-dd-fig1.png)

will work in both. It’s really helpful when drafting to see the images.

Links from post to post don’t work but that’s easily checkable.

I use a short Powershell script with RoboCopy to copy posts from the final posts and assets folders in my Obsidian vault to the cloned Jekyll Now repository in a separate folder structure. Together with my latest toy, Keypirinha, I can copy the files in a few keystrokes. I’m sure if I were still using Linux, I’d have similar bash scripts for this (and committing/pushing changes).

I can then use the GitHub desktop application to commit and push the changes. After a minute or so the changes have been processed and are live on the website.GitHub

Written on February 6, 2021