How to migrate WordPress to Scully

How to migrate WordPress to Scully

Finally there is an Angular option for JAMstack. In this article I'll tell you my path of migration WordPress blog to Scully. For quite a long time I was thinking about migrating my blog to JAMstack, ideally with a markdown support. I was looking for something like gatsbyjs or other alternatives. Most of them were fairly good, except the part that I would like to see my blog built with Angular in order to use all the nice features of the framework.

So, here comes the plan:

  • Export posts to XML
  • Convert XML to markdown
  • Support for images
  • Angular goodies
  • Deployment

Export posts

The first thing you have to do is to export all your posts from WordPress. Luckily for us WordPress has a functionality to export all your posts into XML. You can find this option in your WP Admin navigation:

For more details check WordPress official documentation - Tools Export Screen.

After this operation you have your XML file, but it's still XML and you would like to have MarkDown format.

XML to MD

As a way to convert XML into MD within keeping blog format we can use wordpress-export-to-markdown tool:

Answer prompt questions carefully because it's better to keep the same structure of URLs.

Conversion finished? Well done! Now you have you md files with images. Doesn't Scully support images within md?

Blog images and Scully

Bad news for you. Scully does not know what to do with images, it skips them for conversion, but still it doesn't copy them in the right directory together with compiled HTML.

Good news - Scully has a plugin system. If you want to know how to write Scully plugins please check this article by Sam Vloeberghs, it's great!

Scully plugin to copy images

We want Scully to copy images from source of md files to compiled html files. For that to happen, we will create a small image plugin(image.scully.plugin.ts):‌

export function imageFilePlugin(raw: string, route: HandledRoute) {
  return new Promise((resolve) => {
    fs.copyFile(route.templateFile, './dist/static/images/' + route.data.sourceFile, (err) => resolve(''));
  });
}
<>

There is yet neither ./dist/static directory, nor ./dist/static/images, so you need to create them before copying:

angular scully wordpress xml images

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Why Use WordPress? What Can You Do With WordPress?

WordPress is the most preferred blogging platform and CMS. Let's check out the 10 effective uses of WordPress beyond blogging.

Hire WordPress Developer

Whether you want to develop a blog or you want a feature-rich, interactive WordPress website? **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")** is a distinguished leader in the WordPress development market. **[Hire...

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Hire Dedicated Wordpress Developer | Hire Wordpress Experts

Hire Dedicated WordPress Developers for all your Web requirements from USA and India. We offer experienced and certified developers on Full-time, Part-time and Hourly basis.