How to Create a Jekyll Site

Reviewing our Jekyll series, we have already learned what Jekyll is and why you might want to use it for your site. We’ve also learned how to install Jekyll. Make sure to return to those pages if you have not yet installed Jekyll and are considering using it.

How to Create a Jekyll Site

First, we will need to create a Jekyll site to begin working on. How this works:

• Run the jekyll new [site-name] command
• This creates a site in the directory [site-name]
• Change into that directory and run Jekyll commands

As you can see above, the creation process results in a directory from which you can run further Jekyll commands to preview your site, build the site, and (later) transfer the site to your server (with some tweaking). You will also have access to all of the site files from this same directory. This means everything you will need for your site is one place.

1. Open your default terminal application
2. Run the following command, substituting site-name with the desired name of your site directory:

   jekyll new site-name

3. Allow a minute or so for the generation process to complete
4. Change into the site directory:

   cd site-name

5. Run the preview command to see your site in a browser:

   jekyll serve

6. Proceed to this URL in your favorite browser: https://127.0.0.1:4000/

Now you can see the default site in your browser. You can see the default theme is mobile responsive and stylish. You can start adding posts and pages immediately. We’ll show you how to customize the site later.

How to Add Posts to Your Jekyll Blog

Adding posts to your blog will require using your favorite text editor or any program that lets you create plain text files with no formatting options. Each blog post will be its own unique file with a name like this: 2018-01-01-happy-new-year.md. This naming structure is critical. The first part is the date on which you’d like the post to be published, followed by any title you want, ending wiht the .md (for Markdown) extension.

1. Open your site directory with your operating system’s default folder system or via command line
2. Open (or change) into the _posts directory
3. Create a new file in your text editor (how to do this will depend on the editor itself)
4. Name the file with the appropriate format: 2018-01-01–title.md

Front Matter (inside the file)

Once you have created your blog post, you will want to populate the file with some important information. For example, what is the proper title? Would you require a pretty permalink? Should this post be filed under a certain category? You can put all of this information in the file’s “front matter” or heading.

A basic Jekyll blog file will look like this on the inside, with the front matter at the top and post content below:

 --- layout: post title: My Awesome Title permalink: /test-post/ category: Updates ---  The post content goes here.  Each separate line is a *new* paragraph.

The default permalink style is: /year/month/title.html … but you can make it whatever you want or leave it default by having no permalink designated in the front matter.

The layout designation determines what kind of page layout should be used. We’ll talk about this more later during the customization phase. Likewise, categories will come into play when designing the site layouts. For example, displaying a list of categories, is something that can be added to a theme.

How to Add Pages to Your Jekyll Blog

Adding pages to the site is a similar process to adding posts, but the file naming is more straightforward. You can name a page anything you want as long as the file ends with the .md extension. Plain HTML pages, if you need them, will be processed as is.

Page front matter is similar to the post information, but you will want to specify that this is a page:

 --- title: About permalink: /about/ ---  This is a page about me. I'm a barista and I also like to write my blog.

Once your site is generated, this page will appear at a URL like this: example.com/about/.

Now that you can create posts and pages, stay tuned in the series to learn how to customize your site.