Hugoからtypescriptとtailwindを使う
こんにちは。 リケイのオコジョです。
Apple関連、Web開発やSaaSの情報を発信しています。
はじめに
HugoでESBuildやPostCSSが簡単に使えるようになりました。
今回はHugoからtypescriptとtailwind cssを使う方法をまとめます。
Hugoで新しいsiteを作成する
hugoコマンドでexample-siteという名前のサイトを作成し開発サーバーを立ち上げます。
$ hugo new site example-site
$ cd example-site
$ hugo server -D -w --ignoreCache --noHTTPCache
Hugo で typescript を使う
Hugo v0.78.0くらいからESBuildというgoで書かれたbundlerが組み込まれました。
この機能をPipeとして利用することで、単純な処理であればwebpackなしにtypescriptを利用することができます。
layouts/partials/head.htmlあたりの<head>に以下のように書きます。
<head>
...
{{ with resources.Get "js/index.ts" }}
{{ $js := resources.Get . | js.Build }}
<script src="{{ $js.Permalink }}" ></script>
{{ end }}
...
</head>
assets/jsフォルダを作成しtypescriptのファイルを作成します。
$ mkdir -p assets/js
$ touch assets/js/index.ts
index.tsは以下のようにconsole logに挨拶してもらいます。
console.log('Hello Typescript with Hugo!');
Hugoからtypescriptを使うことができました。
Hugo で tailwind css を使う
Hugoからtailwindを使ってみましょう。
tailwind css のインストール
tailwindのドキュメントに沿ってtailwindcssをnpmでインストールします。
またtailwindにはformとtypographyを扱うライブラリがあるので個人の好みとして入れておきます。
$ npm init -y
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
$ npm install -D postcss-cli@latest # Hugoのエラーメッセージで`postcss-cli`をインストールするよう言われる
$ npm install -D @tailwindcss/forms
$ npm install -D @tailwindcss/typography
Hugo から tailwind css を読み込む
Tailwind CSSをPostCSS pluginとして読み込みます。
postcss.config.jsからtailwindcssとautoprefixerをpluginとしてexportします。
let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';
const tailwind = require('tailwindcss')(tailwindConfig);
const autoprefixer = require('autoprefixer');
module.exports = {
plugins: [tailwind, ...(process.env.HUGO_ENVIRONMENT === 'production' ? [ autoprefixer ] : [ autoprefixer ]) ]
};
tailwind.config.jsという名前でtailwindのconfigファイルを作成します。
ここで@tailwindcss/formsと@tailwindcss/typographyを読み込むことになります。
const forms = require('@tailwindcss/forms');
const typography = require('@tailwindcss/typography');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./layouts/**/*.html', './content/**/*.md'],
safelist: [/type/],
theme: {
extend: {},
},
plugins: [forms, typography],
}
layouts/partials/head.htmlあたりの<head>に以下のように書きます。
{{ $options := dict "inlineImports" true }}
{{ $style := resources.Get "css/main.scss" | resources.ToCSS | resources.PostCSS $options }}
{{ if hugo.IsProduction }}
{{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
{{ end }}
<link href="{{ $style.RelPermalink }}" rel="stylesheet" />
assets/cssフォルダを作成しscssのファイルを作成します。
$ mkdir -p assets/css
$ touch assets/css/main.scss
main.scssは以下のようにtailwindを読み込みます。
@tailwind base;
@tailwind components;
@tailwind utilities;
これでHugoでtailwind cssを使うことができるようになりました。
htmlにtailwindのクラス名をつけてみてください。
まとめ
Hugoでtypescriptとtailwind cssを使う方法をまとめました。
次回はnetlifyの機能をまとめてみようと思います。
もしよければフォローしてください！
参考
Discussion