Deploy Jekyll Site Hosted on GitHub to Azure
Tags: azureapril, productivity, beginners, webdev
Published: 2019-04-04 02:56:26

---
title: Deploy Jekyll Site Hosted on GitHub to Azure
published: true
description: 
tags: azureapril, productivity, beginners, webdev
series: Azure April
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pblyvmtj4y8bdqisyzey.jpeg
---


*We've selected our favorite tips and tricks created by [Michael Crump](https://twitter.com/mbcrump) and are delivering fresh technical content on Azure all April! Miss a day (Or more)? [Catch up with the series](https://dev.to/t/azureapril).*

**Don't have Azure?** [Grab a free subscription](https://azure.microsoft.com/en-us/free?&WT.mc_id=azureapril_devto-blog-cxa). 

----

A ton of us use Jekyll for our personal sites and/or blogs.

If you have already have an existing Jekyll based site that is hosted on GitHub, you can easily deploy that site to Azure App Services.

**But why?** If GitHub Pages is *free*, then why pay? You might want to:

* push your site to a private repo (instead of public).
* set up “real” SSL, compared to the workarounds.
* take advantage of deployment slots.

I’m sure there are more. Regardless, I think it's an interesting exercise using an incredibly common tool. 

# Gather All The Pieces 📎

I’m assuming you already have a GitHub Pages site that uses Jekyll hosted on GitHub. If that is true, then the first thing that you’ll want to do is grab these three files.

* `deploy.cmd`: a [Kudu](https://github.com/projectkudu/kudu) Deployment script that handles setup and deployment of the web site and ensures Ruby is installed
* `getruby.cmd`: a site that ensure the latest version of Ruby is installed and ensures Jekyll has been built
* `.deployment`: a configuration file that Kudu understands that calls the deploy.cmd script
* `Gemfile`: you probably already have this but ensure it is there and if not then just copy mine.

Once you have these three files, ensure they are in the root of your public GitHub pages site (e.g. `something.github.io`).

# Travel To The Azure Portal 🖱️

You’ll want to go inside of your [Azure Portal](https://azure.microsoft.com/en-us/features/azure-portal/?&WT.mc_id=azureapril_devto-blog-cxa) (or use the CLI tools) and create a Web App under App Service. Once the site is deployed, then go to Deployment Options and select GitHub, your project and press `OK`.

![app service -> web app](https://d33wubrfki0l68.cloudfront.net/c392bee1f1c497df1c946b17178a94905c5df36d/04b41/files/azuretip16.gif)

You should see `Setup up Deployment Source…` in the notification window. You’ll probably want to wait a good 15 to 20 minutes for Azure to setup everything. You can stay on the `Deployment Options` blade and you should see the status of the deployment.

![deployment options](https://d33wubrfki0l68.cloudfront.net/1137122492a967ccb08ac2b945919f3c8ce8400c/e4c05/files/fetchanddeploy.png)

# Success! ✅

After a while you see a check mark that it completed successfully. Now you can navigate to the URL listed on the `Overview` blade.

![overview](https://d33wubrfki0l68.cloudfront.net/3bfda6e0d26208be6969b5b1eee21f55f00ea3e4/f5ca0/files/fetchanddeploy1.png)

And... you're done! Check it out. That was easy, right?! 

**Ready to go beyond Jekyll?** [Check out Azure's App Service documentation for language-specific quickstarts.](https://docs.microsoft.com/azure/app-service/?WT.mc_id=azureapril_devto-blog-cxa)

----
We'll be posting articles every day in April, so stay tuned! Or jump ahead and check out more tips and tricks [now](http://azuredev.tips).