用gulpfile将内容推送到gh页面

我试图用gulp将我的博客推到gh页面上，但是当它在存储库中时没有样式。 Here is the page,和here is my repository.用gulpfile将内容推送到gh页面

我试过寻找答案，但我真的不知道我现在可以进一步尝试。据我所知，该页面将通过使用_site中的内容来构建，但我看不到如何。

var gulp  = require('gulp'); 
var browserSync = require('browser-sync'); 
var sass  = require('gulp-sass'); 
var prefix  = require('gulp-autoprefixer'); 
var cp   = require('child_process'); 
var jade  = require('gulp-jade'); 

var messages = { 
    jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build' 
}; 

/** 
* Build the Jekyll Site 
*/ 
gulp.task('jekyll-build', function (done) { 
    browserSync.notify(messages.jekyllBuild); 
    return cp.spawn('jekyll', ['build'], {stdio: 'inherit'}) 
     .on('close', done); 
}); 

/** 
* Rebuild Jekyll & do page reload 
*/ 
gulp.task('jekyll-rebuild', ['jekyll-build'], function() { 
    browserSync.reload(); 
}); 

/** 
* Wait for jekyll-build, then launch the Server 
*/ 
gulp.task('browser-sync', ['sass', 'jekyll-build'], function() { 
    browserSync({ 
     server: { 
      baseDir: '_site' 
     } 
    }); 
}); 

/** 
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds) 
*/ 
gulp.task('sass', function() { 
    return gulp.src('assets/css/main.scss') 
     .pipe(sass({ 
      includePaths: ['css'], 
      onError: browserSync.notify 
     })) 
     .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) 
     .pipe(gulp.dest('_site/assets/css')) 
     .pipe(browserSync.reload({stream:true})) 
     .pipe(gulp.dest('assets/css')); 
}); 

/* 
** Mikael used Gulp. It's super effective! 
*/ 

gulp.task('jade', function(){ 
    return gulp.src('_jadefiles/*.jade') 
    .pipe(jade()) 
    .pipe(gulp.dest('_includes')); 
}); 

/** 
* Watch scss files for changes & recompile 
* Watch html/md files, run jekyll & reload BrowserSync 
*/ 
gulp.task('watch', function() { 
    gulp.watch('assets/css/**', ['sass']); 
    gulp.watch(['index.html', '_layouts/*.html', '_includes/*'], ['jekyll-rebuild']); 
    gulp.watch('_jadefiles/*jade', ['jade']); 
}); 

/** 
* Default task, running just `gulp` will compile the sass, 
* compile the jekyll site, launch BrowserSync & watch files. 
*/ 
gulp.task('default', ['browser-sync', 'watch']);

来源

2015-09-07 Blobbey

样式表是目前在HTML head绝对链接：

<link rel="stylesheet" href="/assets/css/main.css">

这使其指向以下资源，不存在：

https://mothil93.github.io/assets/css/main.css

实你想要的资源路径是这样的：

https://mothil93.github.io/akirothesquid/assets/css/main.css

所以你需要改变你所有的内部链接，而不是绝对的。例如，对于上面的样式表，使用该行：

<link rel="stylesheet" href="assets/css/main.css">

一旦做了替换制成，样式开始出现在您的网站。

来源

2015-09-07 17:55:37

这确实改变了它。非常感谢！这样一个愚蠢的错误，但我可能永远不会找到它。 – Blobbey

@MikaelLindberg下一次你遇到这样的麻烦时，不要忘记看看浏览器的控制台！它向我展示了404错误的网址，并且我能够调查导致网址错误的原因！ –

调用追索权作出这样的：

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

或

<link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">

所以，在_config.yml，您可以设置baseurl到/akirothesquid并使用哲基尔方式指向ressources。

来源

2015-09-07 21:40:39

用gulpfile将内容推送到gh页面

回答

相关问题