Question

我使用Gulp来运行Jekyll。我的设置在localhost上运行正常，但是当我介绍Github Pages时，相对链接停止工作。我使用gulp-gh-pages npm包将_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页面上都能正常工作？

Answer 1

尝试：＆＃34; baseurl: /portfolio＆＃34;

使用{{site.baseurl}}/path/to/res或{{ "/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());
});

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

2 个答案: