Summer’s over — what’s your move? Join Pro for 50% off using code [MAKEITHAPPEN](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=MAKEITHAPPEN)


Use Jekyll, a popular static site generator, to quickly create a functional, customizable website.

Create a Static Website Using Jekyll

The website that Jekyll generates differs from a website that you'd create on your own. It offers a standard directory structure, as well as components that help speed up development.

It's important to understand Jekyll's default directory structure and contents of your site:

1. **_config.yml** - This is a configuration file that contains many values that need to be edited only once. These values are used across your site, for example, your site's title, your e-mail, and more. Note that this is a **.yml** file, which you can learn more about <a href="http://www.yaml.org/start.html" target="_blank">here</a>.

2. **_includes/** - This directory contains all the partials (code templates that keep you from repeating your code over and over) that your site uses to load common components, like the header and the footer.

3. **_posts/** - This directory is where <a href="https://en.wikipedia.org/wiki/Blog" target="_blank">blog posts</a> are stored. New blog posts can be added and will be rendered with the site's styling, as long as the file name follows Jekyll's standard naming convention.

4. **_layouts/** - This directory contains templates that are used to style certain types of posts within the site. For example, new blog posts will use the HTML layout defined in `post.html`.

You can learn more about the Jekyll directory structure <a href="https://jekyllrb.com/docs/structure/" target="_blank">here</a>.

Jekyll's Directory Structure

Before we can generate a website, we must install Jekyll.

Jekyll is a Ruby gem (also known as a <a href="http://guides.rubygems.org/what-is-a-gem/" target="_blank">RubyGem</a>) and can be installed from the command line. Don't worry, knowledge of Ruby is _not_ required in order to complete this course.

Once Jekyll is installed, we can use it to generate your website.

Installing Jekyll

Want to see what your site currently looks like? You can use Jekyll to view your site _locally_.

On the web, a server hosts your site's files and makes your website available for everyone to see. 

However, viewing a website locally means that you're viewing the site on your _own_ computer (hence the term "locally" or "local"). The site is not, however, available on the public Internet. Instead, your computer is acting as the server that hosts your site.

You can view your site locally by using Jekyll's `serve` command, like so:

```bash
jekyll serve
```

This command starts a local server that will server the files to your computer. The `serve` command will also come in handy when you want to preview changes you make to your site.

By default, the address for the local server that _Jekyll's_ `serve` command starts is `http://localhost:4000/`.

Preview Your Site Locally

Great work! Let's review what you accomplished in this unit:

1. Installed Jekyll
2. Used Jekyll to generate a static site
3. Started a local server to view your site

Why was this important? The course will focus on the deployment process, but first we needed content to deploy. Jekyll quickly provided us with that content and now we can focus on the deployment process.

Diagram of the steps you've completed (Installed Jekyll, used Jekyll to generate a static site, and started a local server to view your site)

Review

Great! Now that Jekyll is installed, let's generate your website.

To do so, we'll use Jekyll's `new` command and specify a directory name. The directory will contain all of your site's default content that can be customized later.

For example, to generate a website in a directory called `my-portfolio-site`, we can type:

```bash
jekyll new my-portfolio-site
```

The command will create a directory called `my-portfolio-site` and fill it with Jekyll's  site content.

**Note:** We'll use the directory name `my-portfolio-site` in examples throughout the course. Don't worry about the details of the directory structure just yet, we'll give an overview in the upcoming exercises.

Generate a Static Site

The focus of this course will be on the process of deploying a website, not on actually creating a website.

We'll use a popular tool known as _Jekyll_ to quickly generate a website. This will help keep the focus on the deployment process and quickly provide you with content to deploy, rather than focusing solely on website creation.

Jekyll is a simple static site generator. Using Jekyll is a very common way of generating a "ready-to-publish static website" within seconds. You can learn more about Jekyll <a href="https://jekyllrb.com/docs/home/" target="_blank">here</a>.

**An important note:** 

The reason this course uses Jekyll is so that we can generate the static website quickly and focus on deploying it. However, we understand that you may not want to use the Jekyll-generated content.

In that case, it is possible to follow all of the steps outlined in this course with your _own_ content &mdash; just make sure that your HTML is inside of a file called **index.html**. As you'll see, even Jekyll uses a file called **index.html**.

If instead you'd like to learn about creating static sites (starting from scratch), check out our <a href="https://www.codecademy.com/learn/make-a-website" target="_blank">Make a Website</a> course.

Jekyll: Overview

In this course, you'll learn how to deploy a <a href="https://en.wikipedia.org/wiki/Static_web_page" target="_blank">static site</a> to the Internet.

What exactly do we mean by _deploy_, or _deploying_?

Deploying means making content or software accessible and available for use. 

The website that you'll deploy in this course will be public, or "live", on the Internet. It will be accessible to anyone (with open Internet access), at anytime, anywhere in the world.

By the end of this course, you will have:

1. Generated a static site
2. Deployed it to the Internet
3. Given the website a custom domain name

Let's begin!