NetlifyでホスティングするHugoのMinify

当サイトではアフィリエイト広告を利用しています

NetlifyでホスティングするHugoの生成Html・CSSのMinifyを行います。



既にローカルでgulpを用いてMinifyを行う方法は以前の記事で記述しましたので、この設定を用いてNetlifyでも設定を行います。

ホスティング環境

当ブログでは、Hugoで生成するファイルをNetlifyを用いてホスティングしています。

独自ドメインでも無料でHTTPS対応かつ、CDNを用いた高速アクセスなどの機能は素晴らしいものがあります。

デプロイの流れ

当ブログのデプロイの流れは次のようになっています。

1. Hugoで記事を記述
2. Gitでコミット
3. リポジトリにプッシュ
4. Netlifyが自動でHugoのビルド
5. Netlifyで公開

このビルド時に同時にMinifyを行おうというのが今回の記事の目的となります。

gulpfile.jsの記述

さて、Netlifyではgulpも標準で用意されているため、Minifyはgulpfile.jsの設定とビルドコマンドを変更するだけで簡単に行えます。

今回は次のようなgulpfile.jsをhugoのルートディレクトリに用意しました。

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename')

var paths = "public/**/*.html"
var css_path = "layouts/partials/*.css"
var css_min_path = "layouts/partials"

gulp.task('minify-css', () => {
  return gulp.src(css_path)
    .pipe(cleanCSS({}))
    .pipe(rename({extname: '.min.css'}))
    .pipe(gulp.dest(css_min_path))
});

gulp.task('minify-html', () => {
  return gulp.src(paths)
    .pipe(htmlmin({
      collapseWhitespace: true,
      caseSensitive: true,
      preserveLineBreaks: true,
      minifyJS: true}))
    .pipe(gulp.dest('public'));
});

gulp.task('default', ['minify-html'], function () {
});

Netlifyのビルド設定

gulpの設定ファイルの用意が終わったので、Netlifyのビルド設定を行います。

なお、ビルドコマンドの設定は、MinifyしたCSSをGit管理の対象下に置いているかどうかで内容を変える必要があります。

1. Site Settingより、Build&Deployを選択
2. Deploy settingよりEdit Settingを選択
3. build commandを変更
   • minifyしたCSSを管理: hugo && gulp minify-html
   • 管理してない: gulp minify-css && hugo && gulp minify-html

この設定後、DeployよりTrigger deployを選択して再ビルドします。 これで無事にminifyされていることが確認できました。

まとめ

今回の記事ではHugoをNetlifyでホスティングする際に、html, CSS, JavascriptのMinifyを行う設定を記述しました。