Setting Jekyll environment for GitHub Pages

user2909019

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.

user2909019

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related