Auto deploy Webflow exports using Github

Webflow no-code, Github Repos and Heroku cloud hosting

Webflow is an amazing no-code builder that is gaining popularity among designers and developers right now. There is a bit of controversy over the pricing model, and increases that have been happening so I thought I would share my Webflow solutions with you for basic builds.

Build on Webflow, deploy with Github and host on Heroku

What is a basic build?

First off, Webflow has a few options when it comes to their pricing models. The basic builds with Webflow are without a CMS or e-commerce functionality. The hosting for this could still prove more expensive than other options and if you’re simply looking to host a portfolio site for yourself, or business card style brochure site; this could be the solution for you.

So when you’re creating your account, make sure you’re not using a theme you have purchased with these functionalities or this method will not work for you. You have to host those options with Webflow.

Where to begin…

When you’ve built and tested your basic Webflow project and you’re ready to publish, you have the option to export your code with Webflow.

Export your Webflow code

Prompting you to export your code, will allow you to see by piece the pages that have been created and styles associated with them. Here you can export into a zip folder to use within your own localhost on your computer.

I personally, no matter the complexity with projects, use my MAMP localhost to run them. It’s not completely necessary with the exports from Webflow as they’re simple HTML/CSS builds. But do as you wish here. You can simply just open your index.html in your browser to test and make sure you’ve still got a functional website as intended.

Export code with Webflow — the interface

Into the hub. No, not that hub.. Github!

Now it’s time to create a repository for your project inside my favourite platform, Github. In here you’ll add a new repo, and fill out the required information. If you’re concerned about remembering the process, you can always save the link to this article there, or be a bit more documented with your process and write out the steps.

Once you’ve clicked that ‘Create Repository’ button, you’re able to clone it to your machine (find a basic how-to here if you’re unsure of the steps: clone a repository in Github).

Creating a Github repository

Move all of your files from your Webflow zip that you downloaded, into your project folder you just cloned out of your repository and commit them. Make this your first commit, because we’ll be changing some items for hosting purposes and it’s good to keep versioning just incase.

Hosting

I chose Heroku for hosting. Heroku is a cloud hosting platform that is incredibly reasonable with cost, at about $7 per month or less for your dyno. These costs could go up depending on traffic, so please keep this in mind.

Create your first application within Heroku and name it accordingly. When you add your app, you’re able to select your deployment methods and you’ll want to connect your Github account here. I personally have 2 primary branches for my personal project, one for updates which are reviewed through a test link and the other is my main branch which when pushed to Github automatically deploys to Github.

Heroku application deployment method

If you’re concerned about the auto deployment option, there is a manual deployment. But make sure that your settings are applied in the ‘deploy’ tab. Select the branch that you wish to deploy automatically, and make sure you’re committing your files to this branch that you wish to deploy. If you’re testing and using a different app for that inside your hosting, then I would make sure you name these branches accordingly.

Auto deployment within Heroku

Ok, now what? How do I publish this sweet sweet project?

Heroku doesn’t read .html files directly. You’ll need to create 2 simple files within your project to get your deployment functioning. You’ll need a index.php file, as well as a composer.json file to help the deployment along.

Create your index.php file first, and have it contain the following code:

<?php include_once("index.html"); ?>

Once this is established, we need to create our composer.json file and give it a bit of something to hold on to as well (curly brackets):

{}

Now that we have the 2 files that Heroku requires to publish, we need to ensure that we have properly set up our PHP dyno within Heroku, and the added the ‘heroku/php’ buildpack under your settings tab.

Heroku PHP buildpack required

Set up your SSL and DNS settings. I’m no DNS ninja by any stretch so I needed to lean on a bit of help from one of my colleagues to push past this part. I find sometimes the DNS in your registrar settings to be a pain in the butt, but perhaps you have more patience than I do, so go ahead and get that done.

Set up your DNS and SSL in Heroku

Your SSL is managed with the dyno you paid for inside Heroku. You shouldn’t need to purchase one elsewhere. Configuring it is simple once your domain is setup, however you do always have the choice to use a SSL elsewhere depending on your requirements and comfort level.

Heroku SSL settings

Deployment time. Cross your fingers!

Now we have successfully put together the 3 primary pieces of this Webflow / Github project. These 3 pieces containing our no-code code from Webflow, our Github repository and our cost effective hosting solution with Heroku.

We recently edited our project code by adding our index.php and our composer.json files but at that time, we didn’t commit and push these files and I did this intentionally with you.

Right now, we have our Heroku set up to auto-deploy our main branch of our repository. If you were to commit and push your main branch you used, Heroku which is now attached to your Github account will receive these changes and deploy them to your hosting.

So go ahead and do that.

After you’ve waited roughly 60 seconds for that process to happen you should be able to reach your domain, which is now resolving as your newly published website.

Congratulations. :)

Did you know if you hold the “clap” button a while, that more people have a chance of seeing this story? — Find me on my Instagram for more content and conversation!