I have my whole personal page on Github and it's been here since last year. Yes, I know a lot of people have their page on GitHub but what a lot of people don't do is use Heroku to make it dynamic which I'm going to tell you how to do.

But before that, just in case you don't know how to setup a page on GitHub for free or don't have any experience with GitHub at all then read along this part of the article, else just move on to the Heroku part. I'm not going to talk about setting up GitHub pages because honestly, a lot of people have done that and even Github has their own page to help you set it up. Check it here. So GitHub, has two options to set up the page.

You can setup by using the themes provided by GitHub (not recommended)
You can make your own page using html, css, jquery etc.

I don't think it is possible to make GET, POST requests by using the Jekyll themes, so the obvious option to go with is making your own page by writing an index.html of your own. After that you can make changes to it all you want and the GET and POST request to the servers can be made by using jquery or JS.

Why use Heroku?

We need a server to make our page dynamic. To store data that would be altered while the page is being used by different users and while searching for an option I found out about Heroku. Go set up your own accout there because we're sure going to need one.

Writing our API

I referred to this article to build a restful API using Python. We can write it using any language we want.

I used Flask to build the API. I wanted to make a clap function similar to one that we see in Medium articles. So the first thing I did was write a simple API that takes an ID to keep the number of claps of different posts. It is a simple API. Whenever we make a GET request it would check the ID and return the number of claps. If a POST request is made to that endpoint it increases the number of clap counts by 1 for the passed ID. I did add the basic checks, like if an ID is invalid, if a new ID is sent then add the ID to the file of claps. Yes, I said file of claps. Well I thought I would use a dbms like sqlie but I rather went with saving the claps in a json file.

The catch?

Before you think of pushing this app, we need to add a simple thing to our Python file. The file that we will be using as the server. We need to enable Cross Origin Resource Sharing (CORS). What it is? It basically stops anyone from making a request to your server, so when you try to make a request from the page that is stored on GitHub pages, it will stop you from doing so. This is because the server we are making the request to and the server where the pages that are making the request are different. Thus, we need to enable it in our Flask app. Just add the following lines of code

After the testing is done, we can push the app to Heroku. All we have to do is make a new app on Heroku and then push the app. It's similar to using git. We can use Heroku from either the commandline or from their page. I prefer to use the cli app since its pretty simple and also I'm a sucker for cli apps. Get the Heroku CLI app from the package manager you use, or check their guide to download and install it here. Make sure you are logged in to your heroku account first, use heroku login to do that. After that's done, use the following.

heroku create appname

Replace appname with the name of the app

We can continue with the usual loop of add, commit and push after this, as long as we want. Make sure to use git push heroku master to push to the master branch of the current app.

With every build, Heroku will build the app and then deploy it in a new dyno. Read more about Heroku dynos here. Heroku follows a ephemeral filesystem. Each dyno has its own ephemeral filesystem. Read this article to know more about deploying your app with python.

Things to look out for

Heroku has a sleep policy that every dyno needs to get 6 hours of sleep every day.

This simply means that the dyno that your app is deployed on will go to sleep if it is idle for an hour. After it gets a new request, it will come back to working again. However, when a dyno wakes up, there's more to it than what it sounds like. With every wakeup, your app is deployed in a new dyno, this is why it's said to have an ephemeral filesystem.

Due to this, if you make request to the endpoint after like 1 hour of the last request, it takes a bit of time to return the response. That happens clearly because the dyno restarts and then executes the app and returns accordingly.

You can always make other API's. I used the same idea to deploy another app which make sure's I get an email when someone clicks on that send button on the form in the homepage. I used Sendgrid to send the email and basic python to make sure nobody is able to spam.

That's it for this article, hit that clap button if you want to send a POST request to my dyno or you could always do that to show me some love.

I will be writing another post to show how to use static files on Heroku apps. Keep a lookout for that.

Posts for free

Have your own page for free

4 lesser known free comment hosting services better than Disqus