Skip to main content
Settings
Color Mode
Theme Skin
Background

Appearance preferences are saved in this browser only.

Environment
Current Environment Production

Built with JEKYLL_ENV=production. Changes require deployment.

Quick Links
Theme & Build
Jekyll v3.10.0
Last Build Aug 11, 02:46
Page Location
Page Info
Layout default
Collection docs
Path _docs/jekyll/deploying-jekyll-website-to-netlify.md
URL /docs/deploying-jekyll-website-to-netlify/
Date 2019-06-22

Deploying Jekyll Website to Netlify

Deploy static website built with Jekyll to Netlify.

1. Jekyll & GitHub Pages & Netlify

I’m using Jekyll to build my personal website bamr87.github.io. All its content are static, which are built by Jekyll. Currently, it is hosted on GitHub Pages. It works fine, however, there are some limitations with GitHub Pages. For example, it is not possible to specify Http Header for caching.

On the other hand, Netlify supports more features than GitHub Pages and it is also free. Netlify is an online service which builds, deploys, and manages modern web projects. Netlify basically initiates its own kind of repository that pushes both to a Github repository and its own services. It offers hosting for front-end projects with many options.

2. Deploying Application From Github Repository

2.1 Preparation

Since I’m deploying a Jekyll website, run the following commands in local repository to update Gemfile.lock. Netlify will use this file for the deployment.

bundle install
bundle update

2.2 New Netlify Account

If you don’t have netlify account yet, go to Netlify to create a Netlify account with your GitHub account. Once you have the account, follow the steps below to deploy static website to Netlify.

2.3 New Site from GitHub

After login, you are in the app home page, click ‘New site from Git’. image Choose ‘Github’, next. image Authorize Netlify to access your GitHub account, next. image Choose the repository ‘bamr87.github.io’, next. image Choose master for the Branch to deploy, set jekyll build to the Build command, and set _site/ to the Publish directory, click the ‘Deploy site’ button. image Netlify will start to deploy your site. image Switch to ‘Deploy’ tab to monitor the status and check the logs. image If no issue occurs, the publish will be done after few seconds(or minutes). image

2.4 Testing

Click on the green link. Our app is now running in the domain of Netlify. image Try to switch other pages, all work fine. image

2.5 Changing Site Name

Switch to Settings tab, scroll down and click the ‘Change site name’ button. image Change the name to ‘bamr87’ and save. image Access your site with the new URL, it should work. image

3. Reference