为 GitHub 个页面设置 Jekyll 环境

Question

我正在使用 Jekyll 构建一个站点，我在 GitHub 页面上托管该站点。当我部署到 GitHub 页面时，我希望能够将 JEKYLL_ENV 设置为 'production' (JEKYLL_ENV=production)，这样我就可以做这样的事情：

{% 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 页面应该自动将 JEKYLL_ENV 设置为 production，但是当我将 {{ jekyll.enviornment }} 放入我的页面时，我得到 development 在本地和我的托管站点上。这可能与我在使用 this and this.

部署之前构建站点有关

我的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 设置环境（它已经写在 this 样板文件中）。我看过这个推荐的命令：$ JEKYLL_ENV=production jekyll build。我似乎只是需要更改我的 jekyll-build 任务以将其合并。

如果有更简单的方法，我很想听听。

感谢任何帮助。

编辑：

我已经尝试在我设置 environment: prod 的地方包括 _config.yml 和我设置 environment: dev 的 _config_dev.yml 并将我的 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。

即使我在 _config.yml 和 _config_dev.yml 中都包含 environment: prod，它仍然显示 development.

Answer 1

如果您想使用 Jekyll 在 GitHub 个页面上托管站点，最好的方法是使用一个存储库，并在其中包含 gh-pages 个分支。

gh-pages 分支用作生产，您可以使用主分支或任何其他分支供本地使用。

由于分支会有所不同，您可以更改文件、添加更多文件或任何其他您想要的更改，生产将相应地进行。

示例参考：https://github.com/VikramTiwari/blog

Answer 2

我自己不使用 GitHub 页面...但据我了解，GitHub 页面将 JEKYLL_ENV 设置为 production 当您将源代码推送到 GitHub 并让 GitHub 页面构建站点时 .

你在做一些不同的事情：你在本地构建你的网站，只是推送完成的 HTML 文件（_site 文件夹），所以 GitHub Pages 永远不会真正构建你的网站。

这意味着您在本地构建站点时需要自行在 development 和 production 之间切换。
最简单的方法是使用两个单独的配置文件，就像我在 .

中解释的那样

Answer 3

经过反复试验，我终于想出了解决这个问题的方法。无论出于何种原因，@Christian Specht 提供的答案（使用两个不同的配置文件不起作用）。相反，我不得不在 gulp 任务中使用 child process spawns 手动更改环境。我的更新 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());
});

为 GitHub 个页面设置 Jekyll 环境

Setting Jekyll environment for GitHub Pages

github

gulp

jekyll

github-pages

child-process