为 GitHub Pages 配置 Jekyll 环境

Question

为 GitHub Pages 配置 Jekyll 环境

githubgulpjekyllgithub-pageschild-process

11

我正在使用Jekyll构建一个网站，将其托管在GitHub Pages上。我希望能够在部署到GitHub Pages时设置JEKYLL_ENV为“production”（JEKYLL_ENV=production），以便我可以执行以下操作：

{% 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 %}

我读到GitHub Pages应该会自动将JEKYLL_ENV设置为production，但是当我在网页中插入{{ jekyll.environment }}时，无论是在本地还是在托管的网站上，都显示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，但我的想法是，我要做的是在 deploy 任务中运行 jekyll-build 任务，而是制作并运行一个新的 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);
});

然而，当我运行部署任务并检查托管站点时，它仍然显示环境为开发。即使我在_config.yml和_config_dev.yml中都包含environment: prod，它仍然说是development。

- user2909019

3个回答

2

经过多次尝试，我终于弄清楚如何解决这个问题。不知为何，@Christian Specht提供的答案（使用两个不同的配置文件）并没有起作用。相反，我必须在我的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());
});

- user2909019

1

如果您想使用Jekyll在GitHub页面上托管网站，最好的方法是使用一个仓库，并在其中拥有gh-pages分支。 gh-pages分支用作生产环境，您可以使用主分支或任何其他分支进行本地使用。

由于分支将不同，因此您可以更改文件，添加更多文件或进行任何其他更改，生产环境将相应地工作。

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

- Vikram Tiwari

你说得对，这确实有效。不过，我还是喜欢gulp-gh-pages只将_site文件夹的内容推送到gh-pages分支，这样会更加清晰明了。如果我无法找到其他方法，那么我就只能这样做了。 - user2909019

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christian Specht · Accepted Answer

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

你在做一些不同的事情：你在本地构建站点，然后只需推送完成的HTML文件（即_site文件夹），因此GitHub Pages实际上永远不会构建你的站点。

这意味着在本地构建站点时，你需要自行切换 development 和 production 模式。最简单的方法是使用两个单独的配置文件，就像我在这个答案中所解释的那样。