Turorial (PDF)

Today I will be teaching you how to create a blog with Jekyll. This will require some
basic HTML knowledge to function correctly. Let’s get started!

PART ONE

1. Install Jekyll on your computer
The easiest way to do this is open terminal and copy and paste the following
command:
gem install Jekyll
If it does not work the first time, do
sudo gem install Jekyll
and enter your password

2. Next, Create a new blog
In terminal, paste the following command
Jekyll new [name of blog]

3. Next, Publish your site locally
go into your blog folder by doing
cd [name of blog]
and then to publish it you do
Jekyll serve


To view your blog, go to a browser and go to http://127.0.0.1:4000/
You should see:



4. Edit your blog settings
Open the blog folder you had earlier and open _config.yml in some kind of a text
editing app. (I recommend TextWrangler)
You should see this:


You can customize the settings however you want to fit your blog/website

5. Next, Add some pages (optional)
If you want to add pages to your website, you can do so by creating them in
markdown and dropping them in your root folder. You can create a page in
TextWrangler
---
Layout: page
Title: [title of page]
Permalink: /[most likely the title of the page]/
---
[content of page]
But make sure that it has that section on top. You can make the title anything as well
as the permalink.
For information on how to add content of pages in markdown (.md) click here.

To add pages in HTML:
Make sure to add the same section to make sure your page will load correctly. Once
you have your html file ready, you can save it into your root folder and it will load.
For information on HTML and using it, www.w3schools.com is a great place to look.

*Note: for multi-word pages, the title can have a space but the permalink must have
a hyphen or the URL will have a %20 in between the words.

6. Adding Posts
Jekyll accepts markdown files as posts only.
This format must be used in all posts:


You can also follow how “Welcome to Jekyll” was set up in your _posts folder. To add
a post to your website, simply place your markdown file into the _posts folder and
you can see it updated onto your homepage, where your posts are.
*Note: If you want to change the location of your blog list on your site, you can go
into the index.html file in your root directory and remove the following code from
there:

and add the following code to the html page where you want it:
<ul>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>



7. Build the site
To do this, go back into Terminal and go back into the root folder of your site if you
aren’t already there. Once in the folder, enter the following command:
Jekyll build
This will add a generated _site folder in your project folder. Every time you build the
project, the _site folder will change.



PART TWO



1. Github
Github is by far the easiest way to publish a Jekyll site to the web. Simply go to
github.com and create an account or, if you already have one, create a repository
and name it
[your username].github.io
REMEMBER to check the Initialize with a readme tab!


NOTE: MINE IS RED BECAUSE I ALREADY BUILT A WEBSITE THERE
This is extremely important if you want to publish the site correctly. Once you are in
the repository, click upload files and open your project folder to drag and drop
everything in your project folder to the upload area.



Once the upload is done, commit your changes and head to
[your username].github.io
and you should see your blog!
NOTE: For editing your blog after you have uploaded your website, you can just
upload a file that will replace a previous version of it on Github.