mainvisual

このサイトを立ち上げてから、7ヶ月ほどがたちました。開設日は2016/5/24。

実は、これまで3回サイトのデザインを大規模リニューアルをしました。 デザインは、主に他のサイトを大いに参考して、自分でバランスや色を考えながら 程よいやバランスでメソッドを取り込んで作り上げています。 昔のはとてもシンプルで、今とはだいぶ違いますね。

この記事を見てくれた人は、Hugoでテーマを自分で自作したい! 又は、そのようなことに興味があったりするのではないでしょうか?

テーマを作るために具体的なコードの書き方を知る必要があります。 しかし、それでは効率的に最速でテーマを作ることは出来ません。 最速でテーマを作るためには、流れにそらなければならないと思います。 テーマを効率的に素早く作る方法を初めから知っておくことで、 かなり早くテーマ開発が出来るのではないかと考えています。

この記事では、自分でテーマを作る流れをこのテーマを作った歴史となぞらえて 伝えられればと思います。

この記事の見方

まずは、このテーマが出来るまでの軌跡を伝えられればと思います。

この章は、自分が今までどのような軌跡を辿ってテーマを作ったかを自分自身がわかるようにする目的もありますが、 見ている人にとっては、テーマを作る上での1つの方法と方法として見てくれればと思います。

このテーマが出来るまでの軌跡

このサイトのテーマは自分が1から作り上げたものではありません。 あるベーステーマがあって、その気に入らないところをリライトしていきました。

テーマを1から作ってももちろんいいと思います。 でも、それにはgolangのテンプレートやHugo独自の関数などの概要を覚えたりと、 することがたくさんあります。そのため、Hugo初心者が初めからテーマを作ろうとすると、 調べる時間に大きなコストをかけることになります。

ベーステーマを採用することで、サイトをビルドするのに必要なエッセンスや、 Hugoの習慣、書き方などを同時に学ぶことも出来るし、 自分のテーマに簡単に取り込むことが出来、 非常に効率的に作業を進めることが出来ます。

自分の場合、このテーマをベースとして採用しました。 今後の説明もこのテーマを前提にして話をしていきます。

Githubはこちらです。「https://github.com/halogenica/beautifulhugo

Beautiful Hugo ~ A port of Beautiful Jekyll theme

http://themes.gohugo.io/beautifulhugo/

採用基準は、「ソースコードが複雑過ぎないこと」。 そして、「自分が理解できそうな感じである」ことです。 これは、非常に重要です。

見た目基準で自分の理解出来ないソースコードを選んでも、 自分の思い通りなカスタマイズが出来ません。出来たとしても、コードのスパゲッティ化は避けられないと思います。 そのため、必ず自分のレベルに見合ったベーステーマを選択して下さい。

サイト開設初期のテーマ

ベーステーマを手に入れたら

ベーステーマが決まったら、テーマをカスタマイズするために、 幾つかプラグインやツールを導入しましょう。

ライブラリ系

まずはじめに、ライブラリ系の導入を行います。 今回は以下のライブラリを使用します。 cdnjsというサービスを利用して、外部からライブラリを取り込むように設定しましょう。

  • normalize.css
  • Google Free Font(Open Sans)
  • jQuery
  • Bootstrap

先程紹介したテーマの場合、layouts/partials/head.htmlに追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

ビルドツール系

ビルド系ツールには、

  • Gulp
  • Gulp Sass

の2つを導入します。

$ npm init
$ npm install --save-dev gulp gulp-sass
var gulp   = require('gulp');
var sass   = require("gulp-sass");


gulp.task("sass", function() {
  return gulp.src("./assets/sass/**/*.scss")
    .pipe(sass({
      includePaths: ['./assets/sass'],
      errLogToConsole: true,
      outputStyle: 'compressed'
    }))
    .pipe(gulp.dest("./static/assets/css"));
});


gulp.task('watch', ['sass'], function(){
  gulp.watch('./assets/sass/**/*.scss', ['sass']);
});


gulp.task('build', ['sass']);
gulp.task('default', ['watch']);

CSSのクラス名付規則の決定

HTMLテンプレートパーツ、フォルダ構造の決定

comments powered by Disqus