How do I build the styleguide without running a server?

[aschle]

How I can I build a styleguide without running the build in server? I actually want a static version of the styleguide, so I can just open the index.html file in the browser and it just runs.

[varya]

To create a static version you need to remove server: true, parameter from your gulp/grunt task.

[varya]

Just small correction: you will still need a server running in the output folder. Such as python -m SimpleHTTPServer (works in Mac by default). Or, if you release the files into any hosting, they provide server for you.

[aschle]

So there is no real static static version? I wanted to copy the styleguide to my github page. Is there a way to do so, without a server at all?

[varya]

Static version is generated if you do not use server: true parameter. This is exact what you need for hosting in github pages.
You may be interested in this blog post http://varya.me/en/posts/sc5-styleguide-for-smallers This describes my experience on tuning SC5 Style Guide for GitHub pages.

[aschle]

Thank you for that link. I tried disableHtml5Mode: true now.

Here is my gulpfile:

var gulp = require('gulp');
var styleguide = require('sc5-styleguide');
var less = require('gulp-less');
var outputPath = 'styleguide_static';
var concat = require("gulp-concat");

gulp.task('styleguide:generate', function() {
  return gulp.src('less/**/*.less')
    .pipe(styleguide.generate({
        title: 'Styleguide for neonion',
        rootPath: outputPath,
        appRoot: '/styleguide_static',
        overviewPath: 'less/styleguide.md',
        commonClass: 'myfont',
        extraHead: [
          '<script src="js/jquery.min.js"></script>',
          '<script src="js/bootstrap.min.js"></script>'
        ],
        disableEncapsulation: true,
        disableHtml5Mode: true
      }))
    .pipe(gulp.dest(outputPath));
});

gulp.task('styleguide:applystyles', function() {
  return gulp.src([
    'less/my-bootstrap-theme.less',
    'utils/additional.less'
    ])
    .pipe(concat('all.less'))
    .pipe(less({
      errLogToConsole: true
    }))
    .pipe(styleguide.applyStyles())
    .pipe(gulp.dest(outputPath));
});

gulp.task('styleguide:static', function() {
  gulp.src('fonts/**')
    .pipe(gulp.dest(outputPath + '/fonts'));
  gulp.src('js/jquery.min.js')
    .pipe(gulp.dest(outputPath + '/js'));
  gulp.src('js/bootstrap.min.js')
    .pipe(gulp.dest(outputPath + '/js')); 
});

gulp.task('watch', function() {
  // Start watching changes and update styleguide whenever changes are detected
  // Styleguide automatically detects existing server instance
  gulp.watch(['less/**/*.less'], ['styleguide']);
});

gulp.task('styleguide', [
  'styleguide:static',
  'styleguide:generate',
  'styleguide:applystyles'
]);

When I open index.html locally the files can't be loaded:

• Failed to load resource: net::ERR_FILE_NOT_FOUND
  file:///styleguide_static/js/app.js
• Failed to load resource: net::ERR_FILE_NOT_FOUND
  file:///styleguide_static/styleguide.css
• and so on ...

[hannu]

Styleguide always requires minimal webserver, otherwise browser is unable to load external resources. However, if your goal is to host styleguide on github, it is possible by setting disableHtml5Mode: true.
Please note that styleguide still do not work locally without the server but github pages provides it for you so the styleguide should work after you access it via github pages.

[aschle]

Thank you, that helped a lot :)

Running now at http://alexa.sc/styleguide_static/.

Saved my day!

[zetagraph]

Hi @varya every time I try to generate a static version of my styleguide I get just a blank page. It looks to me that relative paths to the /js/app.js are not right. Everything works great locally with this: https://github.com/zetagraph/monoset/blob/dev/gulpfile.js but when I remove "server: true, and port: 3005," and regenerate the styleguide I would just get a blank page. The stylguide is currently here: http://zetagraph.github.io/monoset/styleguide/ Tried to use github pages as in your example: http://varya.me/en/posts/sc5-styleguide-for-smallers/ What am I missing here? Заранее спасибо!

[kraftner]

Have you set rootPath? https://github.com/SC5/sc5-styleguide#user-content-option-rootPath

[zetagraph]

@kraftner I belive I do. Its in here: https://github.com/zetagraph/monoset/blob/dev/gulpfile.js#L143 withe the rootPath being: "styleguide" in here: https://github.com/zetagraph/monoset/blob/dev/gulpfile.js#L9 I also remove the server: true, and port: 3005, before trying to generate the static version.

[varya]

Hi @zetagraph!
If to remove server and port options, your static styleguide is generated normally, I tried it.

To be able to see the result on your machine, you will need to run your own server. For example:

cd styleguide/
python -m SimpleHTTPServer

Then on http://localhost:8000/#/ you will see the website.

If you want the server to be run in the root of your project, add appRoot: "styleguide" option in the gulp task. This options says in which folder, relatively to the root of the running server there is your generated styleguide. An example is here http://varya.me/en/posts/sc5-styleguide-for-smallers/#providing-the-approot-parameter-

Proof-pic: https://fotki.yandex.ru/next/users/toivonens/album/44279/view/614430

[zetagraph]

@varya Thanks a lot. I kinda figured it out eventually by messing with the path to the styleguide in relation to where it was to the Drupal theme. For me it was: appRoot: '/themes/monoset/styleguide', This way I can just see it on my local from where the Drupal is served, e.g: "http://d8.dev/themes/monoset/styleguide/index.html"

Great tip about the "python -m SimpleHTTPServer" never new I can do that :)

On a different note how do I get custom colours to work? If I want a different colour for the header for example. I tried to override the variables by creating "_styleguide_variables.scss" in my theme and that worked at some point but then something change and I lost them. Probably missing something simple again.

Еще раз спасибо!