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.

Answer 1

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.

Answer 2

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());
});