Open navClose nav
December 31, 2017 docs

Using GitHub Pages to Build Your Jekyll Site

Using Jekyll with GitHub Pages GitHub can handle building your Jekyll site without the need of Forestry or a CI tool. GitHub will build your Jekyll site each time a new commit is pushed to GitHub and serve it automatically. Limitations When using GitHub to build your GitHub Pages site, you are restricted to using the white-listed GitHub Pages Jekyll version and plugins. Getting Started This requires the GitHub pages gem.

July 24, 2013 docs

Introduction

Hugo is a fast static site generator, with a lot of enterprise features. If you’re building a large business, publication, or community website Hugo is likely the right choice due to features likes localization, RSS Feed & Sitemap generation, and much more. Choose Hugo if you: Are building a site that requires a lot of enterprise features, such customizable as RSS Feeds, Sitemaps, AMP (Accelerated Mobile Pages), etc. Have a site with more than 500 pages, as Hugo is blazingly fast Feel learning a new language to build your theme templates isn’t a challenge for you.

July 24, 2013 docs

Introduction

Jekyll is one of the oldest static site generators available. Built by GitHub, it has tons of community support and is very stable. Additional features can be added onto Jekyll through the use of plugins. It also uses the templating language Liquid, which feels very familiar to developers and is also used by Shopify and other large-scale applications. Choose Jekyll if you: Want a static site generator with great stability and the biggest community.

July 24, 2013 docs

Project Structure

In Hugo, project structure and naming is fairly rigid other than content structure. You must follow the Hugo guidelines for where content, layouts, data, and static assets must be stored. Inside your content folder, you create the structure and organization that works for you. For example, a Hugo site may look like this: . ├── archetypes/ ├── config.yml ├── data/ | └── members.yml ├── layouts/ | ├── footer.html | └── header.

July 24, 2013 docs

Project Structure

In Jekyll, project structure and naming is very important. The way you structure and name your project directly effects the organization of your built static site. For example, a Jekyll site may look like this: . ├── _config.yml ├── _data/ | └── members.yml ├── _drafts/ | ├── begin-with-the-crazy-ideas.md | └── on-simplicity-in-technology.md ├── _includes/ | ├── footer.html | └── header.html ├── _layouts/ | ├── default.html | └── post.html ├── _posts/ | ├── 2007-10-29-why-every-programmer-should-play-nethack.

July 24, 2013 docs

Templating

Hugo allows users to build layouts and themes using one of multiple templating languages. By default, Hugo uses GoLang’s GoTemplates. All of the template options are interchangeable, and can be used at the same time. GoTemplates Go Templates exposes GoLang as a template language for you to build your layouts and themes with. An example of GoTemplates: <html> <head> <title>{{ .Params.Title }}</title> <body> <div id="content"> <p> This is a long page content These lines are all part of the parent p <a href="/">Go To Main Page</a> </p> Ace Ace templates are inspired by Slim and Jade and will feel very familiar and easier to use if you’re comfortable with either.

July 24, 2013 docs

Templating

Jekyll allows users to build their HTML templates using the template language Liquid built and used by the popular eCommerce application Shopify. Liquid Liquid is best described as a safe, customer-facing template language for flexible web apps. An example of Liquid: <html> <head> <title>{{ title }}</title> </head> <body> <div id="content"> <p> This is a long page content These lines are all part of the parent p <a href="/">Go To Main Page</a> </p> </div> </body> </html> See the Front Matter Fields documentation for examples of how to use Forestry in your templates.

July 24, 2013 docs

Static Files

In Hugo, any files/folders found in the static/ directory in the root of your project or the root of your site’s theme will be made available at the root of your built site. For example: . ├── static/ | ├── image.jpg | └── css/ | └── main.css └── themes/ └── example-theme/ ├── static/ └── script.js Will be built as: . ├── image.jpg ├── script.js └── css/ └── main.

July 24, 2013 docs

Static Files

In Jekyll, any file in your project that does not have YAML front matter is treated as a static file, and is included in your built site. These are files like images, PDFs, CSS, JS, and much more. If you use any build tools like Gulp or Grunt with Jekyll, please read our Asset Pipeline Doc. Further Reading Jekyll Static Files Docs

July 24, 2013 docs

Asset Pipeline

Hugo supports pre-procesing CSS files via SCSS, and post-processing via PostCSS. Hugo’s Built-in Asset Pipeline Using Hugo’s asset pipeline, you can use Sass, SCSS, and PostCSS. You can also bundle and minify assets. Hugo docs: Pipes Best Practises for Gulp, Grunt, and Other Build Tools In order to use external build like Gulp, Grunt, or Webpack with Forestry’s previewing and deployment, you should configure them as follows: Use a NodeJS-based tool installable via NPM and configured in package.