From cc57d2ed633a02e20ddd58c722f89644128b04c7 Mon Sep 17 00:00:00 2001 From: Lewis Toh Date: Fri, 1 Nov 2024 17:55:16 +1100 Subject: [PATCH 01/11] Added WordPress documentation to the Guides tab in the tina docs --- content/docs-toc/docs-toc.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/docs-toc/docs-toc.json b/content/docs-toc/docs-toc.json index 819cf7c26..f81ed1488 100644 --- a/content/docs-toc/docs-toc.json +++ b/content/docs-toc/docs-toc.json @@ -446,6 +446,11 @@ "slug": "content/docs/guides/internationalization.mdx", "_template": "item" }, + { + "title": "Migrating from WordPress", + "slug": "content/docs/guides/converting-wordpress-to-tina.mdx", + "_template": "item" + }, { "title": "Migrating From Forestry", "items": [ From 72adebd22570b7b74494fce842071a23c0867b97 Mon Sep 17 00:00:00 2001 From: Lewis Toh Date: Fri, 1 Nov 2024 17:55:32 +1100 Subject: [PATCH 02/11] Created the guide to convert from wordpress to tina --- .../guides/converting-wordpress-to-tina.mdx | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 content/docs/guides/converting-wordpress-to-tina.mdx diff --git a/content/docs/guides/converting-wordpress-to-tina.mdx b/content/docs/guides/converting-wordpress-to-tina.mdx new file mode 100644 index 000000000..77966d1c9 --- /dev/null +++ b/content/docs/guides/converting-wordpress-to-tina.mdx @@ -0,0 +1,64 @@ +--- +title: Converting WordPress to Tina +last_edited: '2024-11-01T06:49:00.208Z' +next: '' +previous: '' +--- + +## Introduction + +This guide is a walkthrough using a **WordPress to Markdown converter**, which is recommended for most use cases. + +Other conversion options that are not covered in this guide include: + +* Rest API to JSON - best for extracting the pure html for pages or posts +* Using the WPGraphQL plugin - best for cases where you want to extract specific pages or posts + +## Prerequisites + +* [Node.js](https://nodejs.org/) is installed +* You have set up a [Tina starter](https://tina.io/docs/introduction/using-starter) + +## Getting Started + +1. Export your Wordpress content by going to [https://wordpress.com/export/](https://wordpress.com/export/) and select **Export All** + +Note: Name it export.xml to make it easier for you in the next step + +Begin by [exporting your WordPress content](https://wordpress.com/export) and **Export All**, save it as export.xml. + +Next, we'll be using [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown) to convert your WordPress content into Markdown. + +From the directory that you saved export.xml, run: + +```powershell +npx wordpress-export-to-markdown --post-folders=false --include-other-types=true +``` + +Use the defaults for the other prompts, this will group our posts together and also include pages in the output. + +## Migrating your content + +Now you have your pages and posts in Markdown format, we'll have to make some small changes to work with Tina. + +### Migrating images + +In the output folder where your posts are, drag the image folder to your Tina app's `public/uploads` folder. + +You can also set up alternative hosting. + +### Migrating Posts + +Drag all the Markdown files to your Tina app's `content/posts` folder, now your posts have been migrated to Tina! + +*(Optional) -* If you want to take advantage of what MDX files offer, you can convert them easily: + +```powershell +ren * *.mdx +``` + +### Migrating Pages + + + +This step is more complicated, feel free to [contact a developer](https://tina.io/docs/support) for assistance. From 6f22c1c1b112e4f8a2babb2d5475c1225e9da7ab Mon Sep 17 00:00:00 2001 From: Lewis Toh Date: Mon, 4 Nov 2024 12:28:27 +1100 Subject: [PATCH 03/11] Polished wordpress to tina guide to fit with standards --- .../guides/converting-wordpress-to-tina.mdx | 110 ++++++++++++++---- 1 file changed, 88 insertions(+), 22 deletions(-) diff --git a/content/docs/guides/converting-wordpress-to-tina.mdx b/content/docs/guides/converting-wordpress-to-tina.mdx index 77966d1c9..74339e218 100644 --- a/content/docs/guides/converting-wordpress-to-tina.mdx +++ b/content/docs/guides/converting-wordpress-to-tina.mdx @@ -1,18 +1,18 @@ --- title: Converting WordPress to Tina -last_edited: '2024-11-01T06:49:00.208Z' +last_edited: '2024-11-04T01:27:15.982Z' next: '' previous: '' --- ## Introduction -This guide is a walkthrough using a **WordPress to Markdown converter**, which is recommended for most use cases. +This guide is a walkthrough using a **WordPress to Markdown converter**, which is recommended for most use cases where you want to migrate your content from WordPress to Tina. Other conversion options that are not covered in this guide include: -* Rest API to JSON - best for extracting the pure html for pages or posts -* Using the WPGraphQL plugin - best for cases where you want to extract specific pages or posts +* Using the WordPress Rest API - best for extracting the pure html for page or post content in JSON format +* Using the WPGraphQL plugin - best for cases where you want to query and extract specific data and content ## Prerequisites @@ -21,44 +21,110 @@ Other conversion options that are not covered in this guide include: ## Getting Started -1. Export your Wordpress content by going to [https://wordpress.com/export/](https://wordpress.com/export/) and select **Export All** +### Converting WordPress to Markdown + +1\. Export your Wordpress content by going to [https://wordpress.com/export/](https://wordpress.com/export/) and select **Export All** Note: Name it export.xml to make it easier for you in the next step -Begin by [exporting your WordPress content](https://wordpress.com/export) and **Export All**, save it as export.xml. +2\. In the folder where **export.xml** is, run: + +```powershell +npx wordpress-export-to-markdown --post-folders=false --include-other-types=true +``` + +3\. When prompted, make sure the filename matches the filename you used, and use the default values for the other prompts. -Next, we'll be using [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown) to convert your WordPress content into Markdown. +This uses [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown) to convert your WordPress content into Markdown, and groups posts and pages as output. -From the directory that you saved export.xml, run: +4\. Navigate to your output's posts folder `output/post`, and run: ```powershell -npx wordpress-export-to-markdown --post-folders=false --include-other-types=true +ren * *.mdx ``` -Use the defaults for the other prompts, this will group our posts together and also include pages in the output. +Which will convert your files from Markdown to MDX. + +### Import data to TinaCMS + +#### Migrating images + +1\. In the output folder, drag the image folders `output/post/images` and `output/page/images` to your Tina app's `public/uploads` folder. + +Note 1: You can rename the folder before dragging to prevent duplicate image names being replaced -## Migrating your content +Note 2: You can also set up alternative hosting. -Now you have your pages and posts in Markdown format, we'll have to make some small changes to work with Tina. +#### Migrating Posts -### Migrating images +1\. Drag all the MDX files in `output/post` to your Tina app's `content/posts` folder, now your posts have been migrated to Tina! -In the output folder where your posts are, drag the image folder to your Tina app's `public/uploads` folder. +#### Migrating Pages -You can also set up alternative hosting. + + +1\. Create a new folder in your Tina app's `content` folder named `wp-pages`. + +2\. Create a new file in your Tina app's `tina/collection` folder named `wp-page.ts` and use the template below, you can change this later to fit your page's schemas better. + +```javascript +import type { Collection } from "tinacms"; + +const WpPage: Collection = { + label: "Migrated WordPress Pages", + name: "wppage", + path: "content/wp-pages", + format: "md", + fields: [ + { + type: "string", + label: "Title", + name: "title", + isTitle: true, + required: true, + }, + { + type: "rich-text", + label: "Body", + name: "_body", + isBody: true, + }, + ], +}; + +export default WpPage; + +``` + +3\. Import your created WpPage to the [schema](https://tina.io/docs/reference/schema) in tina/config.tsx + +```javascript -### Migrating Posts +import WpPage from "./collection/wp-page"; +... -Drag all the Markdown files to your Tina app's `content/posts` folder, now your posts have been migrated to Tina! +schema: { + collections: [Page, Post, ..., WpPage], +}, +``` + +### View and Edit your migrated content -*(Optional) -* If you want to take advantage of what MDX files offer, you can convert them easily: +1. At the root of your Tina app, run: ```powershell -ren * *.mdx +npm run dev ``` -### Migrating Pages +2\. Go to localhost:3000/admin - +3\. Go to the Migrated WordPress Pages and Blog Posts collections, then to the Media Manager. + +3. View and edit your migrated posts, pages and images! + +## Next Steps -This step is more complicated, feel free to [contact a developer](https://tina.io/docs/support) for assistance. +* Adding a coverImage field to your post schema to read the image +* Update the image links in the Markdown and MDX files to match how Tina uses them, uploads/image.png +* Making changes to the themes and any missing features from the exporter +* Take advantage of [npm packages](https://www.npmjs.com/) to replace WordPress plugins functionalities From ea9c848324f24eeb1dd7482507c9beebd31d1820 Mon Sep 17 00:00:00 2001 From: Lewis Toh Date: Mon, 4 Nov 2024 12:28:33 +1100 Subject: [PATCH 04/11] fixed step counter --- content/docs/guides/converting-wordpress-to-tina.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/guides/converting-wordpress-to-tina.mdx b/content/docs/guides/converting-wordpress-to-tina.mdx index 74339e218..359ae1e90 100644 --- a/content/docs/guides/converting-wordpress-to-tina.mdx +++ b/content/docs/guides/converting-wordpress-to-tina.mdx @@ -1,6 +1,6 @@ --- title: Converting WordPress to Tina -last_edited: '2024-11-04T01:27:15.982Z' +last_edited: '2024-11-04T01:28:18.617Z' next: '' previous: '' --- @@ -120,7 +120,7 @@ npm run dev 3\. Go to the Migrated WordPress Pages and Blog Posts collections, then to the Media Manager. -3. View and edit your migrated posts, pages and images! +4. View and edit your migrated posts, pages and images! ## Next Steps From bbe9f26f6e9102f08d64e481955709bdf504bceb Mon Sep 17 00:00:00 2001 From: Lewis Toh Date: Mon, 4 Nov 2024 15:06:02 +1100 Subject: [PATCH 05/11] Update title, added indent for note boxes, added styling to text that require formatting (code snippets and such) --- .../guides/converting-wordpress-to-tina.mdx | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/content/docs/guides/converting-wordpress-to-tina.mdx b/content/docs/guides/converting-wordpress-to-tina.mdx index 359ae1e90..5a684a14e 100644 --- a/content/docs/guides/converting-wordpress-to-tina.mdx +++ b/content/docs/guides/converting-wordpress-to-tina.mdx @@ -1,6 +1,6 @@ --- -title: Converting WordPress to Tina -last_edited: '2024-11-04T01:28:18.617Z' +title: Migrating WordPress Content +last_edited: '2024-11-04T03:21:23.950Z' next: '' previous: '' --- @@ -25,7 +25,7 @@ Other conversion options that are not covered in this guide include: 1\. Export your Wordpress content by going to [https://wordpress.com/export/](https://wordpress.com/export/) and select **Export All** -Note: Name it export.xml to make it easier for you in the next step +> 💡 **Note:** Name it **export.xml **to make it easier for you in the next step 2\. In the folder where **export.xml** is, run: @@ -35,7 +35,7 @@ npx wordpress-export-to-markdown --post-folders=false --include-other-types=true 3\. When prompted, make sure the filename matches the filename you used, and use the default values for the other prompts. -This uses [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown) to convert your WordPress content into Markdown, and groups posts and pages as output. +> This uses [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown) to convert your WordPress content into Markdown, and groups posts and pages as output. 4\. Navigate to your output's posts folder `output/post`, and run: @@ -51,9 +51,9 @@ Which will convert your files from Markdown to MDX. 1\. In the output folder, drag the image folders `output/post/images` and `output/page/images` to your Tina app's `public/uploads` folder. -Note 1: You can rename the folder before dragging to prevent duplicate image names being replaced +> 💡 **Note 1:** You can rename the folder before dragging to prevent duplicate image names being replaced -Note 2: You can also set up alternative hosting. +> 💡 **Note 2:** You can also set up alternative hosting. #### Migrating Posts @@ -96,7 +96,7 @@ export default WpPage; ``` -3\. Import your created WpPage to the [schema](https://tina.io/docs/reference/schema) in tina/config.tsx +3\. Import your created collection to the [schema](https://tina.io/docs/reference/schema) in tina/config.tsx ```javascript @@ -110,17 +110,15 @@ schema: { ### View and Edit your migrated content -1. At the root of your Tina app, run: +1\. At the root of your Tina app, run: ```powershell npm run dev ``` -2\. Go to localhost:3000/admin +2\. Go to `localhost:3000/admin` -3\. Go to the Migrated WordPress Pages and Blog Posts collections, then to the Media Manager. - -4. View and edit your migrated posts, pages and images! +3\. Go to the Migrated WordPress Pages and Blog Posts collections, then to the Media Manager. You can now view and edit your migrated posts, pages and images! ## Next Steps From cc9a39a1435c5f26e4e2d379938130c40ee00bec Mon Sep 17 00:00:00 2001 From: Lewis Toh Date: Mon, 4 Nov 2024 17:14:57 +1100 Subject: [PATCH 06/11] Updated title on sidebar to match "Migrate From Forestry" style --- content/docs-toc/docs-toc.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs-toc/docs-toc.json b/content/docs-toc/docs-toc.json index f81ed1488..eaba9bf2c 100644 --- a/content/docs-toc/docs-toc.json +++ b/content/docs-toc/docs-toc.json @@ -447,7 +447,7 @@ "_template": "item" }, { - "title": "Migrating from WordPress", + "title": "Migrating From WordPress", "slug": "content/docs/guides/converting-wordpress-to-tina.mdx", "_template": "item" }, From ddab316fa1d873ddad7a66ed243608fe38a1738a Mon Sep 17 00:00:00 2001 From: Lewis Toh Date: Mon, 4 Nov 2024 17:15:15 +1100 Subject: [PATCH 07/11] Made changes as per my conversation with Landon --- .../guides/converting-wordpress-to-tina.mdx | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/content/docs/guides/converting-wordpress-to-tina.mdx b/content/docs/guides/converting-wordpress-to-tina.mdx index 5a684a14e..62140cce8 100644 --- a/content/docs/guides/converting-wordpress-to-tina.mdx +++ b/content/docs/guides/converting-wordpress-to-tina.mdx @@ -1,6 +1,6 @@ --- title: Migrating WordPress Content -last_edited: '2024-11-04T03:21:23.950Z' +last_edited: '2024-11-04T04:31:04.917Z' next: '' previous: '' --- @@ -27,37 +27,39 @@ Other conversion options that are not covered in this guide include: > 💡 **Note:** Name it **export.xml **to make it easier for you in the next step -2\. In the folder where **export.xml** is, run: +Use [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown) to convert your WordPress content into Markdown. + +2. In the folder where you've saved your exported file **export.xml**, run: ```powershell npx wordpress-export-to-markdown --post-folders=false --include-other-types=true ``` -3\. When prompted, make sure the filename matches the filename you used, and use the default values for the other prompts. - -> This uses [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown) to convert your WordPress content into Markdown, and groups posts and pages as output. - -4\. Navigate to your output's posts folder `output/post`, and run: - -```powershell -ren * *.mdx -``` +3\. When prompted, make sure the filename is correct, and use the default values for the other prompts. -Which will convert your files from Markdown to MDX. +This creates an `output` folder that groups your posts and pages into separate folders. ### Import data to TinaCMS -#### Migrating images +#### Migrating images to TinaCloud 1\. In the output folder, drag the image folders `output/post/images` and `output/page/images` to your Tina app's `public/uploads` folder. > 💡 **Note 1:** You can rename the folder before dragging to prevent duplicate image names being replaced -> 💡 **Note 2:** You can also set up alternative hosting. +> 💡 **Note 2:** You can also set up alternative hosting with your preferred media manager. #### Migrating Posts -1\. Drag all the MDX files in `output/post` to your Tina app's `content/posts` folder, now your posts have been migrated to Tina! +1\. Navigate to your output's posts folder `output/post`, and run: + +```powershell +ren * *.mdx +``` + +Which will convert your files from Markdown to MDX. + +2. Drag all the MDX files in `output/post` to your Tina app's `content/posts` folder, now your posts have been migrated to Tina! #### Migrating Pages From 24ec47189884c640b779e219715b4ecc0acd381b Mon Sep 17 00:00:00 2001 From: Lewis Toh Date: Mon, 4 Nov 2024 17:27:18 +1100 Subject: [PATCH 08/11] fixed bolding on file name --- .../guides/converting-wordpress-to-tina.mdx | 43 +++++++++---------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/content/docs/guides/converting-wordpress-to-tina.mdx b/content/docs/guides/converting-wordpress-to-tina.mdx index 62140cce8..f3875dad8 100644 --- a/content/docs/guides/converting-wordpress-to-tina.mdx +++ b/content/docs/guides/converting-wordpress-to-tina.mdx @@ -11,13 +11,13 @@ This guide is a walkthrough using a **WordPress to Markdown converter**, which i Other conversion options that are not covered in this guide include: -* Using the WordPress Rest API - best for extracting the pure html for page or post content in JSON format -* Using the WPGraphQL plugin - best for cases where you want to query and extract specific data and content +- Using the WordPress Rest API - best for extracting the pure html for page or post content in JSON format +- Using the WPGraphQL plugin - best for cases where you want to query and extract specific data and content ## Prerequisites -* [Node.js](https://nodejs.org/) is installed -* You have set up a [Tina starter](https://tina.io/docs/introduction/using-starter) +- [Node.js](https://nodejs.org/) is installed +- You have set up a [Tina starter](https://tina.io/docs/introduction/using-starter) ## Getting Started @@ -25,9 +25,9 @@ Other conversion options that are not covered in this guide include: 1\. Export your Wordpress content by going to [https://wordpress.com/export/](https://wordpress.com/export/) and select **Export All** -> 💡 **Note:** Name it **export.xml **to make it easier for you in the next step +> 💡 **Note:** Name it **export.xml** to make it easier for you in the next step -Use [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown) to convert your WordPress content into Markdown. +Use [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown) to convert your WordPress content into Markdown. 2. In the folder where you've saved your exported file **export.xml**, run: @@ -70,32 +70,31 @@ Which will convert your files from Markdown to MDX. 2\. Create a new file in your Tina app's `tina/collection` folder named `wp-page.ts` and use the template below, you can change this later to fit your page's schemas better. ```javascript -import type { Collection } from "tinacms"; +import type { Collection } from 'tinacms'; const WpPage: Collection = { - label: "Migrated WordPress Pages", - name: "wppage", - path: "content/wp-pages", - format: "md", + label: 'Migrated WordPress Pages', + name: 'wppage', + path: 'content/wp-pages', + format: 'md', fields: [ { - type: "string", - label: "Title", - name: "title", + type: 'string', + label: 'Title', + name: 'title', isTitle: true, required: true, }, { - type: "rich-text", - label: "Body", - name: "_body", + type: 'rich-text', + label: 'Body', + name: '_body', isBody: true, }, ], }; export default WpPage; - ``` 3\. Import your created collection to the [schema](https://tina.io/docs/reference/schema) in tina/config.tsx @@ -124,7 +123,7 @@ npm run dev ## Next Steps -* Adding a coverImage field to your post schema to read the image -* Update the image links in the Markdown and MDX files to match how Tina uses them, uploads/image.png -* Making changes to the themes and any missing features from the exporter -* Take advantage of [npm packages](https://www.npmjs.com/) to replace WordPress plugins functionalities +- Adding a coverImage field to your post schema to read the image +- Update the image links in the Markdown and MDX files to match how Tina uses them, uploads/image.png +- Making changes to the themes and any missing features from the exporter +- Take advantage of [npm packages](https://www.npmjs.com/) to replace WordPress plugins functionalities From f552ff399e9b879222ea3113d72b49f6b696eff0 Mon Sep 17 00:00:00 2001 From: Lewis Toh Date: Mon, 4 Nov 2024 17:39:58 +1100 Subject: [PATCH 09/11] fixed broken step --- content/docs/guides/converting-wordpress-to-tina.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/guides/converting-wordpress-to-tina.mdx b/content/docs/guides/converting-wordpress-to-tina.mdx index f3875dad8..ea8d0d693 100644 --- a/content/docs/guides/converting-wordpress-to-tina.mdx +++ b/content/docs/guides/converting-wordpress-to-tina.mdx @@ -29,7 +29,7 @@ Other conversion options that are not covered in this guide include: Use [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown) to convert your WordPress content into Markdown. -2. In the folder where you've saved your exported file **export.xml**, run: +2\. In the folder where you've saved your exported file **export.xml**, run: ```powershell npx wordpress-export-to-markdown --post-folders=false --include-other-types=true From e524dfe0e77702ad39fb325c1d7c10ba7c4b803b Mon Sep 17 00:00:00 2001 From: Lewis Toh Date: Mon, 4 Nov 2024 17:40:45 +1100 Subject: [PATCH 10/11] Fixed broken step at Migrating Posts section --- content/docs/guides/converting-wordpress-to-tina.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/guides/converting-wordpress-to-tina.mdx b/content/docs/guides/converting-wordpress-to-tina.mdx index ea8d0d693..947b2e182 100644 --- a/content/docs/guides/converting-wordpress-to-tina.mdx +++ b/content/docs/guides/converting-wordpress-to-tina.mdx @@ -59,7 +59,7 @@ ren * *.mdx Which will convert your files from Markdown to MDX. -2. Drag all the MDX files in `output/post` to your Tina app's `content/posts` folder, now your posts have been migrated to Tina! +2\. Drag all the MDX files in `output/post` to your Tina app's `content/posts` folder, now your posts have been migrated to Tina! #### Migrating Pages From 6b2aeb8c1eb3afde5f0b4e92725d0904a05c1c99 Mon Sep 17 00:00:00 2001 From: Lewis Toh Date: Mon, 4 Nov 2024 17:41:37 +1100 Subject: [PATCH 11/11] Added code snippet for tina/config.tsx --- content/docs/guides/converting-wordpress-to-tina.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/guides/converting-wordpress-to-tina.mdx b/content/docs/guides/converting-wordpress-to-tina.mdx index 947b2e182..2265a6768 100644 --- a/content/docs/guides/converting-wordpress-to-tina.mdx +++ b/content/docs/guides/converting-wordpress-to-tina.mdx @@ -97,7 +97,7 @@ const WpPage: Collection = { export default WpPage; ``` -3\. Import your created collection to the [schema](https://tina.io/docs/reference/schema) in tina/config.tsx +3\. Import your created collection to the [schema](https://tina.io/docs/reference/schema) in `tina/config.tsx`. ```javascript