Github Pages和localhost上的Jekyll中的相對鏈接無法正常工作

Question

我使用Gulp來運行Jekyll。 我的設置在localhost上運行良好，但是當我介紹Github Pages時，相對鏈接停止工作。 我使用gulp-gh-pages npm包將_site內容推_site gh-pages分支。

與Jekyll和Github Pages相關的gulpfile.js內容：

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 Pages上均可工作？

Answer 1

嘗試：“ baseurl: /portfolio ”

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

Answer 2

詳細說明@ 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());
});