Website not building properly with gulp

[kthayashi]

Thank you for the fantastic theme! I've been checking how the website appears using the command bundle exec jekyll serve for a while now, and I just recently managed to get gulp-cli configured. However, when I run gulp or npm start, the served website does not get built properly.

I can successfully run commands such as gulp img, and I can't seem to figure out what is causing this issue. The website also appears properly when I run bundle exec jekyll serve. Do you have any insights into this issue (is it merely an issue on my end)? For your reference, I am using npm 5.6.0, node 8.11.3, and gulp-cli 2.0.1. Thank you!

[janczizikow]

Hey @kthayashi , If you want to use gulp to develop locally, please modify _config.yml (using the settings from this repo as an example):

baseurl: "" # the subpath of your site, e.g. /blog
url: "https://janczizikow.github.io/sleek" # the base hostname & protocol for your site, e.g. http://example.com

baseurl has to be set to an empty string and url should contain all the url. the issue is quite annoying, but I don't have a good idea for the workaround (to make this work both for bundler, gulp and ghpages) . I used this kind of setup for ghpages, because the project pages would have appended /project-name after the hostname.

[kthayashi]

Hi @janczizikow, thank you for this. I take that this issue is related to #28. Your suggestion has resolved most of the problems I was experiencing. However, images are still not showing up properly (blank in hero/featured images, ? marks in post thumbnails). Do you know of a solution for this?

[pekgabor]

Hi @janczizikow, I have the same problem with the images. Do you have suggestions in mind? Thank you.

[janczizikow]

Hey guys, really sorry was really swamped recently. @kthayashi to make images appear in the post:

1. Add the name of the image (without extension in front matter of the post: eg.:

   ---
   layout: post # needs to be post
   title: Getting Started with Sleek # title of your post
   featured-img: sleek #optional - if you want you can include hero image
   ---

2. Place the image named the same as in the frontmatter in the _img/posts (supported file formats: .jpg or .png).

3. Run gulp img from command line.

4. Restart jekyll server

There's a gulp task that compresses + resizes images for different purposes + renames it properly, so that partials (cards & hero) will the image.

[kat-wehr]

This is probably a newbie question, but I've got my site up and running for the most part and had no troubles, so thanks for that! However I too am struggling with the gulp img task... are there additional steps to using that command (such as needing to install it in a special way?) or should it just work out of the box with the rest of the stuff that is included in sleek?

[janczizikow]

Hey @kat-wehr ,

You just need to make sure to run npm install to install all the packages from node. Then you should be able to run gulp img from the command line in root of your project directory.

[lizita]

Gulp isn't making the necessary images for me. Here's the error I get:

[11:23:38] Requiring external module babel-register
[11:24:21] Using gulpfile /srv/jekyll/gulpfile.babel.js
[11:24:21] Starting 'img'...
[11:24:21] gulp-responsive: Created 0 images (matched 0 of 0 images)
[11:24:21] gulp-responsive: Available images do not match the following config:
  - `*`
  - `*`
  - `*`
  - `*`
  - `*`
  - `*`
  - `*`
  - `*`
[11:24:21] gulp-imagemin: Minified 0 images
[11:24:21] Finished 'img' after 157 ms

gulp -v
CLI version: 2.3.0
Local version: 4.0.0
npm -v
6.14.4
node -v
v10.19.0

I tried to change errorOnUnusedConfig: false to true, as suggested here: https://github.com/mahnunchik/gulp-responsive/issues/57, but no dice.

Any suggestions?