Настройка среды Jekyll для страниц GitHub

Я создаю сайт с Jekyll, который размещаю на страницах GitHub. Я хотел бы иметь возможность установить для JEKYLL_ENV значение «производство» (JEKYLL_ENV=production) при развертывании на страницах GitHub, чтобы я мог сделать что-то вроде этого:

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

а также

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

Я прочитал, что GitHub Pages должен автоматически устанавливать JEKYLL_ENV на production, но когда я добавляю {{ jekyll.enviornment }} на свою страницу, я получаю development как локально, так и на моем размещенном сайте. Возможно, это связано с тем, что я создавал сайт перед развертыванием с помощью этого. и это.

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

По сути, когда я запускаю gulp deploy, я беру каталог _site и помещаю его в ветку gh-pages.

Я не знаю, вызывает ли это установку среды на development или что-то еще, но я думаю о том, чтобы вместо запуска задачи jekyll-build в задаче deploy создать и запустить новую задачу jekyll-build-prod, которая устанавливает JEKYLL_ENV в production.

Это проблема, с которой я сталкиваюсь. Я не уверен, как установить среду с помощью child_process spawns (это уже было написано в этот шаблон). Я видел, что эта команда рекомендуется: $ JEKYLL_ENV=production jekyll build. Кажется, мне просто нужно изменить мою задачу jekyll-build, чтобы включить это.

Если есть более простой способ сделать это, я хотел бы услышать его.

Любая помощь приветствуется.

РЕДАКТИРОВАТЬ:

Я попытался включить как _config.yml, где я установил environment: prod, так и _config_dev.yml, где я установил environment: dev, и обновил свои задачи gulp до:

/**
 * 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);
});

Однако, когда я запускаю задачу развертывания и проверяю размещенный сайт, он по-прежнему говорит, что environment равно development.

Даже если я включу environment: prod и в _config.yml, и в _config_dev.yml, все равно будет development.


person user2909019    schedule 05.01.2016    source источник


Ответы (3)


Я сам не использую GitHub Pages... но, насколько я понимаю, GitHub Pages устанавливает JEKYLL_ENV на production когда вы отправляете исходный код на GitHub и позволяете GitHub Pages создавать сайт.

Вы делаете что-то другое: вы создаете свой сайт локально и просто отправляете готовые HTML-файлы (папка _site), поэтому GitHub Pages никогда не создаст ваш сайт.

Это означает, что вам нужно позаботиться о переключении между development и production самостоятельно, когда вы создаете свой сайт локально.
Самый простой способ сделать это — использовать два отдельных файла конфигурации, как я объяснял в этот ответ.

person Christian Specht    schedule 05.01.2016
comment
Правильно, GiHub Pages на самом деле не создает сайт. Я попытался создать _config.yml и _config_dev.yml и обновить свои задачи gulp (см. мой РЕДАКТИРОВАТЬ), но, похоже, _config.yml не читается. - person user2909019; 05.01.2016
comment
Я не знаю Gulp, поэтому не могу сказать, корректны ли ваши задачи Gulp. Вы пытались напрямую выполнить команды Jekyll через командную строку без Gulp? Дает ли это желаемые результаты? - person Christian Specht; 05.01.2016
comment
Да, это странно. В моем index.html я поставил {{ jekyll.environment }} и пробовал jekyll build, jekyll build --config _config.yml и jekyll serve, и все они приводят к developement, даже если я установил для _config.yml и _config_dev.yml значение production. - person user2909019; 05.01.2016
comment
Я только что попробовал JEKYLL_ENV=production jekyll build, и это работает. Я не знаю, почему файлы конфигурации не работают. - person user2909019; 05.01.2016
comment
Чтобы использовать два файла конфигурации, вам нужно запустить jekyll serve, как показано ниже. обратите внимание на запятую: bundle exec jekyll serve --config _config.yml,_config_dev.yml - person Mike Stewart; 20.01.2017

После долгих проб и ошибок я, наконец, понял, как решить эту проблему. По какой-то причине ответ, предоставленный @Christian Specht (использование двух разных файлов конфигурации не сработало). Вместо этого мне пришлось вручную изменить среду, используя child process spawns в моих задачах gulp. Мой обновленный 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());
});
person user2909019    schedule 05.01.2016

Если вы хотите разместить сайт на страницах GitHub с помощью Jekyll, лучший способ — использовать одно репо и иметь в нем gh-pages ветку.

Ветвь gh-pages используется как производственная, и вы можете использовать свою основную или любую другую ветку для локального использования.

Поскольку ветки будут разными, вы можете вносить изменения в файлы, добавлять дополнительные файлы или любые другие изменения, которые вы хотите, и производство будет работать соответствующим образом.

Образец ссылки: https://github.com/VikramTiwari/blog

person Vikram Tiwari    schedule 05.01.2016
comment
Вы правы, это работает. Однако мне понравилось, как gulp-gh-pages переместил содержимое папки _site только в ветку gh-pages. Это сделало его намного чище. Если я не могу понять, как сделать это по-другому, мне придется в конечном итоге сделать это. - person user2909019; 05.01.2016