Presun stránky z Github Pages na hosting, Gulp a HTTPS

Motivácia

Najväčšou motiváciou migrácie bol prechod na HTTPS. Použitím HTTPS napríklad zabránite, aby vám váš internetový provider vkladal do prehliadaných stránok reklamy, či rôzne meracie kódy.

Vďaka prechodu sa tiež zvýši rýchlosť stránky, pretože hosting podporuje SPDY (čo sa u Gihub Pages nedá povedať).

Ďalším dôvodom bolo vylepšenie build procesu, konverzia z LESS, minifikácia CSS a odstránenie obmedzení, ktoré Github Pages majú – napr. podpora len základných Jekyll pluginov.

Zmena build procesu + Gulp

Potreboval som skombinovať Gulp a Jekyll tak, aby bolo možné Jekyll spúšťať z Gulpu. Riešením bolo spraviť task, ktorý spustí process jekyll s potrebnými parametrami. Našťastie som nebol prvý, ktorý to rieši, a tak bol gulp task za pár minút na svete.

gulp.task('jekyll', function(callback) {
  childProcess.spawn('jekyll', ['build'], {stdio: 'inherit'})
    .on('close', callback);
});

Z jekyll buildu som úplne odstránil CSS a fonty – v podstate sa buildujú len statické stránky a kopírujú obrázky.

Jekyll ostal nezmenený, robí build do priečinku _site. Nad ním je watcher, ktorý vygenerované stránky kopíruje do _build. Potom existujú ďalšie tasky, ktoré sa starajú, aby k buildu pribudli aj spomínané CSS a fonty.

gulp.task('site', function() {
  return gulp.src(paths.site)
    .pipe(gulp.dest('_build'))
});

gulp.task('css', function() {
  return gulp.src(paths.css)
    .pipe(less())
    .pipe(concatCss("main.css"))
    .pipe(minifyCss())
    .pipe(gulp.dest('_build/css'))
});

gulp.task('fonts', function() {
  return gulp.src(paths.fonts)
    .pipe(gulp.dest('_build/font'));
});

Nakoniec bol zadefinovaný task pre browser-sync, ktorý z priečinku _build spustí na zadanom hoste a porte jednoduchý webserver.

gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: '_build'
    },
    host: "localhost",
    port: 4000
  });
});

Celé to vyzerá asi tak, že po nainštalovaní závislostí sa len spustí gulp a stránku je môžné upravovať, pričom vďaka watcherom a browser-syncu sa po zmenách automaticky reloaduje.

Push the button

Prechod nebol nijako komplikovaný, dá sa povedať, že bol vyriešený jedným tlačítkom – zmenou DNS záznamov. Tu sú však, pre istotu, kroky, ktoré som spravil.

1. Vybuildovanie novej verzie stránky a skopírovanie na nový hosting (zatiaľ bežíme z Githubu)
2. Zmena DNS záznamov (600s)
3. Príprava pull requestu a následný merge (dôležité je odstránenie CNAME súboru)
4. Premenovanie repozitára tak, aby sa vypli Github Pages (webelement.github.io na webelement.sk)

Zapnutie HTTPS

Ako prejsť na HTTPS, resp. ako to spraviť manuálne sa môžete dočítať v skvelom článku Filipa Procházku, preto sa tomu venovať nebudem. Spomeniem len, že certifikát (vďaka Class 2 overeniu, dokonca wildcard) mám od StartSSL a som spokojný.

Zapnutie HTTPS u mňa bolo asi tak jednoduché ako v minulosti "Zapnout SEO".

Certifikát mám, takže išlo len o:

1. Získanie chainu pomocou cert-chain-resolver
2. Nahratie .crt, .key a chainu do inputov v manažmente hostingu

Záver/výsledky

Prechod bol easy a podarilo sa:

1. Zvýšiť bezpečnosť prehliadania pomocou HTTPS – ssllabs.com
2. Zvýšiť rýchlosť stránky vďaka pár prerábkam a podpore SPDY – spdycheck.org
3. Získať na dôveryhodnosti krásnym zeleným prúžkom :)

Ešte je určite čo vylepšovať, napríklad minifikovať aj HTML, či zapnúť podporu HSTS.

PS: Zdrojáky nájdete na github.com/webelement/webelement.sk.