Loading...

Jammie Mountz

Software Engineer

Deploying A Jekyll Static Site on Github and Digital Ocean

Creating a website with Jekyll

Jekyll is a static site generator. It allows for you to use templating and css pre-processors without a server, and outputs the typical html and css files the browser will expect.

Getting started with Jekyll

You’ll need Ruby on your computer, the directions here are great:

https://gorails.com/setup/

Once you have Ruby, you can install Jekyll

gem install jekyll

Change into the directory you’d like to create your site into, and then run:

jekyll new test-site

You can cd into the site and examine the file structure jekyll will create for you. To see the site in action, run

jekyll serve

The site will appear locally on a port specified in your terminal.

Deploying your Jekyll site on GitHub

First, run git init locally to initialize a git repository. Then create a repository on github. Copy its clone route, and in your local site’s directory, run

git remote add origin [url]

Although nothing will happen, you should see the url to your remote when you run git remote -v.

Make a commit and push it up to master. From github, make another branch – gh-pages. The naming of this branch is important. Github will deploy branches named ‘gh-pages’ only. In the settings for the repo, you can find the URL for the page. Click it to check out your jekyll site live!

You might notice that stylesheets aren’t pulling through. in your config.yml, make sure you have the sites “base” and “url” values set correctly.

Deploying your Jekyll site to Digital Ocean

In Digital Ocean, create a new droplet – Ubuntu LAMP stack on version 14.04

We need to create an environment where we can install Jekyll, which means installing ruby, which means installing a version manager. It kind of is a long process, check out the instructions here https://gorails.com/setup/ubuntu/14.04

Once you have rbenv and all the other things you need, you can install jekyll with the same command

gem install jekyll

In your home directory (cd ~/) make a folder for your blog with git

mkdir awesomeblog.git
cd awesomeblog.git

git init --bare

Fluent in Spanish and JavaScript, salsa dancer, lover of material design.

Living in San Francisco, CA