The process of moving from Wordpress to Jigsaw
Published 2 years and 9 months ago, Categorized under: Blogging, Personal

Basically, I was able to move my Wordpress blog to Jigsaw using few articles I've read, so am not going to re-write what they have wrote, instead I'll point out to the articles and put small notes about what I've did as not everything worked with me out of the box.

  1. How to use Jigsaw to quickly and easily build static sites: This is an introduction article about Jigsaw and how you can use, I prefer that you read it as it will help you proceed.
  2. Move from wordpress to static site with Jigsaw: This article explain in details what you should do to export your posts and convert them to Markdown.
  3. Exporting Wordpress Posts To Markdown: This article which is also mentioned in the previous link, explain how to export and convert your Wordpress posts from xml to separate Markdown files.

Since, some of what have been mentioned in the second article, especially the hack to edit, has fixed in the new versions you may not need to edit anything, and to be sure you will need to do some trail and catch method. Maybe when you try to install it, your package manager will install an old version, maybe not, so the safest thing you can do is to manually install it from source, also I can tell from the opened tabs I have that using pandoc latest version also helped, at least this is what I can remember I did, and you can utilize Docker python image to do so, this way you will not have to install anything locally instead everything will be installed within Docker.

Once you got your Markdown files, you will have to go over each and every file, for me it was about 90 files, to clean up Wordpress mess, none used tags and any posts you don't need any more .. etc. For example if you have links to Youtube files, which Wordpress will automatically embed, you will have to clean them up and embed them manually using something like the following snippet:

[![<video_title>](<video_id>/0.jpg)](<video_id> "<video_title>")

Which will automatically show an image which is linked to your video, remember to change video_id and video_title to match your file.

Also one of the most important articles that you should read, especially if you are building a technical site with the need to have code highlight, is to read Jonas Döbertin article Adding (build-time) syntax highlighting to your Jigsaw site, as it will help you to speed the website a bit so you wont need to load the highlight.js script when loading your website. One thing I noticed is that no matter what I do Jigsaw will always escape the added HTML tags, so I needed to change Jonas code a bit to overwrite the following static function:

    # Static Methods

    protected static function escape($text, $allowQuotes = false)
        return $text;

Which will return the text without escaping the HTML from the code section.

Lastly, you will need to read Matt Stauffer article Adding an Auto-Generated Sitemap to Your Jigsaw-based Static Site.

Since I am using TailwindCSS for the CSS, I also utilized PurgeCSS to minimize the size of the generated CSS file with few modification to the original snippet to have something like:

let mix = require('laravel-mix');
let build = require('./tasks/build.js');
let tailwindcss = require('tailwindcss');

let glob = require("glob-all");
let PurgecssPlugin = require("purgecss-webpack-plugin");

class TailwindExtractor {
    static extract(content) {
        return content.match(/[A-Za-z0-9-_:\/]+/g) || [];

    plugins: [
        build.browserSync(),['source/**/*.md', 'source/**/*.php', 'source/**/*.scss', '!source/**/_tmp/*']),
        new PurgecssPlugin({

            // Specify the locations of any files you want to scan for class names.
            paths: glob.sync([
                path.join(__dirname, 'source/**/*.php'),
                path.join(__dirname, 'source/**/*.js')
            whitelistPatterns: [/(hljs)/],
            extractors: [{
                extractor: TailwindExtractor,
                // Specify the file extensions to include when scanning for
                // class names.
                extensions: ["html", "js", "php", "vue"]

mix.js('source/_assets/js/main.js', 'js')
    .sass('source/_assets/sass/main.scss', 'css')
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.js') ],

As you can see, I've whitelisted all the CSS style for the code highlighting to make sure that my posts will always have some code styling, as the Markdown files wont have any idea about those classes, so PurgeCSS will just remove them from the generated css file.

So the result is that now I have a simple site built with Jigsaw & TailwindCSS and hosted with Netlify.

Share It via: