Make a pretty site, learn Jekyll: Tutorial
Tags: beginners, howto, jekyll
Published: 2019-04-16 17:43:12

---
title: Make a pretty site, learn Jekyll: Tutorial
published: true
description: A learning guide to Jekyll themes and GitHub pages.
tags: beginner, how to, jekyll
---

Trying to learn my way around [GIMP](https://www.gimp.org/) the other day led me to Sirar Salih's developer [blog](https://sirarsalih.com/2018/04/23/how-to-make-background-transparent-in-gimp/).

I thought it looked SO GOOD:

![Sirar Salih's blog](https://thepracticaldev.s3.amazonaws.com/i/h3ydp4v8b4a2o3n3km76.png)

Helpfully, Sirar links to the original theme on his page: [Hydejack](https://hydejack.com/), built with [Jekyll](https://jekyllrb.com/) and hosted on Github pages. Obviously, I had to try it myself. 

Here's my [working version](https://an-dy1.github.io/hydejack-by-andy/):

![working hydejack version](https://thepracticaldev.s3.amazonaws.com/i/62ad5zi1wi9ofad4cobh.png)

For some helpful tips and a better how-to than what you'll find elsewhere, read on.

<h3>Installation</h3>

The Hydejack site gives several [installation options](https://hydejack.com/docs/install/#running-locally). 

I don't know much about Ruby/gems, so I didn't go that route. Going the zip file route just sounded messy, and I've been known to mix up my git clone and my git fetch. 

That left installing via [starter kit](https://github.com/qwtel/hydejack-starter-kit), which gives you a decent quick start guide in its ReadME.

I elected to start by setting up my GitHub pages site, just because it sounded the easiest, but I had to change a few of the steps:

1. Fork the hydejack [starter repo](https://github.com/qwtel/hydejack-starter-kit).
2. Go to the Settings tab in your new repo. Rename the repository.
3. Still in Settings, scroll down to GitHub pages. 
4. Set source to `master branch`
5. Copy the URL this generates.
6. Go back to the code (still in GitHub). Open the `_config.yml` file.
7. Uncomment the `url` line and replace the url with your new GitHub page. 
8. Uncomment the `baseurl` line and replace with the repository name in single quotes.
9. Commit the changes.
10. To see the site, go to the GitHub pages URL. 

<h3>Running Jekyll locally</h3>

Now, I did all of this before I had my own local copy of the site. So it was satisfying to see the blog theme immediately live and hosted, but is obviously not ideal for development. Onward to setting up local development.

1. Create a new directory on your computer where your project will live.
2. `cd` into your new directory.
3. Run `git clone [YOUR_PROJECT_REPO]` (NOTE: I didn't have to `git init` in the folder before cloning, which surprised me)
4. `cd` into the root directory (which is where you `_config.yml` file is stored.
5. Run `bundle install` (NOTE: this requires Bundler. If you don't already have it, run `gem install bundler`)
6. Run `bundle exec jekyll serve`
7. To visit the site, go to localhost:4000
8. To start developing, open this project directory in your code editor of choice

Now, a note about the local site: although the jekyll server continues running as you make changes in your code base, I have had to stop and restart the server for changes to take effect. I need to research more to find out if there's a way for the jekyll server to be watching for changes and update accordingly.

<h3>Digging into the development</h3>

I ran through the HydeJack [Configuration](https://hydejack.com/docs/config/) page to start customizing my website, and it's great. 

But, I started to notice that there were some files and folders in my GitHub repo that weren't in my local copy. What's the deal? 

Well, the `.gitignore` file includes the `_site` folder. Which, you know, contains pretty much the whole site. 

![_site ignore](https://thepracticaldev.s3.amazonaws.com/i/3gove9ma6z7fdhqb72nz.png)

I commented out that line so that I could get into the meat of those pages.

<h2>*~*UPDATE~*~</h2>

So guys, the `_site` file is what gets built when you run the Jekyll server. If you try to put anything in there, it will be deleted when you build. So, keep that shiz in your `.gitignore`.

<h3>Resources 'n learnin</h3>

I didn't know anything about Jekyll before starting this site. And honestly, not a lot of great resources out there on it. A lot of the videos and articles I found are from 4 or 5 years ago, which makes me feel like Jekyll is a little passe? 

In any case I liked this video for an intro:

{% youtube iWowJBRMtpc %}

Just like HydeJack is free to use, there are a bunch of other Jekyll themes out there! 

Go to [this link](https://jekyllthemes.io/free) to peruse a bunch of free and paid options.

Finally, for the pared-down intro to Jekyll for blogging, check out this dev post: 

{% link https://dev.to/jaybeekeeper/getting-started-with-jekyll-3nf9 %}