[英]Relative links in Jekyll on Github Pages and localhost are not working correctly
I use Gulp to run Jekyll. 我使用Gulp来运行Jekyll。 My setup works fine on localhost, but when I introduce Github Pages relative links stop working.
我的设置在localhost上运行良好,但是当我介绍Github Pages时,相对链接停止工作。 I use gulp-gh-pages npm package to push
_site
contents to gh-pages
branch. 我使用gulp-gh-pages npm包将
_site
内容推_site
gh-pages
分支。
Contents of gulpfile.js
related to Jekyll and Github 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());
});
Contents of config.yml
: config.yml
内容:
baseurl: /
collections:
pages:
output: true
permalink: /:title/
exclude: ["_assets", "gulpfile.js", "node_modules", "package.json", "package-lock.json", ".jekyll-metadata"]
Reference to assets: 资产参考:
<link rel="stylesheet" href="{{ site.baseurl }}assets/styles/main.min.css">
Front matter on every page inside _pages
directory: _pages
目录内每个页面上的前件:
---
layout: page
title: Title
description: Awesome description
image: https://source.unsplash.com/random/?water
---
Here is the link to my Github repository with full source code: https://github.com/alljamin/portfolio 这是带有完整源代码的我的Github存储库的链接: https : //github.com/alljamin/portfolio
How can I configure Gulp and Jekyll so all the relative links work both locally and on Github Pages? 如何配置Gulp和Jekyll,以便所有相关链接在本地和Github Pages上均可工作?
Try : " baseurl: /portfolio
" 尝试:“
baseurl: /portfolio
”
Generate url with {{site.baseurl}}/path/to/res
or {{ "/path/to/res" | prepend: site.baseurl }}
使用
{{site.baseurl}}/path/to/res
或{{ "/path/to/res" | prepend: site.baseurl }}
{{ "/path/to/res" | prepend: site.baseurl }}
. {{ "/path/to/res" | prepend: site.baseurl }}
。
Elaborating on the @david-jacquel answer I was able to find a way to successfully run localhost and Github Pages environments via separate Gulp tasks. 详细说明@ david-jacquel答案,我能够找到一种通过单独的Gulp任务成功运行localhost和Github Pages环境的方法。
Contents of gulpfile.js
: 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();
});
The build:jekyll:dev
task will overwrite the _config.yml
baseurl to ""
. build:jekyll:dev
任务会将_config.yml
baseurl覆盖为""
。 So I can do something like this: 所以我可以做这样的事情:
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());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.