Running Jekyll on Windows & Azure

book pages

CC 2.0 image courtesy Sebastien Wiertz on Flickr

In my previous article, I outlined all the steps needed to install Jekyll (the open-source static site generator) on a Windows 10 environment. In this article, we will build our first Jekyll site and serve it up via localhost. Then we will push the site to Azure Web Apps and host it via Azure App Service.

Jekyll_logoCreating Your First Site

Since our environment is now ready, we can create and serve Jekyll sites using these steps.

  1. Open Windows PowerShell.
    • Click the Windows Key + S and search for PowerShell.
  2. Browse to the folder location where you want to house your new blog site.
  3. Create a new site by typing: jekyll new {blog name} where {blog name} is the name of your new site.
  4. Build the site by entering the jekyll build command.
  5. Run the site via the jekyll serve command.

RunJekyll01

The site builds and runs on http://localhost:4000/. The default Jekyll site has the basic elements of a website. Jekyll can be customized to suit your needs but that is beyond this post.

RunJekyll02

Jekyll Structure

When we create a new Jekyll site, it’s organized according to the theme you are using. There are default themes you can use or you can install custom themes from Jekyll. Once the site is created, the file structure may look something like this:

RunJekyll03

Creating A Bitbucket Repo

Bitbucket_logoNow our site is created, we want it to be accessible to the world via the internet. To do this, we can push the site to Azure for cloud-based hosting.

To make sure we can access the Jekyll files from Azure, the source code must exist in a version-controlled repository Azure can access. For this example, we will move the code into a private Bitbucket repo via PowerShell.

  1. Log into Bitbucket.
  2. Click Repositories > Create repository.
  3. Enter a Repository Name and optional Description (under Advanced Settings).
  4. Leave Access Level checked if you want to keep your repository hidden from the public.
  5. Set the Repository type to Git.
  6. Click Create repository.

RunJekyll04

The newly created repository can be found under Repositories on the blue menu bar at the top of the page.

RunJekyll05

Pushing Code To Bitbucket

To move your code into Bitbucket, use the following commands in PowerShell. We first need to initialize our local repo before we can push the source code.

  1. Return to the open PowerShell window.
  2. Navigate to the _site folder of your new Jekyll site. These are the items we want to deploy.
  3. Use the following command to initialize the directory under source control: git init
  4. Run the following command git status. Your untracked files should appear in red.
  5. Add all the files to your local Git repo: git add . (including the period)
  6. Next, commit the files to the local repo with a commit message: git commit -m ‘Initial commit of site’
  7. Connect the local repository to the remote repository on Bitbucket: git remote add origin https://{Bitbucket username}@bitbucket.org/{Bitbucket username}/myblog.git
  8. Finally, push your code to the remote repo on Bitbucket: git push -u origin

NOTE: Once you create your repository on Bitbucket, the repository page includes instructions on working with an existing project. It also includes the remote add path you need in step seven above.

RunJekyll06

Deploying To Azure

azure_logoWe are now ready to move our project code from our Bitbucket Git repository to Microsoft Azure. Follow the steps below to host your project on an Azure Web App:

  1. Navigate to portal.azure.com to create a new Azure Web App.
  2. Click +New > Web + Mobile > Web App.RunJekyll07
  3. Fill in all the required fields to create the Web App and click Create.
  4. Once the web app is provisioned, it’s time to link it to your Bitbucket repo.
  5. In the Web App blade, under the App Deployment section, click Deployment options.RunJekyll08
  6. The Deployment Source blade opens. Click Configure required settings and select Bitbucket as the source.
  7. Authorize Azure to connect to your Bitbucket account by clicking Grant access.Click OK to complete the authorization process.
  8. Under the Choose Project blade, click the name of the Bitbucket repo you created.
  9. Next, under the Choose Branch blade, choose your release branch (usually Master).RunJekyll09
  10. Click OK. Azure sets up your deployment source.

Your Web App is now configured to read code from your Bitbucket repo.

RunJekyll10

Return to the Overview blade of your Azure Web App and click the site URL.

RunJekyll12

The page shows your deployed Jekyll site.

RunJekyll11

Summary

In this article, we have seen how to create your first Jekyll website, how to push it to a Bitbucket repo, and how to deploy it to Azure Web Apps. As you expand your site, you can also set up continuous deployment options so the site is constantly updated with new content.

Resources

Advertisements

About Ken Cenerelli
I am a Programmer Writer, .NET Developer, Microsoft MVP - Visual Studio and Development Technologies, Public Speaker, Blogger, and Microsoft Azure Nerd. I blog regularly at kencenerelli.wordpress.com and can be found on Twitter via @KenCenerelli.

3 Responses to Running Jekyll on Windows & Azure

  1. Pingback: Installing Jekyll on Windows | Ken Cenerelli

  2. Pingback: Azure Weekly: Mar 13, 2017 – Build Azure

  3. Pingback: Microsoft Technical Guru – April 2017 | Ken Cenerelli

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: