I try to add some SCSS, nothing special.

But get all kinds of errors:

ERROR in src/stylesheets/styles.scss
1:2   ×  Expected newline after ","                                 selector-list-comma-newline-after
2:6   ×  Expected indentation of 2 spaces                           indentation
1:12  ×  Expected newline after ","                                 selector-list-comma-newline-after
4:1   ×  Expected empty line before rule                            rule-empty-line-before
8:3   ×  Expected empty line before comment                         comment-empty-line-before
26:1   ×  Expected empty line before rule                            rule-empty-line-before

How can I disable this strict parsing?

Dependancies should be changed to dependencies on this page:

https://docs.staticsiteboilerplate.com/getting-started/installation#step-2-install-dependancies

Describe the bug
Images that are placed in the images folder but only referenced in HTML and not CSS do not get included in the production build. So far only tested with a PNG but would bet it includes others as well.

To Reproduce

1. Place an image in the /src/images/ folder.
2. Reference this image in index.html using /images/.png
3. Run the command npm run build:dist
4. Check the dist/images folder for your image.

Expected behavior
Images that are placed in the assets folder should not be removed.

Desktop (please complete the following information):

• OS: Windows 10 Build 2004
• Browser [Brave (latest)]
• NPM: 6.14.6
• Node: 10.22.1
• BoilerPlate: Current version

Once I've added the Google Analytics Tracking ID in the npm setup and did a npm run build:dist the Analytics script is added between the HEAD and BODY. This is invalid HTML. It should be added inside the HEAD.

Describe the bug
In config/webpack.loaders.js, line 19, the test regex matches only .jsx but not .js files.

x should be optional with ? to match both .js and .jsx files.

- /\.js(x)$/
+ /\.js(x)?$/

// or something like
+ /\.jsx?$/
+ /\.(js|jsx)$/ 

(taken from https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js#L29)

tested with https://www.regextester.com/

To Reproduce
Steps to reproduce the behavior:

1. Create a new project from the installation guide
2. Run $ npm install
3. Start dev server with $ npm start
4. In config/webpack.loaders.js, line 23, change loader from babel-loader to an invalid loader name, for example: dumbbell-loader
5. Restart the dev server. There is no errors thrown.

Expected behavior
webpack-dev-server should display an error of the invalid loader, which means the source file scripts.js get processed.

Screenshots (of the expected behavior)

Desktop (please complete the following information):

• OS: macOS 10.14.3
• Node: v11.11.0
• npm: v6.9.0

Additional context
.js files are included in the bundle but they are not transpiled with babel-loader

✌️

Is your feature request related to a problem? Please describe.
Add TailwindCSS V2 for styling.

Describe the solution you'd like
I simply want to style my HTML using https://tailwindcss.com/docs

Describe alternatives you've considered
No, in my workflow, using TailwindCSS is a must.

Additional context
Nothing to add. I think TailwindCSS is making a name for itself at this point.
I never worked with scss so I don't know if that can be in conflict.

Thanks for considering :)

Describe the bug
In your documentation, it clearly states:

You may add as many html pages as you’d like to the root level directory, they will automatically be copied and minified into the dist/ folder upon building your site.

So I don't know if this a bug report or a feature request:

I want users to be able to visit website.com/survey instead of survey.html so I've put a survey/index.html file there. It works technically, I see the HTML, but it is not receiving any of the styles or javascript code injection.

To Reproduce
Steps to reproduce the behavior:

1. Create a subfolder for HTML (Very standard operation I assume?)
2. HTML inside there will load but it will not get the webpack injections or live reload.

Expected behavior
I expect to be able to nest my HTML for cleaner URLs

Desktop (please complete the following information):
Platform Agnostic

Describe the bug
Dev server. Changes to files do not reflect in the browser neither with hot reload nor with manual. Only relaunching server works.

To Reproduce
Steps to reproduce the behavior:

1. Install new boilerplate.
2. Make changed to index.html.
3. See no changes to the index page in the browser.

Expected behavior
Reflecting changes to the file at least with manual page reload.

Desktop (please complete the following information):

• OS: MacOS Mojave
• Browser Chrome Version 71.0.3578.98
• npm 6.2.0

Is your feature request related to a problem? Please describe.
If I import big amount of css (e.g. frameworks like Bootstrap etc.), a lot of unused css classes end up in the css prod build.

Describe the solution you'd like
I think that purge-css can fix this.

Describe alternatives you've considered
Maybe some of already used css plugins (like cssnano) can also fix the problem.

Unable to integrate file-include-webpack-plugin
Been trying to get the following working with SSB but can't seem to.
https://github.com/Vishal0203/file-include-webpack-plugin

Managed to ignore the files in the partials directory I created however the partials dont merge into the html parents. Any ideas or alternatives appreciated!

Describe the bug
Error: pngquant failed to build, make sure that libpng-dev is installed
Tried installing libpng doesn't work. Tried isntalling manually doesn't work. Please let me know how to solve this, to use the Static Bolier Plate

To Reproduce
Steps to reproduce the behavior:

1. npm install
2. Runs installation
3. Error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

ERROR in ./stylesheets/styles.scss Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js): Error: Option sitemap` should be an absolute URL
at resolve (D:\MangroveProjects\recover-better\node_modules\generate-robotstxt\dist\standalone.js:147:15)
at new Promise ()
at Promise.resolve.then.then (D:\MangroveProjects\recover-better\node_modules\generate-robotstxt\dist\standalone.js:110:18)
at
@ multi ./javascripts/scripts.js ./stylesheets/styles.scss main[1]

ERROR in Option sitemap should be an absolute URL`

If nothing is input on the interactive set up then there has to be something there so that it doesn't error out.

name: Webpack build error
about: clean-webpack-plugin dist has been removed error

To Reproduce
Steps to reproduce the behavior:

1. npm install
2. follow install guide
3. npm run start
4. See error

npm run start
[email protected] start /Users/eugeveli/Desktop/myProj/wallpapers/wallpapers.site
cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.js

clean-webpack-plugin: /Users/eugeveli/desktop/myproj/wallpapers/wallpapers.site/dist has been removed.
events.js:173
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE: address already in use 127.0.0.1:8000
at Server.setupListenHandle [as _listen2] (net.js:1255:14)
at listenInCluster (net.js:1303:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1442:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:62:10)
Emitted 'error' event at:
at emitErrorNT (net.js:1282:8)
at process.internalTickCallback (internal/process/next_tick.js:72:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/eugeveli/.npm/_logs/2019-01-11T15_24_44_405Z-debug.log

Desktop
2019-01-11T15_31_24_839Z-debug.log
:

• OS: macOS 10.14

Describe the bug
Setting maximum-scale in viewport meta has long been considered bad. It prevents users from being able to pinch-zoom should they need to.

To Reproduce
See the outputted html
look at meta tag for viewport:

Expected behavior
Should be:

Desktop (please complete the following information):

• OS: [e.g. iOS]
  All
• Browser [e.g. chrome, safari]
  All
• Version [e.g. 22]
  All

Additional context
https://a11yproject.com/posts/never-use-maximum-scale/

After running npm run start this command it throws and error . Pleaes check the screenshot .

Desktop (please complete the following information):

• OS: Mac Os

Hi! First of all, thank you for this project, it's really helpful. I just noticed something that could be annoying for some (it has been for me):

When building, images copying into /dist does not take into account the srcset attribute in html files, for example:

<img src="src/images/logo.png" srcset="src/images/[email protected] 2x" />

You can still copy these files by hand but it's not ideal when deploying automatically.

Thanks again!

Is multi-language support in plans for future releases?

What about adding html tags for viewport and the "IE hacking"?

inside head tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

inside body tag:

<!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

Additional context
there is some tags that maybe be helpfu: https://github.com/h5bp/html5-boilerplate/blob/master/dist/index.html

Any hint how could I import other CSS/JS libraries like Bootstrap?

Had difficulty publishing as node-sass is now deprecated. Installing sass and modifying config/webpack.loaders.js L76 to:
implementation: require("sass"), resolved this for me.

Also, wouldn't build when I had an image in the images folder as it threw the following error:

    ERROR in ./images/lights.jpg
    Module build failed (from ../node_modules/image-webpack-loader/index.js):
    Error: spawn /static-site-boilerplate/node_modules/mozjpeg/vendor/cjpeg ENOENT
        at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
        at onErrorNT (internal/child_process.js:465:16)
        at processTicksAndRejections (internal/process/task_queues.js:80:21)
     @ ./index.html (../node_modules/html-webpack-plugin/lib/loader.js!./index.html) 1:241-271

Upgrading to "image-webpack-loader": "^7.0.1", fixed this for me.

On a freshly cloned repo I get an error when running npm install:

[email protected] install...
../src/stats.cc:130:19: error: no matching member function for call to 'Set'

...node-gyp/13.8.0/include/node/v8.h:3547:37: note: candidate function not viable: requires 3 arguments, but 2 were provided
V8_WARN_UNUSED_RESULT Maybe Set(Local context,

I guess sharp package is dependency of webapp-webpack-plugin which is now deprecated (8 months without update)

• MacOs Catalina 10.15.3

I installed Vue.js using NPM and load it in scripts.js:
import 'vue';

But it does not work since the scripts get loaded at the bottom of the body, any way to move it to head?

Describe the bug
When trying to build with 'npm i' I get the following error message:

> node ./config/site.setup.js

/Users/wnas/Documents/workspace/static-site-boilerplate/config/site.setup.js:11
async function runSetup() {
      ^^^^^^^^
SyntaxError: Unexpected token function
    at Object.exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.runMain (module.js:575:10)
    at run (node.js:348:7)
    at startup (node.js:140:9)
    at node.js:463:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node ./config/site.setup.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wnas/.npm/_logs/2019-02-12T07_27_48_923Z-debug.log

Additional context
Add any other context about the problem here.

Describe the bug
Unable to run npm install on Apple M1

Prebuilt libvips 8.10.5 binaries are not yet available for darwin-arm64v8
unable to compile on M1

To Reproduce
Steps to reproduce the behavior:

1. checkout project on Apple M1
2. run npm install
3. See error

Expected behavior
install should run fine

Screenshots
Log "Prebuilt libvips 8.10.5 binaries are not yet available for darwin-arm64v8"
sharp, fatal error: 'vips/vips8' file not found

SOLUTION
New Pre-build binaries are available now. But the project or dependencies of it still try to use the old binaries.

npm upgrade
npm install

otherwise:

https://sharp.pixelplumbing.com/install#apple-m1

When building the site, 404.html file is generated - which is good, but it is inserted into sitemap.xml - 404.html should not be indexed by search engines.

Reproduce:
just follow the simple instructions to install a fresh project from (https://docs.staticsiteboilerplate.com/getting-started/installation?id=step-1-clone-or-download-the-git-repo),
and npm run start:dist

Expected behavior
404.html should not be in sitemap.xml (nor sitemap.xml.gz)

• OS: All OS
• Browser: All Browsers
• Version: All Versions

Disclaimer: Its probably my fault, because i'm not super familiar with Webpack and NPM. What i'm looking for is a 'easy' way of using this for a multilingual website, where each language is a different webpage / website , and not rendered on the client using a templating language.

So for example: www.domain.com (for english) and www.domain.com/de for German. Each is a different page.

This package seems to do what i was lookin for:
https://www.npmjs.com/package/static-i18n

But i'm not sure how to integrate it with webpack / build process.

node -v v14.2.0
npm -v6.14.5

node install

node-pre-gyp WARN Using request for node-pre-gyp https download
node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.9/fse-v1.2.9-node-v83-darwin-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v83 ABI, unknown) (falling back to source compile with node-gyp)
SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
In file included from ../fsevents.cc:6:
In file included from ../../nan/nan.h:2884:
../../nan/nan_typedarray_contents.h:34:43: warning: 'GetContents' is deprecated:
Use GetBackingStore. See http://crbug.com/v8/9908.
[-Wdeprecated-declarations]
data = static_cast<char*>(buffer->GetContents().Data()) + byte_offset;
^
/Users/richardroe/Library/Caches/node-gyp/14.2.0/include/node/v8.h:5202:3: note:
'GetContents' has been explicitly marked deprecated here
V8_DEPRECATE_SOON("Use GetBackingStore. See http://crbug.com/v8/9908.")
^
/Users/richardroe/Library/Caches/node-gyp/14.2.0/include/node/v8config.h:402:39: note:
expanded from macro 'V8_DEPRECATE_SOON'

define V8_DEPRECATE_SOON(message) [[deprecated(message)]]

                                  ^

1 warning generated.
SOLINK_MODULE(target) Release/fse.node
COPY /Users/richardroe/Documents/static-site-boilerplate/node_modules/fsevents/lib/binding/Release/node-v83-darwin-x64/fse.node
TOUCH Release/obj.target/action_after_build.stamp

[email protected] install /Users/richardroe/Documents/static-site-boilerplate/node_modules/sharp
(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached /Users/richardroe/.npm/_libvips/libvips-8.7.4-darwin-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=14.2.0 runtime=node arch=x64 libc= platform=darwin)
TOUCH Release/obj.target/libvips-cpp.stamp
CXX(target) Release/obj.target/sharp/src/common.o
CXX(target) Release/obj.target/sharp/src/metadata.o
CXX(target) Release/obj.target/sharp/src/stats.o
../src/stats.cc:130:19: error: no matching member function for call to 'Set'
channels->Set(i, channelStat);
~~~~~~~~~~^~~
/Users/richardroe/Library/Caches/node-gyp/14.2.0/include/node/v8.h:3639:37: note:
candidate function not viable: requires 3 arguments, but 2 were provided
V8_WARN_UNUSED_RESULT Maybe Set(Local context,
^
/Users/richardroe/Library/Caches/node-gyp/14.2.0/include/node/v8.h:3642:37: note:
candidate function not viable: requires 3 arguments, but 2 were provided
V8_WARN_UNUSED_RESULT Maybe Set(Local context, uint32_t index,
^
1 error generated.
make: *** [Release/obj.target/sharp/src/stats.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: make failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack at ChildProcess.emit (events.js:315:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
gyp ERR! System Darwin 19.4.0
gyp ERR! command "/usr/local/Cellar/node/14.2.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/richardroe/Documents/static-site-boilerplate/node_modules/sharp
gyp ERR! node -v v14.2.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/richardroe/.npm/_logs/2020-05-14T23_42_56_422Z-debug.log

Going by this project means you just keep making more html files. That works fine if you have maybe two or three, but if you have dozens, that means that if you want to change the <head>/<footer>/<nav> on your website then you have to change it in every single file manually, which is insane.

Any mature static site setup should have a templating/partials/include engine setup.

https://www.staticgen.com/

As mentioned in this Twitter thread:

• Add the ability to omit Google Analytics and
• Allow modifying the default viewport meta tag

node -v 16.5.0
npm -v 8.8.0

Hello, npm install fails with error:

...
npm ERR! code 1
npm ERR! path C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\Program Files\nodejs\node.exe',
npm ERR! gyp verb cli 'C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\node-gyp\bin\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb which failed Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb which failed python2 Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb which failed code: 'ENOENT'
npm ERR! gyp verb which failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb which succeeded python C:\Python310\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Python310\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:398:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:527:28)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.15.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
...

Any ideas why?

Describe the bug
The scripts.js file is not automatically importing jQuery. I believe there is a part in your code in site.setup.js that attempts to this. The error I get is:

Uncaught ReferenceError: $ is not defined

When I manually import * as $ from 'jquery' at the top of my scripts.js file jQuery works.

Also, I have to manually @import '~sanitize.css' in my styles.scss file for it to be applied. Your site.setup.js file should also take care of this so I think these functions aren't being run?

Additionally, when I manually import these it appears the SCSS file is loaded in after the JS as for a brief moment when refreshing the page no styling is applied. When it does apply, CSS transitions that shouldn't occur on page load also occur.

To Reproduce
Steps to reproduce the behavior:

1. Get a new static site boilerplate
2. During the setup select sanitize.css and choose to install jQuery
3. Get error in browser console when I run
4. Try manual setup again
5. Get same error

Expected behavior
Expect CSS to display before JS waits for document to be ready.
Expect jQuery and sanitize.css to automatically be imported into their respective scripts.js and styles.css file at build time.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome and Firefox
• Version: Chrome Version 71.0.3578.98 (Official Build) (64-bit). Firefox 64.0.2 (64-bit)

Is your feature request related to a problem? Please describe.
I need to implement a permanent redirect from path /a in my website to page /b.

Describe the solution you'd like
Can we have some way configure this?

Describe the bug
When i change pug/html , images it is okay when browser fully autoreload , but when i update sass, / css files i need only reload styles , but dont reload browser at all.

To Reproduce

1. type some rule to styles.scss file
2. You can see that browser if fully reloading,

Expected behavior
Browser not reloading, it is only reload styles. (thats much more quickly)

Hello,

When I run the production server (or when I build for production) I have a strange error:

ERROR in   Error: Child compilation failed:
  Option `sitemap` should be an absolute URL

I don't get where it comes from, I just added some JS and CSS files in webpack.config.js in the entry points.

Do you have any idea where it could come from?

Thanks a lot,

EDIT: My bad, it's just that site_url was empty

Describe the bug
On https://docs.staticsiteboilerplate.com/ it says is insecure because of expired SSL cert.

Is there a way to add more JS files?
Would I need to edit a config file to addmore JS files and set the order?

Describe the bug
The dploy package (https://github.com/lucasmotta/dploy) is currently unmaintained. While it still works, it might be wise to look for an alternative?

Expected behavior
This package should use maintained dependencies wherever possible.

Webp images are not being copied after building how to fix that ?

Describe the bug
When you build a project, the images directory does not contain images that are in src/images

To Reproduce
Steps to reproduce the behavior:

1. npm run build:dist
2. open dist/images
3. try to find images

Desktop (please complete the following information):

• OS: ubuntu 16.04, macOS Mojave

Describe the bug
Production version of bundles contains inlined source maps which makes the bundles huge.

To Reproduce
Steps to reproduce the behavior:

1. Do ENV=production npm run start:dist
2. Open the Network analysis tool in your favourite browser
3. observe the bundle size (on my project that only really has jQuery and a carousel plugin, it is around 2MB with the sourcemap, without the sourcemap it is around 300k)

(see 'devtools' setting in webpack.config.js file which always sets the value to 'cheap-eval-source-map')

Expected behavior
Source Maps should not be inlined on production because it creates huge JS files.

According to https://webpack.js.org/configuration/devtool/ for production this value should be one of the production values (do not specific devtool, 'source-map', 'hidden-source-map', and 'nosources-source-map') depending on what exactly you need.

recommendation

Reading the webpack docs, I'm inclined to say that 'hidden-source-map' is a good default option here. so omit a webpack.config.js file that has something like this line:

devtool: config.env === 'development' ? 'cheap-eval-source-map' : 'hidden-source-map',

UPDATE TO COME, SKIP NPM PART FOR NOW

Describe the bug
Script build:dist fails with error on clean clone (without any modifications) during css parsing. Error was not catched, can't be easily diagnosed by through terminal output.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://staticsiteboilerplate.com and finish all setup steps
2. Open dir, run yarn && yarn build:dist
3. See error

Expected behavior
Should build without errors.

Screenshots
Yarn (yarn && yarn build:dist) on a clean clone

Desktop (please complete the following information):

• OS: macOS Big Sur 11.1
• Node.js 7.4.0
• NPM version 7.4.0
• Yarn version 1.22.10

Additional info
After trying with npm only (without the use of yarn), I was able to see that the path to terser plugin is missing. I also tried installing terser manually to no avail. Below is a screenshot that should give pointers:

Question
How to change the compression ratio of the images?

What's wrong?
When I'm running npm run start after setting up the project with wizard, I'm getting this error:

Error: No configuration provided for /Users/username/Documents/GitHub/repo-name/src/stylesheets/styles.scss at module.exports (/Users/username/Documents/GitHub/repo-name/node_modules/stylelint/lib/utils/configurationError.js:8:28) at searchForConfig.then.then.config (/Users/username/Documents/GitHub/repo-name/node_modules/stylelint/lib/getConfigForFile.js:55:15)

To Reproduce
Steps to reproduce the behavior:

1. Run npm install
2. Run npm run start
3. See the error

Expected behavior
Error not showing up.

Screenshots

Desktop:

• OS: macOS
• Version 1.1.0

I've tried installing and running it two times already.

It would be great to have a Matomo wizard included because I do not use Google Analytics.

Describe the bug
Getting error when running npm start

To Reproduce
Steps to reproduce the behavior:

1. npm start

Errormessage

path.js:39
    throw new ERR_INVALID_ARG_TYPE('path', 'string', path);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at assertPath (path.js:39:11)
    at Object.join (path.js:432:7)
    at Object.<anonymous> (C:\Users\marcus\Desktop\_temp\static-site-boilerplate\config\site.config.js:20:17)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

Versions

• OS: Windows 10
• Node 10.14.2
• npm 6.5.0

Describe the bug
I have a video in my HTML using a <video> tag. I have an mp4 file but when I do a production build, it doesn't get translated over.

To Reproduce
Steps to reproduce the behavior:

1. Insert a video tag with an mp4 file linked.
2. Run a production build or deploy to netlify.
3. Look at the video, it will result in a 404.

Expected behavior
The video should be loaded in.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac OS Catalina
• Browser Chrome
• Version [e.g. 22]

Additional context
I see that there is an attempt to load the videos over. in the loaders file.

Custom fonts do not appear as they are not piped into the build process by Webpack's file-loader. This is the path I am using in my stylesheets:

@font-face {
  font-family: 'Font Name';
  src: url('/fonts/font-name.woff2') format('woff2'), url('/src/fonts/font-name.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Font files are not emitted neither on development server npm run start nor production build npm run build:dist.

I checked this issue's solution but the result is the same. Has anyone experienced a similar problem?

Describe the bug
When I run npm run build:dist, all the favicons URLs inserted into the head of the HTML are prefixed with a /.

The static site I'm creating is in a directory: example.com/landing, so the favicons 404 when it looks for the images at example.com/images/favicons/*, when they are located at example.com/landing/images/favicons/*.

To Reproduce
Steps to reproduce the behavior:

1. Generate a dist folder with npm run build:dist
2. Upload to a directory for a live site
3. Visit the URL for the generated file: example.com/landing
4. All the favicons 404.

Expected behavior
I would expect that the URLs for favicons would be generated as images/favicons/*.

Desktop (please complete the following information):

• OS: macOS 10.14.2
• Browser: Firefox 64.0.2

Additional context
When I ran npm run setup, I made sure that the URL for the live site included the directory - so either I edit the favicon: path.join(ROOT, '/src/images/favicon.png') in site.config.js (seems like a bad idea), or the system needs to generate the favicon URLs without a leading slash.

Is it possible to use some template engine like Handlebars, Nunjucks or something else?