Step-by-Step: Migrating from Carrd to Cloudflare Pages

Carrd.co is a single-page website builder with a no-code paid tool. Cloudflare Pages is a JAMstack platform for front-end developers to collaborate and deploy websites. In this blog post, I will describe how to move your static website from Carrd.co (Paid) to Cloudflare pages (Free). Let’s start.

Back story

I got my eyes on carrd.co when I saw it was (still is, AFAIK) the only No-code platform that allows you to create static single-page websites (for portfolio, landing page, etc.) for just $19 per year. Yes, not per month but per year. During the Black Friday week, I got a good deal and upgraded to the highest-ever tier there. However, I soon realize I do not use many features and do not need to update my static sites frequently. Also, I do not feel it is satisfying enough to be a full-stack developer with a No-code tool. No-code tools are excellent for building up something quickly but are a pain to the wallet in the long run. Therefore, I migrated from carrd.co and found Cloudflare pages, a free alternative. Hence this blog post.

Prerequisites

  1. Carrd.co pro account, which supports the download of the website
  2. Cloudflare Account
  3. Website domain hosted in Cloudflare (Optional but Recommended)
  4. GitHub Account (Optional)

Procedure

Download your website

  1. First, log in to your carrd.co account

    Step 1 screenshot

  2. Go to the site you want to migrate. Click on the `Manage this site` gear icon.

    Step 2 screenshot

  3. Download the website

    Step 3 screenshot

  4. Wait for a few seconds till the download gets completed.

    Step 4 screenshot

Create a GitHub repo.

Though you can directly upload the downloaded file to Cloudflare Pages, we will use GitHub to ease version management for future changes.

  1. Go to https://github.com/new

  2. Feel the details for your repository. Only repository name is mandatory to fill.

    Step 5 screenshot

  3. Click on `Create repository` button.

  4. Open the repository in VS Code on the browser by:

    1. Pressing the dot (.) key OR

    2. Change ‘.com’ to ‘.dev’ on the URL. In my case
      https://github.com/soumendrak/countdown to
      https://github.dev/soumendrak/countdown

    3. Unzip the downloaded website content

      Step 6 screenshot

    4. Drag the assets and index.html files and drop them in the VS Code sidebar.

      Step 7 screenshot

    5. Click on the source control.

      Step 8 screenshot

      Write a comment like ‘initial commit’ below.

      Step 9 screenshot

      Hover your mouse cursor beside the `Changes` dropdown and Click on the plus (+) icon to stage all the changes.

      Step 10 screenshot

      Click on the `Commit and Push` button.

    6. Step 11 screenshot

Cloudflare Pages setup

Now we will link the GitHub repo to Cloudflare Pages. On the Cloudflare page, we will build and host the website. We can create up to 100 websites in Cloudflare pages for free.

  1. Login to your Cloudflare Account

  2. Click on the ‘Workers and Pages’ section on the sidebar.

  3. Then click on the ‘Create Application’ button on the right.

    Step 12 screenshot

  4. Click on the ‘Pages’ tab, then on ‘Connect to Git.’

    Step 13 screenshot

  5. Set up GitHub if not done before. Then check if the newly created repository is visible if not, provide access to that repo to Cloudflare by clicking on the Cloudflare pages.

    Step 14 screenshot

  6. Providing access from GitHub. After selecting, click on Save.

    Step 15 screenshot

  7. Click on the repo in Cloudflare now by reloading the page or following the same steps from 3 to 6. Click Begin Setup.

    Step 16 screenshot

  8. I have a plain static HTML site, so no framework needs to be selected.

    1. Remember to add the current directory as dot (.) in the ‘Build output directory’ field.

    2. Then click the ‘Save and Deploy’ button.

      Step 17 screenshot

  9. Click on ‘Continue to Project’ after the build gets over.

    Step 18 screenshot

  10. Click on the ‘custom domain’ tab to link to your previous custom domain. Click ‘Set up a custom domain’

    Step 19 screenshot

  11. Fill out the site and click on the Continue button. Do not use http/https

    Step 20 screenshot

  12. Make the DNS record changes as shown.

    Step 21 screenshot

  13. After making the changes, the existing and new records will become the same, then you can click on the ‘Activate domain’ button.

    Step 22 screenshot

  14. Once it shows Active, the process is completed.

    Step 23 screenshot

Summary

In summary, we have witnessed how to migrate from carrd.co single page website to freely hosted Cloudflare pages. We have downloaded the website from carrd.co, version managed the website assets in GitHub. We have hosted the site with an auto-generated SSL certificate on Cloudflare pages.

If you have any doubts, please comment. If you have any specific requirements, please contact me on Twitter or LinkedIn.