Hugo で TypeSctipt を利用する方法

TypeScript
目次

Hugo の記事で TypeSctipt を利用する方法を記載します。

こちらの記事 でアプリを確認できます。

インストール

Hugo のルートディレクトリに移動して、新しい Node.js プロジェクトを作成するための初期設定を行います。

cd /path/to/your-directory
npm init -y

react と react-dom をインストールします。

npm install --save react react-dom

styled-components と styled-components の型定義をインストールします。

npm install styled-components
npm install @types/styled-components

ディレクトリ構造

  1. /assets ディレクトリ以下にスクリプトを配置します
  2. /content ディレクトリ以下に npmパッケージを利用する記事を配置します
  3. 各々のディレクトリの階層構造は同じにしておきます ( /app/sample )
/path/to/your-directory
├─assets
│  └─app
│     └─sample
│        ├─App.tsx         # 追加するファイル
│        ├─index.ts        # 追加するファイル
│        └─tsconfig.json   # 追加するファイル
├─content
│  └─app
│     └─sample
│        └─sample.md       # npm パッケージを利用する記事
├─layouts
│  └─_default
│     └─single.html        # 変更するファイル

スクリプト

App.tsx は 別の記事 に記載します。

// './App' から render 関数をインポート
import { render } from './App'

// DOMContentLoaded イベントが発生したときに実行されるイベントリスナーを追加
window.addEventListener('DOMContentLoaded', () => {
  // IDが 'App1' の要素を取得し、その要素に対して render 関数を実行
  render(document.getElementById('App1'))
})


{
	"compilerOptions": {
		"baseUrl": ".",
		"module": "ES6",
		"moduleResolution": "Node",
		"target": "ES6",
		"lib": [
			"ES6",
			"DOM"
		],
		"jsx": "react-jsx"
	}
}

レイアウト

single.html に下記のコードを追記します。

<head>
    {{- with resources.Get (path.Join .Page.File.Dir "index.ts") -}}
        <!-- 
            現在のページのディレクトリ内にある 'index.ts' ファイルを取得します。
            もしファイルが存在すれば、次の処理に進みます。
        -->
        {{- with . | js.Build (dict "minify" true "target" "es6") | fingerprint -}}
            <!-- 
                取得した TypeScript ファイルをビルドします。
                オプションとして、minify ( 最小化 ) と target ( ターゲットESバージョンES6 ) を指定します。
                ビルド後にファイルにフィンガープリント ( キャッシュバスティングのためのハッシュ ) を付与します。
            -->
            <script src="{{ .Permalink | relURL }}" defer></script>
            <!-- 
                ビルドおよびフィンガープリントされたファイルの URL を取得し、
                <script> タグの src 属性に設定します。
                defer 属性を付与して、ページの解析が完了するまでスクリプトの実行を遅らせます。
            -->
        {{- end -}}
    {{- end -}}
</head>

コンテンツ

npm パッケージを利用する記事に下記のコードを記述します。

<div id="App1"></div>

参考

Hugoでnpmパッケージを利用する
Styled-componentsとは？その概要と基本的な特徴を徹底解説