How to connect your Framer site to Engyne blog

How to connect your Framer site to Engyne blog

Engyne logo

By Engyne team

Aug 9, 2023

You can deploy blog posts from Engyne on your domain in a jiffy!

There are 2 ways to do this:

  1. As a subfolder (Recommended): This setup lets you combine both Framer and Engyne on the same domain. For example, you can have your landing page at mywebsite.com be from Framer and all the blog pages be from Engyne as website.com/blog/. Having a subfolder is extremely useful for SEO because as your posts get more traffic from Google, the rest of your site, especially your landing page will start treading higher in rankings.

  2. As a subdomain: This will deploy Engyne as blog.yourwebsite.com. Your main website will stay with Framer at mywebsite.com. This setup does not interfere with any other hosting services you have on your domain or other subdomains.

By deploying as a subfolder, you get to have the best of both worlds. You get to keep your Framer pages, i.e. landing, about, features pages etc. but also host Engyne pages as your blog. This is what it looks like:

Engyne deployment as a subfolder

Engyne deployment as a subfolder

The traffic first comes to Engyne, using the rules defined in the Deployment, we can send it to either your Framer pages or Engyne.

To deploy Engyne as a subfolder, first, you need to connect your domain to Engyne, then use rerouting rules in Deployment to route specific URLs to the Framer site.

  1. In your DNS manager, add a new record.
  2. In the "Type" dropdown menu, select "CNAME".
  3. In the "Host" field, use "@" (without the quotes).
  4. In the "Value" field, enter "cname.engyne.ai" (without the quotes).
  5. Click the "Save All Changes" button to add the CNAME record.

With this CNAME added, head over to your Engyne project:

  1. Navigate to your project > Settings > Deployment
  2. Add your domain in the Custom Domain and click Connect
  3. If everything goes well, the domain will show a connected sign. Sometimes the DNS changes can take a few hours so if it doesn't immediately, check back in an hour.

Now your domain should show Engyne pages only. In the next step, we will route specific pages to Framer while keeping the Engyne posts intact.

In order to route pages to your Framer project, we will use the Framer-hosted URL, e.g. <name>.framer.app. Find your Framer URL by:

  1. Login to Framer and navigate to your project
  2. Click Settings on the top right > Domains > Base Domain. Note down your <name>.framer.app. This is your Framer-hosted URL.
Alt text

Alt text

Now that you have the Framer URL, you can set up deployment rules in Engyne:

  1. Open up your Engyne site from the dashboard
  2. Click Settings > Deployment
  3. Under Route Pages, you can list what slugs will route to which URLs in Framer. Make sure to use your Framer-hosted URL in the Destination.

Simple usage

You can use one-off rules like below to reroute individual pages like the landing page, about us etc.

/https://lime-run-895725.framer.app

This will route anyone coming to / to your Framer site's / page.

Alt text

Alt text

Advanced usage

If you have a large number of pages under a path and don't want to write reroute rules one-by-one, you can use the wildcard pattern to reroute all of them in one go.

/resources/*https://lime-run-895725.framer.app/resources/$1

Alt text

Alt text

Congratulations! Now if you try going to your domain, you will see at / and /features it's your Framer site loading, any other URL will bring up your Engyne posts.

You can also connect Engyne to a subdomain like blog.mywebsite.com to your domain by following these steps:

Engyne deployment as a subdomain

Engyne deployment as a subdomain

  1. In your DNS manager, add a new record.
  2. In the "Type" dropdown menu, select "CNAME".
  3. In the "Host" field, use "blog" (without the quotes). You can specify a different name here instead of "blog" to deploy the pages there, e.g. "resources".
  4. In the "Value" field, enter "cname.engyne.ai" (without the quotes).
  5. Click the "Save All Changes" button to add the CNAME record.

With this CNAME added, head over to your Engyne project:

  1. Navigate to your project > Settings > Deployment
  2. Add your domain in the Custom Domain and click Connect
  3. If everything goes well, the domain will show a connected sign. Sometimes the DNS changes can take a few hours so if it doesn't immediately, check back in an hour.

Now your domain should show Engyne pages only. In the next step, we will route some pages to Framer while keeping the Engyne posts intact.

On this page

    Made with Engyne