Fork me on GitHub

Making a new Jekyll Website

by Danielle Wingler

25 Oct 2013

This is after git, ruby, and Jekyll has been installed on your computer.

The information provided will be for an Ubuntu user through the terminal.

Open a terminal and type:

jekyll new #name you want the site to have

This should create a folder that has the name of the site you just typed in.

Now you want to change over to that folder by typing:

cd #the name you chose

Once in the folder you will create a new repository. First make sure you are in the folder/directory you want to be in to create a new repository.

pwd

The above command will list off where you are currently if you are unsure.

This is a screenshot

Once you are in the folder you just created then you will type:

git init

You will want to check the status by typing:

git status

The above command is good to keep coming back to when you are working on items you are creating. It should show the changes you have made.

git add

The above command will add your changes.

You commit the changes by typing:

git commit -m "Message about the commit"

Once this is done you will want to rename the default branch and add the new repository as a remote.

This will rename the default branch:

git branch -m master gh-pages

This will add the remote:

git remote add origin https://github.com/YourUserName/YourSiteName

Don't forget to push the changes by typing:

git push origin gh-pages

Once this is done you will want to check it out. You can view it locally by typing:

jekyll serve --watch

After this you will want to start customizing it and making sure the linking between pages is working.

Go into the config.yml file and add the base url information. You can do this through github.com or the terminal. Which ever you feel the most comfortable with.

The base url information should look something like this:

baseurl: /NameYouChoseforSite

This is a screenshot

You will need to make sure the links between the default and post files are correct.

Go into your index.html file. Make sure to put this in the href= " " field that is anchoring (right before) the (Two curley brackets opened) post [dot] title (closed):

(Two curley brackets opened) site [dot] baseurl (closed)(Two curley brackets opened) post [dot] url (closed)

This is my site.

I tampered around with adding completely new css files and linking to them. It took should rearranging of code, but bringing in other CSS files worked. It is still a work in progress. I am currently working on creating other pages to link to from the index page and keeping the images with the style sheet together.

Danielle is a BSIS student. Looking forward to learning more about programming. Still exploring career paths within the information science field. Find Danielle Wingler on Twitter, Github, and on the web.
comments powered by Disqus