Setting Jekyll environment for GitHub Pages

Question

I am building a site with Jekyll that I am hosting on GitHub Pages. I would like to be able to set the JEKYLL_ENV to 'production' (JEKYLL_ENV=production) when I deploy to GitHub Pages so I can do something like this:

{% if jekyll.environment == "production" %}
{% include googleAnalytics.html %}
{% endif %}

and

{% if jekyll.environment == "production" %}
    <link rel="stylesheet" href="/assets/css/main.min.css">
{% else %}
    <link rel="stylesheet" href="/assets/css/main.css">
{% endif %}

Now, I've read that GitHub Pages should automatically set the JEKYLL_ENV to production, but when I throw {{ jekyll.enviornment }} into my page, I get development both locally and on my hosted site. This may have do to with me building the site before I deploy using this and this.

My gulpfile.js

var gulp        = require('gulp');
var ghPages     = require('gulp-gh-pages');
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer');
var minifyCss   = require('gulp-minify-css');
var rename      = require('gulp-rename');
var cp          = require('child_process');

...

/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
        .on('close', done);
});

...

/**
 * Deploy to gh-pages
 */
gulp.task('deploy', ['jekyll-build'], function() {
    return gulp.src('./_site/**/*')
        .pipe(ghPages());
});

Essentially, when I run gulp deploy, I take the _site directory and push it to the gh-pages branch.

I don't know if this is causing the environment to be set to development or what, but what I am thinking of doing is instead of running the jekyll-build task in the deploy task is making and running a new jekyll-build-prod task that sets the JEKYLL_ENV to production.

This is the problem I'm running into. I'm not sure how to set the environment using child_process spawns (it was already written in this boilerplate). I've seen this command recommended: $ JEKYLL_ENV=production jekyll build. I just seem to need to alter my jekyll-build task to incorporate that.

If there is a simpler way of doing this, I'd love to hear it.

Any help is appreciated.

EDIT:

I have tried including both a _config.yml where I set environment: prod and a _config_dev.yml where I set environment: dev and updating my gulp tasks to:

/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['build', '--config', '_config.yml,_config_dev.yml'], {stdio: 'inherit'})
        .on('close', done);
});

/**
 * Build the Jekyll Site for production
 */
gulp.task('jekyll-build-prod', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['build', '--config', '_config.yml'], {stdio: 'inherit'})
        .on('close', done);
});

However, when I run the deploy task and check the hosted site, it still says the environment is development.

Even if I include environment: prod in both _config.yml and _config_dev.yml, it still says development.

Croak

Answer 1

After a lot of trial and error, I finally figured out how to fix this issue. For whatever reason, the answer provided by @Christian Specht (using two different config files wasn't working). Instead I had to manually change the environments using the child process spawns in my gulp tasks. My updated gulpfile.js:

/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['build'], { stdio: 'inherit' })
        .on('close', done);
});

/**
 * Build the Jekyll Site for production
 */
gulp.task('jekyll-build-prod', function (done) {
    browserSync.notify(messages.jekyllBuild);

    var productionEnv = process.env;
    productionEnv.JEKYLL_ENV = 'production';

    return cp.spawn('jekyll', ['build'], { stdio: 'inherit' , env:productionEnv })
        .on('close', done);
});

/**
 * Deploy to gh-pages
 */
gulp.task('deploy', ['jekyll-build-prod'], function() {
    return gulp.src('./_site/**/*')
        .pipe(ghPages());
});

Croak

Answer 2

I don't use GitHub Pages myself...but as I understand it, GitHub Pages sets the JEKYLL_ENV to production when you push your source code to GitHub and let GitHub Pages build the site.

You are doing something different: you are building your site locally and just push the finished HTML files (the _site folder), so GitHub Pages will never actually build your site.

This means that you need to take care of switching between development and production by yourself when you build your site locally.
The easiest way to do this is to use two separate config files, like I explained in this answer.

Disentwine

Correct, GiHub Pages is not actually building the site. I tried creating a _config.yml and _config_dev.yml and updating my gulp tasks (see my EDIT), but it seems the _config.yml is not being read. – Croak

I don't know Gulp, so I can't tell whether your Gulp tasks are correct. Did you try to directly execute the Jekyll commands via the command line without Gulp? Does that produce the desired results? – Disentwine

Yeah, it's strange. In my index.html I put {{ jekyll.environment }} and I've tried jekyll build, jekyll build --config _config.yml, and jekyll serve and they all result in developement even if I set both _config.yml and _config_dev.yml to production. – Croak

I just tried JEKYLL_ENV=production jekyll build and that works, however. I don't know why the config files aren't working though. – Croak

To use two config files, you'd need to run jekyll serve similar to the following. note the comma: bundle exec jekyll serve --config _config.yml,_config_dev.yml – Cobweb

Answer 3

If you want to host a site on GitHub pages using Jekyll, the best method is to use one repo, and have gh-pages branch in it.

The gh-pages branch is served as production and you can use your master or any other branch for local usage.

Since the branches are gonna be different you can make changes to files, add more files or any other changes you want to and the production will work accordingly.

Sample reference: https://github.com/VikramTiwari/blog

Pathogen

You're right, this does work. I did, however, like how gulp-gh-pages only pushed the _site folder contents to the gh-pages branch though. It made it a lot cleaner. If I can't figure out how to do it this other way, I'll have to end up doing this. – Croak