Github Pages 和 localhost 上 Jekyll 中的相对链接无法正常工作

Question

我使用 Gulp 来运行 Jekyll。我的设置在 localhost 上运行良好，但是当我引入 Github Pages 时，相关链接停止工作。我使用gulp-gh-pages npm 包将_site 内容推送到gh-pages 分支。

gulpfile.js 与 Jekyll 和 Github 页面相关的内容：

var browserSync  = require('browser-sync').create();
var gulp         = require('gulp');
var runSequence  = require('run-sequence');
var ghPages      = require('gulp-gh-pages');
var gutil        = require('gulp-util');
var run          = require('gulp-run');
var del          = require('del');

gulp.task('build:jekyll', function(callback) {
    var shellCommand = 'jekyll build --incremental';

    return gulp.src('')
        .pipe(run(shellCommand))
        .on('error', gutil.log);

    callback();
});

gulp.task('clean', function() {
    return del(['_site', 'assets']);
});

// [`build:scripts`, `build:styles`, `build:images`] is removed from the runSequence example for MVP
gulp.task('build:prod', function(callback) {
    return runSequence('clean', 'build:jekyll', callback)
    browserSync.reload();
});

gulp.task('deploy',['build:prod'], function(){
    return gulp.src('./_site/**/*')
        .pipe(ghPages());
});

config.yml的内容：

baseurl: /

collections:
  pages:
    output: true
    permalink: /:title/

exclude: ["_assets", "gulpfile.js", "node_modules", "package.json", "package-lock.json", ".jekyll-metadata"]

对资产的引用：

<link rel="stylesheet" href="{{ site.baseurl }}assets/styles/main.min.css">

_pages目录内每一页的头条：

---
layout: page
title: Title
description: Awesome description
image: https://source.unsplash.com/random/?water
---

这里是我的 Github 存储库的链接以及完整的源代码：https://github.com/alljamin/portfolio

如何配置 Gulp 和 Jekyll，以便所有相关链接在本地和 Github 页面上都可以使用？

Answer 1

详细阐述@david-jacquel 的答案，我找到了一种通过单独的 Gulp 任务成功运行 localhost 和 Github Pages 环境的方法。

gulpfile.js的内容：

gulp.task('build:jekyll:dev', function(callback) {
    var shellCommand = 'jekyll build --incremental --baseurl "" ';

    return gulp.src('')
        .pipe(run(shellCommand))
        .on('error', gutil.log);

    callback();
});

gulp.task('build:jekyll:prod', function(callback) {
    var shellCommand = 'jekyll build --incremental';

    return gulp.src('')
        .pipe(run(shellCommand))
        .on('error', gutil.log);

    callback();
});

build:jekyll:dev 任务会将_config.yml baseurl 覆盖为""。所以我可以这样做：

gulp.task('build:dev', function(callback) {
    return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll:dev', callback)
    browserSync.reload();
});

gulp.task('build:prod', function(callback) {
    return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll:prod', callback)
    browserSync.reload();
});

gulp.task('serve', ['build:dev'], function() {
    browserSync.init({
        server: {
            baseDir: "_site"
        },
        ghostMode: false, 
        logFileChanges: true,
        logLevel: 'debug',
        open: true        
    });
    gulp.watch(...);
});

gulp.task('deploy',['build:prod'], function(){
    return gulp.src('./_site/**/*')
        .pipe(ghPages());
});

Answer 2

试试：“baseurl: /portfolio”

使用{{site.baseurl}}/path/to/res 或{{ "/path/to/res" | prepend: site.baseurl }} 生成网址。