Something wrong on my project github page deployment

Hello, After following this: https://www.npmjs.com/package/generator-jekyllized#github-pages js and css continue without adding /jekyllized/... to the paths under sitefolder.

This is what i got: link rel=“stylesheet” href="/assets/stylesheets/style.min.css

This is what I wish: link rel=“stylesheet” href=“/jekyllized/assets/stylesheets/style.min.css”

What’s wrong on my gulp file? Please any help would be apreciated.

This is the repo: https://github.com/t0t/jekyllized/tree/master

thanks a lot!

[sergimiral]

As commented above, gulp-inject changes some paths and the workaround proposed works. Furthermore, I needed to do some more changes but I think I got it working - leaving it here just in case it helps someone & for future reference.

1 – Added baseurl: /project-name to _config.build.yml

2 – In gulpfile.babel.js changed the inject:header section from:

gulp.task('inject:head', () =>
  gulp.src('src/_includes/head.html')
    .pipe($.inject(gulp.src('.tmp/assets/stylesheets/*.css',
                            {read: false}), {ignorePath: '.tmp'}
    .pipe(gulp.dest('src/_includes'))
);

to:

gulp.task('inject:head', () =>
  gulp.src('src/_includes/head.html')
    .pipe($.inject(gulp.src('.tmp/assets/stylesheets/*.css',
                          {read: false}), {addPrefix: '{{ site.baseurl }}', ignorePath: '.tmp', addRootSlash:false}))
    .pipe(gulp.dest('src/_includes'))
);

3 – In gulpfile.babel.js changed the inject:footer section from:

gulp.task('inject:footer', () =>
  gulp.src('src/_layouts/default.html')
    .pipe($.inject(gulp.src('.tmp/assets/javascript/*.js',
                          {read: false}), {ignorePath: '.tmp'}))
    .pipe(gulp.dest('src/_layouts'))
);

to:

gulp.task('inject:footer', () =>
  gulp.src('src/_layouts/default.html')
    .pipe($.inject(gulp.src('.tmp/assets/javascript/*.js',
                          {read: false}), {addPrefix: '{{ site.baseurl }}', ignorePath: '.tmp', addRootSlash:false}))
    .pipe(gulp.dest('src/_layouts'))
);

4 – In default.html changed this:

<script src="/assets/javascript/index.min.js"></script>

to:

<script src="{{ site.baseurl }}/assets/javascript/index.min.js"></script>

5 – In header.html changed this:

<link rel="stylesheet" href="/assets/stylesheets/style.min.css">

to:

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

6 – Now everything works locally and before deploying to gh-pages one should run gulp build --prod, so the baseurl variable added in the _config_build.yml file is taken in consideration – then gulp deploy

[emilianos]

Ok, so I had a similar problem with baseurl, and found out that gulp was injecting (gulp-inject), styles and js so there was no point in changing the href in the templates (they were getting overridden every time).

I finally was able to accomplish it by editing my gulpfile as follows:

from:

gulp.task('inject:head', () =>
  gulp.src('src/_includes/head.html')
    .pipe($.inject(gulp.src('.tmp/assets/stylesheets/*.css',
                            {read: false}), {ignorePath: '.tmp'}
    .pipe(gulp.dest('src/_includes'))
);

to:

gulp.task('inject:head', () =>
  gulp.src('src/_includes/head.html')
    .pipe($.inject(gulp.src('.tmp/assets/stylesheets/*.css',
                            {read: false}), {addPrefix: '{{ site.baseurl }}', ignorePath: '.tmp', addRootSlash:false}))
    .pipe(gulp.dest('src/_includes'))
);

Just noting this down for future reference.