This guide enables you to add your Typeflo blog to a subdirectory / subfolder of your existing website. It is compatible with most static websites and landing page builders such as Webflow, Framer, Swipe Pages, Carrd for example.
Note: You need to use Cloudflare for your DNS to implement subfolder hosting.
This is a complex setup and you may need a developer to implement this for you. For easier methods to connect Typeflo to your own domain, check our guides for Subdomain connection and Root domain connection.
Lets get started (Setting up Cloudflare)
Step 1: Create an account in Cloudflare
Step 2: Enter the domain that you want to migrate to Cloudflare & click "Continue"
Step 3: Once the above step is done, scroll down to the bottom of the page, Select "Free" plan & Click "Continue"
Step 4: Update the namservers assigned by Cloudflare in your domain name registrar dashboard such as Porkbun, Google Domains, Godaddy, etc
Step 5: The below steps are optional which can be enabled for better perfomance and security
Domain & SSL setup
In the last step, we have finished setting up the basic configurations for Cloudflare. Now, lets begin setting up your website domain and SSL.
Step 6: Navigate to your Typeflo dashboard and click on "Settings"
Click on "Link Custom Domain" Button
Select the type as "Subfolder" and enter the complete URL with the subfolder slug.
Step 7: Choose the domain which you linked on your Typeflo Dashboard
Step 8: Click on "SSL/TLS"
Step 9: Click on "Overview" and then click on "Configure"
Step 10: Under Custom SSL/TLS, click "Select"
Step 11: Now select the SSL/TLS encryption mode from "Flexible" to "Full" and click on "Save"
Step 12: Next, click on "Records" under "DNS"
Cloudflare workers setup
In the last step, we completed the domain record and SSL setup. Now lets begin setting up Cloudflare workers with which your Typeflo blog can be served on your domains subdirectory / subfolder.
Workers code setup
Step 13: Find the "A" record with "Name" as your domain address & Click on "Edit"
Toggle the Proxy status to "On" and click "Save"
Step 15: Click on "Workers Routes" and then click on "Manage Workers"
Click on "Create"
Click on "Create Worker"
Provide the name of your choice (or use the default one) and then click on "Deploy" on the bottom right of your screen.
Once deployed. You will get the below screen. Click on "Edit code"
Go back to the Typeflo Dashboard, from the General Settings click on "Code"
Copy the displayed code
Go back to Cloudflare. Remove all the existing code & paste the copied code from Typeflo Dashboard. Then click on "Deploy"
Go back to the Workers home page and click on "Settings"
In Domains & Routes, click "+ Add"
Select "Route" from the option
Select the Zone to your linked domain address with Typeflo Add the Route as yourdomain.com/subfolder. yourdomain.com is your website's domain URL. Please do not enter " https://" in the URL. If your main website's path contains www, enter the route as www.yourdomain.com/subfolder Then select the Failure mode to "Fail closed (block)"
29. Once the 1st route is added, you need to add another Route for the CSS & Javascript of your Typeflo website to work. So, click on "+ Add" again and then select "Route" from the option
30. Select the Zone to your linked domain address with Typeflo Now add the Route as yourdomain.com/next. yourdomain.com is your website's domain URL. Please do not enter " https://" in the URL. In case your main website's path starts with www, please enter the url as www.yourdomain.com/next And then select the Failure mode to "Fail closed (block)"
Once added wait for 1-2 min & visit your domain with subfolder or you can simply go to Typeflo Dashboard & click "View Blog"
Congratulations! 🎉 You have now successfully linked your Typeflo website to your subfolder domain! 🚀
Not able to see your website? Some steps may have been implemented incorrectly. Please get in touch with us and we will try to help you out.
Share help article