Why I switched from Wordpress to Jigsaw

Published on December 29th, 2017

People who know me, know, that I started more than once a blog and just wrote under ten posts in the blog lifetime. The reason was, that I didn't have enough time. I used different backends for it. Everything that is out there. Here are some examples:

  • Wordpress
  • Plain HTML
  • Jekyll
  • Self-Written
  • Ghost
  • Tumblr
  • Blogspot

How I came to Jigsaw

Some time ago, I was in contact with Adam Wathan regarding different things and somehow we began to talk about Jigsaw, a static site generator from Tighten Co, the company where Adam was working before.

Anyways. I had a look at the documentation and was really impressed. If you know how much blog systems I tried, you also know it's very hard to impress me. So I read the documentation and thought from page to page, that this seems to be the tool I would like to use. It has exactly everything I need, that i missed in any different system.

  • Easy to install
  • Modify to my needs
  • Use Markdown
  • Easy Deployment

Let me explain, what I mean by these things:

The best system I found so far was Jekyll. If it's running, it's cool. But until it is running, it is so messy. You have to use this ruby and bundler stuff. I hate it! The wrong version here, wrong version there. Terrible. For me it was important, that it is really easy to install, flexible as possible, easy to modify, not hosted on another platform and easy to use. Setup in under 5 minutes, so to speak.

With Jigsaw you need nothing. Really! You just need to pull in a package into your composer file with composer require tightenco/jigsaw. Done! What I really like is, that it is very easy to use if you are familiar with Laravel. It uses some of their components and it feels very good. Working as you are used to.

Out of the box, there is Laravel's default template engine "Blade" for handling your templates, Laravel's "Elixir" (maybe will be replaced with mix by default?) for handling the frontend SCSS and a lot more. What really cool is, that you can define different environments. That makes deployment very easy. And in my case, I use Laravel Forge for server provisioning and deployment. It's just beautiful.

What the cool thing is: It took me exactly one day to set up this blog, to create a complete easy theme and to start writing the very first blog post. If you are interested in, how I did it exactly from scratch and how my workflow was, let me know. Maybe it is worth to create a full series about creating this blog from zero to now.

Adam Wathan's inspired theme

Everybody knows I am a big fan of simplicity. Therefore it does not surprise anyone that I like Adam's Blog Style. I decided to create a similar one, inspired by his beautiful created one. Just with some differences, I like better. I don't make any secret about, that I use different pages for getting ideas and inspirations. Nobody reinvents the wheel.

Using Laravel Mix instead of Laravel Elixir

Meanwhile, Laravel Elixir is outdated and with my @pingpingapp Project I love using TailwindCSS. Therefore I decided to pull in TailwindCSS and use Laravel Mix instead of Laravel Elixir. If you have some troubles to use Laravel Mix in Jigsaw, let me show you my webpack.mix.js.

webpack.mix.js
const argv = require('yargs').argv
const command = require('node-cmd')
const mix = require('laravel-mix')
const OnBuild = require('on-build-webpack')
const Watch = require('webpack-watch')
const tailwind = require('tailwindcss')

const env = argv.e || argv.env || 'local'
const plugins = [
    new OnBuild(() => {
        command.get('./vendor/bin/jigsaw build ' + env, (error, stdout, stderr) => {
            if (error) {
                console.log(stderr)
                process.exit(1)
            }
            console.log(stdout)
        })
    }),
    new Watch({
        paths: ['source/**/*.md', 'source/**/*.php'],
        options: { ignoreInitial: true }
    }),
]

mix.webpackConfig({ plugins })
mix.setPublicPath('source')

mix
    .js('source/_assets/js/app.js', 'source/js')
    .less('source/_assets/less/main.less', 'source/css')
    .options({
        postCss: [
            tailwind('tailwind.js'),
        ]
    })
    .browserSync({
        port: 8000,
        server: { baseDir: 'build_' + env },
        proxy: null,
        files: [
            'build_' + env + '/**/*'
        ]
    })
    .disableNotifications()

What my goal for this blog is

Last but not least: Maybe there comes the question up, what my goal for this blog is. I will keep it very short because I am still unsure about the content of this blog in the future.

What I can say in any case is, that I'm gonna write about development things. Related to Laravel and Symfony of course, but also very generic developer questions, ideas, and topics.

On the other hand, I have a lot of topics in my mind. Every day I get inspired on twitter about a lot of things, I would like to talk about. Not only development related, but also things and/or people that annoying me or things I think about.

If you have a topic, that I should cover and you would like to hear my opinion about, let me know.

Bobby Bouwmann and I are writing a book called "Laravel Secrets".
You will learn everything about the undocumented secrets of the popular Laravel framework. You can sign up using the form below to get early updates.
      Visit laravelsecrets.com to get more information.