This blog was used to be statically generated with [Jekyll](https://jekyllrb.com/), but not anymore!

I replaced Jekyll with Next.js, because I wanted to move away from Ruby gems . In this post, let me tell you how I did the move, so if you ever wanted to move yours, it would help you.

## The plan

Here's the overview of steps that I planned for the move.

1. Set up the Next.JS framework to compile blog posts written in markdown format
2. Transform Jekyll blog posts from the `YYYY-MM-DD-post-name.md` format to `post-name.mdx` so Next.JS could understand it.
3. Setting up code highlighting
4. Set up `nginx` server to rewrite old URLs to new ones.

Now, let's get to the execution part of it.

### 1. Setting up Next.js framework to compile markdown files

By default, Next.js won't recognize [mdx](https://mdxjs.com/) files. There are several tools available to make Next.js work with mdx - [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) is one such tool. I followed this [example setup](https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote) from Next.js which provides a base structure to compile mdx files.

After cloning, I customized the folder structure and styles to my liking.

### 2. Transforming old Jekyll posts

I used to save my Jekyll blog posts in `YYYY-MM-DD-post-name.md` format - which won't work (or need customization) in Next.js. So, I had to move all my existing files to the `post-name.mdx` format.

I also had to copy the post date, which was originally part of the file name, into the front matter of my posts. For this, I used [gray-matter](https://www.npmjs.com/package/gray-matter) npm package.

Here's a script that I wrote for the conversion.

```javascript
const fs = require("fs")
const path = require("path");
const matter = require("gray-matter");

const POSTS_FOLDER = path.join(__dirname, "_posts");
const OUT_FOLDER = path.join(__dirname, "out");
try {
  const posts = fs.readdirSync(POSTS_FOLDER);
  for(let i=0; i<posts.length; i++) {
    const post = posts[i]
    const date = post.substr(0,10);
    const fileName = post.substr(11).replace(".md", "");
    const fileContent = fs.readFileSync(path.join(POSTS_FOLDER, post), 'utf8')

    const parsed = matter.stringify(fileContent, {
      publishedOn: date
    })

    fs.writeFileSync(path.join(OUT_FOLDER, `${fileName}.mdx`), parsed)
  }
} catch (e) {
  console.error(e)
}
```

Once converted, I copied all the files from my output folder to my Next.js instance.

### 3. Setting up code highlighting with remark-prism

I share a lot of coding examples in my blog. In Jekyll, I was using `rouge` highlighter for pretty printing my code. In Next.JS I have to use `remark-prism` for this purpose. `npm install remark-prism` then initialize it where you are [rendering mdx to string](https://github.com/vercel/next.js/blob/canary/examples/with-mdx-remote/pages/posts/%5Bslug%5D.js#L71) like this

```javascript
import remarkPrism from "remark-prism";
// ....
// ....
const mdxSource = await renderToString(content, {
    components,
    // Optionally pass remark/rehype plugins
    mdxOptions: {
      remarkPlugins: [remarkPrism],
      rehypePlugins: [],
    },
    scope: data,
  });
```

Also, I had to manually search and replace all my code block markers to the new template. For example, `{% highlight javascript %} code block {% endhighlight %}` to ` ```javascript  code block ``` `

### 4. Setup nginx to rewrite URLs from old format to new format

My Jekyll posts used to have the URL of `https://veerasundar.com/blog/post-name` - which is unnecessarily long. I wanted to remove the year/month information from the URL. The new format will be `https://veerasundar.com/blog/post-name` which is much simpler. At the same time, I don't want to break all my existing URLs. So, I needed a server set up which will redirect requests to my old URLs to new ones. Here's the change I made for this

```bash
 location /blog {
        rewrite ^/blog/[0-9]+/[0-9]+/(.*)/$ /blog/$1.html permanent;
        rewrite ^/blog(/?)$ /blog.html permanent;
        try_files $uri $uri.html =404;
}
```

That's all I had to do to move my blogging platform from Jekyll to Next.js. If you have any questions or need help in the above process, please feel free to reach out to me.


How to move your blog from Jekyll to Next.JS


Just moved this blog from Wordpress to Jekyll.

Previously, I was using a shared hosting server to run this blog on a Wordpress + MySQL combo. That worked well and it stood solid for the kind of traffic that I usually get (~30K pageviews/month).

But being a web developer, I always wanted to run my own web server and host my blog there. Hence the move.

Now what you read is proudly served from a [Linode](http://linode.com) machine by a [Nginx](http://nginx.org/) server with the static HTML pages generated by [Jekyll](https://github.com/mojombo/jekyll) and version controlled at [Github](https://github.com/vraa/blog). Neat, huh!?

The move was not easy though. I had around 300 posts in my wordpress. Some of the posts are not so much useful or became obsolete now. So, I had to to nitpick which one to move to the new platform. Google Analytics helped a bit to decide on the top performers. I kept my own favorites untouched. Rest of the posts were axed.

Also, the Wordpress to Jekyll converter plug-in did a good job of reformatting my blog posts to suit the Jekyll structure. But it messed up with some of the posts and I had to manually skim thorugh the content to fix things up. So, if you see any formatting issues, please let me know about it and I'll fix.

As part of passing the knowledge torch, here's the list of steps that I did to switch the blogging platform.

## How you can move from Wordpress to Jekyll?

First of all, if you new to Jekyll and you are confused with the offical definition '_Simple, blog aware, static site generator_', here's my version of explaining Jekyll to you (either to confuse you more or give you a clear idea).

> Jekyll is a program written in Ruby. Unlike Wordpress, you run Jekyll in your local machine, not on your web server. Unlike Wordpress, Jekyll does not give you admin panel or anything. Unlike Wordpress, you do not need a MySQL database to store your post content. Unlike Wordpress, you can't simply upload images and expect them to be available for your posts. You need to host images in somewhere else (or your own server) and you need a URL to include it in your posts.

All Jekyll does is that it converts your posts, mixes them with template files and finally generate a static, plain, old HTML files which you can host at any web servers.

Jekyll is not for weak-hearted.

If you are familiar with JavaScript templates such as _Mustache_, _Dust_ in which you define templates with placeholder for data and you pass JSON to prepare the final content, Jekyll is exactly that - you define your page structure (templates) with placeholders for content and you write your posts. When you run Jekyll, it will insert your posts in the placeholders and spit out complete HTML files.

So, here's what you should do if you want to switch.

### Phase 1: Install Jekyll in your local machine.

1. Install Ruby.
2. Install Jekyll.
3. If not already done, Install Git.
4. Clone any existing Jekyll sites, so that you don't need to create _everything from scratch_. [Tom Preston-Werner](https://github.com/mojombo/mojombo.github.com) is a good starting. Here's [mine](https://github.com/vraa/blog), forked from Tom Preston's and modified to suit my blog.
5. Get familiar with the Jekyll folder structure.

### Phase 2: Convert Wordpress posts to Jekyll posts.

1. Take backup of your current wordpress blog (very, very important).
2. Install this plugin - [Wordpress to Jekyll exporter](https://github.com/benbalter/wordpress-to-jekyll-exporter/archive/master.zip) - _zip_ file.
3. In Wordpress admin panel, go to Export and export your posts to Jekyll. The plugin will create a zip file which will be downloaded.

### Phase 3: Create your blog in Jekyll

1. Copy the converted wordpress posts (which are in Markdown format) to Jekyll's `_posts` folder.
2. Familiarize yourself with [Markdown syntax](http://daringfireball.net/projects/markdown/syntax).
3. Make sure the content of your posts are properly formatted in Markdown. If you had code block in HTML, XML then you'll definitely have problems. Review those posts once again and copy the correct content from your backup.
4. If you are using Windows and your posts are in UTF-8 encoding, make sure the files do not have _BOM_ character in its header. If BOM is there, then Jekyll conversion will not work as expected. You can use [UTFCast](http://www.rotatingscrew.com/utfcast.aspx) to convert your files to UTF-8 format with out BOM (make sure you uncheck _write BOM_ while converting).
5. Go wild and design your blog as per your taste. Run Jekyll in auto refresh mode to see the changes you make immediately reflected in browser: `jekyll --auto --server`.
6. Once done, the final blog will be available in `_site` folder. Take the content and host them anywhere you want.

### Phase 4: Version Controlling & Auto publishing.

So far, if you make any changes to your blog, you have to manually FTP the changes to your hosting server. But there are [nice tricks](https://github.com/mojombo/jekyll/wiki/Deployment) available that helps to automate this step. Use them and create awesomeness.


#jekyll (2)