scroll-behavior: smooth;

Zdenek Polach

Bye-Bye Wordpress, Welcome Gatsby

2020-10-18BlogWordPressHTML

This article is about why and how-to Migrating WordPress Based Blog to Gatsby…

I have powered my blog by WordPress more than 10 years. I have changed theme for the site several times, modified some things, but last years I have had feeling that it brings more and more problems to me…

WordPress, What’s Wrong?

My first concern has been security. If you are monitor word of computer security, then you cannot miss lot of discovered and reported WordPress vulnerabilities. And vulnerable sites can be hacked…

I have used the free version of the Wordfence security plugin for long time. And it worked. But amount of attacks reported by the plugin grown continuously. Same as requests to patch some vulnerability ASAP! It has been matter of time when a hacker or bot will use Zero day vulnerability and get my site hacked…

Next problem with WordPress is plugins. Plugins offer lot of useful additional functionality to WordPress sites. Is extremely easy to install and configure them. On another side many plugins are not written so well then plugin vulnerability is reason of successful hack of the site often. Finally, lot of plugins become unmaintained from one day to another without notice and then is necessary to search for an alternative or disable the plugin for security reasons. Then maintenance of the WordPress site is time consuming - you have always a thing to upgrade or patch.

Finally, if you are not PHP programmer then give to the WordPress site nice and fresh look is not easy. If you can get nice site, then you must buy some expensive Template (looks that all well look templates are paid) and eventually modify it or you have to became to be a PHP programmer. Not what I want to be yet.

Due all these reasons I started to thing about some replacement for the WordPress. But I did not move from contemplations to realization. The main reason for this was absence of an useful alternative…

All Things Come to Him Who Waits

A month ago, I saw nice site and fresh design somewhere on the Internet. It inspired me to take deep look onto the site and try to find how it is implemented. And then I have discovered that it’s not based on WordPress or something similar but generated by Hugo framework. By other word, I have discovered Static Site Generators (SSGs).

This concept has fascinated me. “Compilers” for websites, translating markdown files to static HTML pages and improve its look and behavior by generated JavaScript and CSS. Easy automated deployment from Git repo. And what is the best - nothing is running onto the server, then nothing can be hacked.

For programmer as me, this concept is wonderful!

I have discovered quickly that here are more frameworks than Hugo:

If I can use a SSG for my blog, then what I choose? Many choices complicating process of selection the right one. What can I do if I select something wrong?

Because markdown language is common and well known, then is easy to switch to another framework. Next bonus against the WordPress where everything is stored in the database in own special format!

Welcome Gatsby

After lot of reading and analyzing pros and cons I have selected the Gatsby. It has big and live community, lot of resources, plugins and How-To articles. Additionally, it is using JavaScript. I do not have experience with this language yet. But WinDbg has got JavaScript support to automate debugging and knowledge of the JavaScript is one of useful skills what I can to get.

Then I made decision to give Gatsby a chance to try. Why not connect necessary thing (learning JavaScript) with something funny (redesign my Blog).

Of course, after first great impression some important questions were come. For example, if no site database exists and all content must be generated when content is published then how I can provide search engine or comments to my pages?

Time to find answers… And seems that each question has solution:

If you are JavaScript beginner (as me) and do not have plenty time to start building site from scratch then you can choose an Gatsby Starter from catalogue and use it directly or provide necessary modifications( and learn how-to thing works) to get the site up and running quickly.

Finally if you do not plan big site with million hits per day then you don’t need to search for Hosting plan and deploy the site on Netlify for free..

And Then Gatsby Powered Blog Has Born!

Ok, if you read to this part of the article then you know reasons why I made decision to redesign my blog. Let’s take look onto final realization.

I have chosen Atte Juvonen’s Starter as starting point of my site. Then I have extended and modified it to fit my needs. For example, I have added comments, changed colors and font sizes, improved syntax highlighting, fixed ordered list formatting. Added better tables support. Added possibility to specify exact images size and text wrapping around them….

It’s enough for me for now. But I believe that new things will come. because extending the Gatsby based site is fun for me emoji-smiley

You can find source codes for my site on my GitHub here: https://github.com/polachz/blog. This is not a Gatsby Starter. I have removed static content and blog posts to private repositories, first time due privacy, second one because when people clone the starter, then often forget to remove original content and publish it as own by the mistake.

I do not have ambition to provide Gatsby Starter. I publish my blog code on GitHub just because maybe someone can find some my mods useful and use it on its own site. Or just to look how badly I implement some things emoji-wink

Of course, if you really want to clone my repo and use it as your starter then you can try to do it. You can try to get missing files in the content and the static folder from original baobabKoodaa starter and probably things will work. But I do not grant this. You have to try on your own risk.

Last step in my redesign process was to move the content from the WordPress to my new blog. I exported content to XML by Tools -> Export in WordPress and then used ExitWP tool to transform the XML to markdown files. Of course, I had to manually polish these files, copy images etc. But the most of work was done by ExitWP and rest of the work didn’t take a lot of time.

Finally, my redesigned Gatsby based blog is up and running. I’ll be happy if you find now or in the future some of my posts or projects useful. Feel free to subscribe to the newsletter. And you are also welcome to leave a comment to me, even you find a mistake in my article or leave to me an idea how to make things better.

© Zdenek Polach - Last update 21.12.2020 18:02.