Jekyll Static Site

Zesty.io Open Source ATOM Plugin Start Trial

Search…

Jekyll Static Site

This example builds a version of the ZestyBurger Site by feeding Zesty.io content into a statically-generated Jekyll Site.Github: https://github.com/zesty-io/zesty-jekyll/

Getting Started
First, we'll need to install Jekyll.
Installing Jekyll
1
gem install bundler jekyll
Copied!
​See the Jekyll Website For More Help​
Next, let's clone the example project
1
git clone https://github.com/zesty-io/jekyll-zesty/
2
cd jekyll-zesty
Copied!
Now, we simply need to install and run the project!
1
npm install
Copied!
Note how npm install runs pullzesty
The example project's package.json also comes pre-equipped with some handy utility commands.
npm start # rebuilds data from zesty.io and runs a jekyll server
npm run-script build-jekyll # rebuilds data from zesty.io and runs jekyll to build a folder in docs/
npm run-script all # rebuilds data from zesty.io, runs jekyll to build a folder in docs/, and runs a jekyll server
Understanding the Example Project
Jekyll provides support for front-matter, which PullZesty takes advantage of to create the files. The real magic in this project lies in the zesty.yaml file, which specifies the proper paths for all of our content. This content is merely consumed by some layouts. When creating your own Jekyll project, feel free to look at our zesty.yaml file and our layout files.
_layouts/home.html
1
--- layout: default ---
2
<div dat
3
a-spy="scroll" data-target="#site-navbar" data-offset="200">
4
    <section class="site-cover" style="background-image: url({{page.splash_background}});" id="section-home">
5
        <div class="container">
6
            <div class="row align-items-center justify-content-center text-center site-vh-100">
7
                <div class="col-md-12">
8
                    <h1 class="site-heading no-site-animate mb-3">{{page.splash_title}}</h1>
9
                    <h2 class="h5 site-subheading mb-5 no-site-animate">{{page.splash_description}}</h2>
10
                    <p><a href="{{page.splash_link}}" target="_blank" class="btn btn-outline-white btn-lg no-site-animate" data-toggle="modal" data-target="#reservationModal">{{page.splash_link_text}}</a></p>
11
                </div>
12
            </div>
13
        </div>
14
    </section>
15
</div>
Copied!
As you can see in our home.html file, we simply load in the front-matter from the index.md file.

React Ruby Build Guide

Hugo Static Site

Last modified 3yr ago

Export as PDF

Copy link

Contents

Getting Started

Installing Jekyll

Understanding the Example Project