
Nuxt.jsで静的サイトを作成する処理を実行したら、計算途中でメモリが不足してエラーとなり止まってしまった。
ヒープ領域を確保して処理を通します。

参考： https://qiita.com/nakamto/items/8ed18f9f0d980fd70be1

## 環境

- CentOS Linux 7
- node v14.15.3
- yarn 1.22.10

## エラー

```bash
$ yarn generate

(省略)


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa04200 node::Abort() [/usr/local/bin/node]
 2: 0x94e4e9 node::FatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0xb7860e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0xb78987 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0xd33215  [/usr/local/bin/node]
 6: 0xd33d9f  [/usr/local/bin/node]
 7: 0xd41e2b v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 8: 0xd459ec v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
 9: 0xd0b2f2 v8::internal::Factory::AllocateRaw(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0xd05174 v8::internal::FactoryBase<v8::internal::Factory>::AllocateRawWithImmortalMap(int, v8::internal::AllocationType, v8::internal::Map, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0xd074c1 v8::internal::FactoryBase<v8::internal::Factory>::NewRawTwoByteString(int, v8::internal::AllocationType) [/usr/local/bin/node]
12: 0x1097b49 v8::internal::Runtime_StringBuilderConcat(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
13: 0x1400039  [/usr/local/bin/node]
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

## 解決方法

処理を実行する前に`NODE_OPTIONS`の`max-old-space-size`を設定します。

```bash
$ export NODE_OPTIONS="--max-old-space-size=2048"
```

数値の単位はメガバイトです。
2048MBは2GBです。

V8ヒープの使用量がヒープ制限に近づいたとき、V8ヒープスナップショットをディスクに書き込み領域を確保します。

NODE_OPTIONSについて: 
https://nodejs.org/api/cli.html#cli_max_old_space_size_size_in_megabytes


【Node.js】yarn generateでヒープ領域が不足してエラーになったのでヒープ領域の設定を変更して処理を実行した


静的サイトジェネレーター（SSG）で作ったサイトをGitHub Actionsを使ってサーバに公開するところまでの手順をまとめます。
2~3年目の自分向けに詳細に書いてます。

![nuxt-hosting](/images/posts/260/nuxt-hosting.png)
▲ 構成の全体図。masterを更新したらGitHub actionsでビルドしてさくらのVPSにデプロイします。GitHub actionsからサーバへはrsyncで接続しているため、サーバにNodeがなくてもOK。サーバではNginxとLet's Encriptを利用して配信してます。

以上の構成を建てるところまで順に紹介していきます。

[Nuxtjs](https://ja.nuxtjs.org/)で作りましたが、[Next](https://nextjs.org/)や[Gatsby](https://www.gatsbyjs.com/)などのSSG、SPAも同様にデプロイできます。

また、サーバも[さくらのVPS](https://vps.sakura.ad.jp/)でなくEC2や他のサーバも大丈夫です。

初のCIなので不備があるかもしれません。ご指摘頂けるとありがたいです。

## Table of Contents

## デプロイするアプリの概要

今回は[Nuxt/content](https://content.nuxtjs.org/ja/)で作ったサイトをデプロイします。

- 完成品: <https://nuxt-content-sample.suzu6.net/>
- コード: [GitHub](https://github.com/suzu6/nuxt-content-sample)

デプロイで必要な実行するコマンド。

1. `yarn install`: 必要なnode_modulesを追加する。
2. `yarn lint`: Lintをチェック。
3. `yarn test`: Jetでユニットテスト。
4. `yarn generate`: 静的サイトを生成する。

yarnを利用している。`./dist`ディレクトリに生成されるので、これをサーバにアップロードする必要がある。また、`GENERATED_BY`という環境変数をトップページで使います。

サイトの作り方は[nuxt/contentでブログを作る](https://www.suzu6.net/posts/264-nuxt-content/)で紹介してます。

## rsync出来るようにサーバを設定する

GitHub actionsで生成したサイトをサーバに設置するのにrsyncを使います
（GitHub actionsのワークフローでmarketplaceの[ssh-deploy](https://github.com/marketplace/actions/ssh-deploy)を利用しており、その中でrsyncを利用している）。そのため、外部からrsync出来るようにサーバを設定します。SSHには公開鍵認証を利用します。

今回、さくらのVPSにCentOS7を建ててホスティングします。
5つの手順でrsync出来るところまでサーバをたてます。

1. さくらのVPSでCentOS 7を建てる
2. rsync用のユーザを追加
3. 公開鍵の作成と登録をする
4. sshd_configの設定
5. SSHのポート番号の変更

サーバにデプロイする設定までです。
別の記事でNginxとLet's Encriptの設定をします。

### 1. さくらのVPSでCentOS 7を建てる

さくらのVPSの概要は公式の[入門講座](https://vps.sakura.ad.jp/)を参照してください。
[ネコでもわかる！さくらのVPS講座 ～第二回「サーバーをさわってみよう！」](https://knowledge.sakura.ad.jp/8218/)で契約からSSH接続まで紹介されてます。

作成したユーザでSSHのパスワード接続が出来ていていればOK。
もしくはこれからの手順でユーザが追加できる。

### 2. rsync用のユーザを追加

rsync用のユーザを作成する。
ユーザグループとパスワードはsudo実行のために付けたが、設定が終われば外してよさそう。

```bash
## ユーザ追加
# useradd rsync_user
## ユーザグループに追加
# gpasswd -a rsync_user wheel
## パスワード設定
# passwd $user
```

`visudo`でrsyncするときroot権限で実行できるように設定する

```sh
# visudo

rsync_user ALL=(ALL) NOPASSWD:/usr/bin/rsync
```

※ 公開先のディレクトリのパーミッションをちゃんと設定すれば、root権限渡さなくても良いかも。

### 3. 公開鍵の作成と登録をする

rsync_userの公開鍵を作成します。

```bash
$ sudo su rsync_user
$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

# 次の二つが出来る。
# /home/rsync_user/.ssh/id_rsa
# /home/rsync_user/.ssh/id_rsa.pub　
```

[ssh-deploy](https://github.com/marketplace/actions/ssh-deploy)が対応していないため、パスフレーズは設定しない。
`id_rsa.pub`をこのユーザの公開鍵として、`id_rsa`がGitHub actionsに登録する秘密鍵とします。ローカルで鍵を作った方は適宜読み替えてください。

rsync_userの公開鍵を登録します。

```bash
# authorized_keysを作成
$ cd /home/rsync_user/.ssh/
$ cp id_rsa.pub authorized_keys

# 権限を変更
$ sudo chmod 700 /home/rsync_user/.ssh
$ sudo chmod 600 /home/rsync_user/.ssh/authorized_keys
```

`authorized_keys`が既に登録済みの場合は、末尾に公開鍵を追加する。
`.ssh`ディレクトリと`authorized_keys`の権限をそれぞれ`700`と`600`にする。

ここまでで、ssh接続ができるようになっているはず。

```bash
# サーバの中から
$ ssh rsync_user@localhost -i /home/rsync_user/.ssh/id_rsa

# ローカルのPCから
> ssh rsync_user@{サーバのIP・ホスト名} -i path/to/id_rsa
```

接続出来ない場合は`authorized_keys`の権限と`sshd`を確認する。
サーバの中からできて外部から出来ない場合は、さくらのVPSの場合[パケットフィルタ](https://manual.sakura.ad.jp/vps/network/packetfilter.html)のポートとIPを確認する。

参考: [お前らのSSH Keysの作り方は間違っている](https://qiita.com/suthio/items/2760e4cff0e185fe2db9#%E6%96%B0%E3%81%97%E3%81%84ssh-key%E3%81%AE%E4%BD%9C%E6%88%90)

```bash
rsync -avz rsync://rsync_user1@10.0.1.108/tmp /var/www/test
```

### 4. sshd_configを設定する

セキュリティを高めるための設定です。
rsyncに直接関係ないので後からでもよい。

まず、sshd_configをバックアップはしておく。消しちゃったら建て直せばいい。

```bash
cd /etc/ssh
sudo cp sshd_config sshd_config.org
```

`sshd_config`を編集する。

```bash
$ sudo vi sshd_config

PermitRootLogin no
PasswordAuthentication no
AuthorizedKeysFile      .ssh/authorized_key
```

`PermitRootLogin no` はrootユーザでのログインを拒絶する。
`PasswordAuthentication no`はパスワードでのログインを拒絶する。
どちらもセキュリティを高めるための設定です。
`AuthorizedKeysFile .ssh/authorized_key`は公開鍵のパスを指定している。デフォルトで変更の必要ないはず。

sshdの設定を更新する。

```bash
$ sudo systemctl restart sshd
$ sudo systemctl status sshd
* sshd.service - OpenSSH server daemon
   Loaded: loaded (/usr/lib/systemd/system/sshd.service; enabled; vendor preset: enabled)
   Active: active (running) since Tue 2020-12-22 22:27:56 JST; 1 day 1h ago
     Docs: man:sshd(8)
           man:sshd_config(5)
 Main PID: 20149 (sshd)
   CGroup: /system.slice/sshd.service
           `-20149 /usr/sbin/sshd -D
```

参考: [ネコでもわかる！さくらのVPS講座 ～第二回「サーバーをさわってみよう！」](https://knowledge.sakura.ad.jp/8218/)

### 5. SSHのポート番号の変更

SSHのポートを2022に変更してみる。

```bash
$ sudo vi sshd_config
Port 2022
```

sshdの設定を更新する。

```bash
sudo systemctl restart sshd
```

ポートの変更では`firewalld`のsshの設定も変更します。

```bash
$ cd /usr/lib/firewalld/services/
# コピーする
$ sudo cp ssh.xml ssh.xml.org

# firewallの設定を変更する
$ vi /usr/lib/firewalld/services/ssh.xml
22 -> 1022
```

ポートを変更したら`firewalld`を再起動する。

```bash
$ sudo systemctl restart firewalld.service
success

$ sudo systemctl status firewalld.service
* firewalld.service - firewalld - dynamic firewall daemon
   Loaded: loaded (/usr/lib/systemd/system/firewalld.service; enabled; vendor preset: enabled)   Active: active (running) since Mon 2020-12-21 22:41:40 JST; 2 days ago
     Docs: man:firewalld(1)
```

ここまでで、22での接続が出来ず、2022での接続が確認できる。

```bash
# サーバの中から
$ ssh rsync_user@localhost -p 2022 -i /home/rsync_user/.ssh/id_rsa

# ローカルのPCから
> ssh rsync_user@{サーバのIP・ホスト名} -p 2022 -i path/to/id_rsa
```

参考: [CentOS 7 firewalld よく使うコマンド](https://qiita.com/kenjjiijjii/items/1057af2dddc34022b09e)

さくらのVPSの場合はパケットフィルタの設定も行う。

- カスタムTCP
- ポート: 2022
- すべて許可する

[Sakura VPS Docs パケットフィルタ](https://manual.sakura.ad.jp/vps/network/packetfilter.html)

## GitHub actions

[GitHub actions](https://github.co.jp/features/actions)のワークフローの設定と環境変数を設定します。

### ワークフローの設定

generateまではNuxt.jsのプロジェクトを作成したときに出来たワークフローです。
サーバへデプロイするところは、マーケットプレイスの[ssh-deploy](https://github.com/marketplace/actions/ssh-deploy)を利用しています。

[nuxt-content-sample/.github/workflows/ci.yml](https://github.com/suzu6/nuxt-content-sample/blob/master/.github/workflows/ci.yml)に全文があります。

理解したことをブロック単位で説明を添えてみます。

```yml:ci.yml
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
```

▲ トリガーとなる動作。masterへのプッシュとプルリクエストでCIが動き出す。ブランチごとにテスト用とか分けられる。

ワークフローの確認には手動で実行できる[workflow_dispatch](https://docs.github.com/ja/free-pro-team@latest/actions/reference/events-that-trigger-workflows#workflow_dispatch)もあるるようです。

```yml
jobs:
  ci:
    runs-on: ${{ matrix.os }}

    strategy:
      matrix:
        os: [ubuntu-latest]
        node: [14]
```

▲ ここからワークフローのジョブを定義する。`runs-on`で動作する環境を選ぶ。`Ubuntu`の最新版で`Node v14`の環境でビルドします。

```yml
    steps:
      - name: Checkout 🛎
        uses: actions/checkout@master
```

▲ リポジトリからチェックアウト。

```yml
      - name: Setup node env 🏗
        uses: actions/setup-node@v2.1.2
        with:
          node-version: ${{ matrix.node }}
```

▲ Nodeのバージョンを定義する。`strategy`でセットしたパラメータが使える。

```yml
      - name: Get yarn cache directory path 🛠
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Cache node_modules 📦
        uses: actions/cache@v2
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - name: Install dependencies 👨🏻‍💻
        run: yarn
```

▲ node-modulesのキャッシュを定義して、yarnでインストールする。
キャッシュがあると次回のビルドでnode-modulesのインストール時間を軽減できる。
初心者にこの設定を組むのは厳しいので、Nuxt.jsのプリセットが有って助かった！

```yml
      - name: Run linter 👀
        run: yarn lint

      - name: Run tests 🧪
        run: yarn test

      - name: Run generate
        run: yarn generate
```

▲ lintとテストとビルドを実行している。
lintとテストでエラーが出た場合はちゃんとワークフローも止まります。
ちゃんとプッシュする前に確認する習慣がつきそう。

```yml
      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@v2.1.5
        env:
            SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
            ARGS: "-rltgoDzvO --delete"
            SOURCE: "dist/"
            REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
            REMOTE_USER: ${{ secrets.REMOTE_USER }}
            REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
            TARGET: ${{ secrets.REMOTE_TARGET }}

```

▲ サーバへデプロイする[ssh-deploy](https://github.com/marketplace/actions/ssh-deploy)の処理です。
generateで生成した`./dist`ディレクトリ以下を`secrets.REMOTE_TARGET`に置きます。
サーバの`secrets.REMOTE_TARGET`のパスからNginxがホスティングしている。
`rsync`のコマンドを自由度高めに設定できる。

`secrets`はリポジトリで設定した環境変数です。${{ secrets.REMOTE_HOST }}`のようにして使えます。

<https://github.com/marketplace/actions/ssh-deploy>

- [GitHubの新機能「GitHub Actions」で試すCI/CD](https://knowledge.sakura.ad.jp/23478/)

### 環境変数を設定

ワークフローの中で利用できる環境変数は、リポジトリの`Setting`　→ `Secrets`　→ `New repository secret`から追加できる。

![secret](/images/posts/260/secret.png)

ワークフローでは${{ secrets.REMOTE_HOST }}`のように使える。

どうも`Environment secrets`と`Repository secrets`があって使い分け出来る。
`Repository secrets`の方が暗号化されていて個人ではリポジトリのオーナーだけ見られるようです。

[暗号化されたシークレット](https://docs.github.com/ja/free-pro-team@latest/actions/reference/encrypted-secrets)

## おわりに

以上でさくらのVPSにNuxt.jsの静的サイトをデプロイまでの手順を紹介しました。

１記事にまとめましたがかなり手順があって大変です。前回[NetlifyからVercelへの移行を検討した話](https://www.suzu6.net/)という話を書いた。Netlifyが遅い点をディスったが、Netlifyの無料で手軽にデプロイできるのは凄いことだなと改めて感じた。

マルチドメインで使えるようなNginxのバーチャルホストの設定や、Let’s EncriptでのSSL対応もしたのでこちらも記事にします。

とうとう自分のサーバを契約してブログだけでは持て余してしまう。
アプリを作りたいが、リソース管理やセキュリティの方面も学んでいきたい。
来年は使い倒していく。


GitHub Actionsで静的サイトジェネレーターをサーバにデプロイする

個人の技術ブログを作り直しました（３回目）


前回作ったブログでサイトマップを作ります。
generateで静的ページを作って公開する予定です。



## Table of Contents

## セットアップ

[@nuxtjs/sitemap](https://www.npmjs.com/package/@nuxtjs/sitemap)を使います。

```sh
$ yarn add @nuxtjs/sitemap
```
`nuxt.config.js`の`modules`に`'@nuxtjs/sitemap'`を追加します。
すべてのルートが確実にキャッチされるように、インクルードした他のモジュールの後で実行する必要があります。

```js:nuxt.config.js
export default {
  modules: [
    '@nuxt/content',
    '@nuxtjs/sitemap'
  ],
}
```

次に、サイトマップ構成のデフォルトをいくつか追加します—を追加hostnameして空の関数を設定します。この関数は、後でコンテンツのパスを取得して返すために使用します。
```js:nuxt.config.js
export default {

  sitemap: {
    hostname: process.env.BASE_URL || 'https://www.suzu6.net/', 
    routes: async () => {} // routesにURLを渡す
  },

}
```

`routes: ['path/article1', 'path/article1']`のように配列を渡すとサイトマップを作ってくれます。
これから、この配列を網羅的に作っていく。


ドメイン名だけだと`TypeError [ERR_INVALID_URL]: Invalid URL: www.suzu6.net\`が出る。
URLの形式じゃないとエラーが出るのは良いね。
httpから書きます。


## URLのリストを作成する

routesにサイトマップの配列を渡します。
@nuxt/contentでは以下のコードで`content/posts/*.md`のパスを渡します。

```js:nuxt.config.js
routes: async () => {
  const { $content } = require('@nuxt/content')

  const posts = await $content('posts')
    .only(['path'])
    .fetch()

  return posts.map((p) => p.path)
}
```

上記の設定で`yarn run generate`で同時にsitemap.xmlが作られるようになります。

```xml:dist/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
	<url>
		<loc>
			https://www.suzu6.net/posts/102-katex-math-functions
		</loc>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/14
		</loc>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/10
		</loc>
	</url>
  ...
```

## サイトマップにパス以外の情報を渡す。

```js
routes: [
  '/page/1',
  '/page/2',
  {
    url: '/page/3',
    changefreq: 'daily',
    priority: 1,
    lastmod: '2017-06-30T13:30:00.000Z'
  }
]
```

```js:nuxt.config.js

  sitemap: {
    hostname: process.env.BASE_URL || 'https://www.suzu6.net/',
    routes: async () => {
      let array = [
        {
          // トップページ
          url: '/',
          changefreq: 'daily',
          priority: 1,
          lastmod: new Date()
        }
      ];
      // コンテンツ
      const { $content } = require('@nuxt/content')
      const posts = await $content('posts')
        .only(['path', 'updated_at'])
        .fetch()
      array = array.concat(
        posts.map((p) => 
          { 
            return {
              url: p.path, 
              lastmod: p.updated_at,
              priority: 1,
            }
          })
      )
      return array
    }
  },
```



```xml:sitemap.xml
	<url>
		<loc>
			https://www.suzu6.net/
		</loc>
		<lastmod>
			2020-12-16T09:50:32.366Z
		</lastmod>
		<changefreq>
			daily
		</changefreq>
		<priority>
			1.0
		</priority>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/1
		</loc>
		<lastmod>
			2019-01-04T00:00:00.000Z
		</lastmod>
		<priority>
			1.0
		</priority>
	</url>
```



- [Generating Sitemap Entries For Nuxt Content](https://medium.com/javascript-in-plain-english/generating-sitemap-entries-for-nuxt-content-f7eb7b5fdb3b)

nuxt/contentでサイトマップを作る

nuxt/contentで作ったサイトに絵文字や数式のプラグインを追加して、マークダウンの書式を拡張します。
nuxt/contentを使っていなくても、remarkのプラグイン選びの参考にはなるかと思います。

## Table of Contents

## マークダウンのプラグイン
[markdown - @nuxt/contet](https://content.nuxtjs.org/configuration#markdown)

@nuxt/contentでは[remark](https://www.npmjs.com/package/remark)というプラグインでマークダウンの構文を解析しています。
HTMLへのパースは[remark-html](https://github.com/remarkjs/remark-html)を使ったりと、マークダウンを拡張する`remark-*`の豊富なエコシステムがあります。
目的に応じて役割ごとに細かなプラグインを組み合わせて扱うことができる。

`yarn` または `npm` でプラグインをインストールして**nuxt.config.js**に追加するだけで利用できます。
下はここで使っている絵文字や数式（$\KaTeX$）のプラグインを追加したところです。
コードを書かなくてよいので管理しやすい。

```js:nuxt.config.js
export default {
  // Content module configuration (https://go.nuxtjs.dev/config-content)
  content: {
    markdown: {
      remarkPlugins: [
        'remark-emoji',
        'remark-math',
        'remark-toc',
        'remark-footnotes',
        'remark-code-titles'
      ],
      rehypePlugins: [
        'rehype-katex'
      ]
    }
  },
}
```
２つのpuluginがあります。
`remark`はMarkdownの構文を解析するプロセッサで、`rehype`がHTMLを構築するプロセッサです。
例えば、`remark-math`がMarkdownの構造を解析して`rehype-katex`が$\KaTeX$に対応するHTMLに変換している。
`remark-emoji`のように単体で両方こなすものもある。

remarkについて読み応えのある熱い記事を見つけたので載せておきます。独自のParserの拡張の仕方も載ってます。
- [Remark で広げる Markdown の世界](https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol2/spring-raining/index.html)

---

以下からremarkの拡張プラグインを紹介していきます。
利用できる公式オススメのプラグインは[awesome-remark](https://github.com/remarkjs/awesome-remark)にまとまってます。  

## 絵文字

[remark-emoji](https://github.com/rhysd/remark-emoji)

```sh
# インストール
$ yarn add remark-emoji
```
**nuxt.config.js**の`content.markdown.remarkPlugins`に`remark-emoji`を追加する。
これでパースできるようになっています。

マークダウンの中の対応する文字を絵文字に変換してくれます。
```txt:入力
Emojis in this text will be replaced: :dog: :+1:

Toilet Time
:toilet: = 2 Minutes
:toilet: + :iphone: = 5 Minutes
:toilet: + :iphone: + ⁣:signal_strength: = 10 Minutes
:toilet: + :iphone: + :signal_strength: + :battery: = Infinite 
```

▼**出力結果**（引用符で囲ってます）
> 
> Emojis in this text will be replaced: :dog: :+1:
> 
> 
> Toilet Time  
> :toilet: = 2 Minutes  
> :toilet: + :iphone: = 5 Minutes  
> :toilet: + :iphone: + ⁣:signal_strength: = 10 Minutes  
> :toilet: + :iphone: + :signal_strength: + :battery: = Infinite   

[EMOJI CHEAT SHEET](https://www.webfx.com/tools/emoji-cheat-sheet/)の絵文字のコードは使えるはずです。

## 数式

数式に対応する`remarkPlugins`が[remark-math](https://github.com/remarkjs/remark-math)です。
数式を$$で囲うか、文中の場合は$で囲います。


対応する`rehype`には$\KaTeX$と**MathJax**があります。
- [rehype-katex](https://github.com/remarkjs/remark-math/blob/main/packages/rehype-katex)
- [rehype-mathjax](https://github.com/remarkjs/remark-math/blob/main/packages/rehype-mathjax)

どちらもLaTeXですが、HTMLの描画方法が少し違います。
個人的には描画速度が早くてKaTeXを選んでます。

```sh
# インストール
$ yarn add remark-emoji
```
**nuxt.config.js**の`content.markdown.remarkPlugins`に`remark-math`を、`rehypePlugins`に`rehype-katex`を追加する。
そして、表示のために$\KaTeX$のスタイルシートも当てます。
```js
export default {
    link: [
      // Add style sheet
      {
        rel: 'stylesheet',
        href: 'https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.css'
      },
    ],
  },

  // Content module configuration (https://go.nuxtjs.dev/config-content)
  content: {
    markdown: {
      remarkPlugins: [
        'remark-math'
      ],
      rehypePlugins: [
        'rehype-katex'
      ]
    }
  },
}
```
マークダウンで数式を書いてみる。
```md
**オイラーの等式**
$$
e^{i\pi}+1= 0
$$
ネイピア数$e$、虚数$i$、円周率$\pi$と有名な定数に$0$と$1$がある全部入りの数式。

**正規分布（ガウス分布）**
$$
f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
$$
平均を$\mu$, 分散を$\sigma^2 \gt 0$とする正規分布とは、確率密度関数が次の形で与えられる確率密度関数。
```

▼**出力結果**  
> **オイラーの等式**
> $$
> e^{i\pi}+1= 0
> $$
> ネイピア数$e$、虚数$i$、円周率$\pi$と有名な定数に$0$と$1$がある全部入りの数式。
> 
> **正規分布（ガウス分布）**
> $$
> f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
> $$
> 平均を$\mu$, 分散を$\sigma^2 \gt 0$とする正規分布とは、確率密度関数が次の形で与えられる確率密度関数。

備考：[@nuxt/content で数式を表示する](https://blog.tunehira.net/posts/display-eqations-with-nuxt-content/)の記事と同様に、数式が表示されずはまりました。スタイルシートが足りなかったことが原因でした。


## 見出しの目次を作る

[remark-toc](https://github.com/remarkjs/remark-toc)

マークダウンの中で目次を出したいところに`## Table of Contents`を書くとその位置に目次が出ます。
見出し（#）が自動的に目次になる。

```txt
## Table of Contents
```
この記事の[Table of Contents](https://www.suzu6.net/posts/265-nuxt-content-remark/#table-of-contents)もこれを利用しています。

## 改行をHTMLに適用する

マークダウンでは末尾にスペース2個で改行となります（１行間を空けると別のpタグで囲まれる）。
ただ、それを知らないとテキストと表示がずれているように感じます。

```html
マークダウン
This is a
paragraph.
↓
HTML
<p>This is a
paragraph.</p>

```

[remark-breaks](https://github.com/remarkjs/remark-breaks)はマークダウンの改行をHTMLでも改行してくれます。

```html
マークダウン
This is a
paragraph.
↓
HTML
<p>This is a<br>
paragraph.</p>
```
マークダウンの原理主義でないなら直感的にわかりやすいと思う。

## コードブロックにタイトルをつける

Qiitaなどのブログではコードブロックにファイル名などの補足があります。
あれを実現するためのパーサーが[remark-code-titles](https://www.npmjs.com/package/remark-code-titles)です。

```sh
# インストール
$ yarn add remark-code-titles
```

```js:nuxt.config.jsに追加する
export default {
  …
  content: {
      remarkPlugins: [
        'remark-code-titles'
      ],
    }
  },
```

コードブロックの先頭に **```拡張子:コードブロックのタイトル** と書くとタイトルが
`<div class="remark-code-title">コードブロックのタイトル</div>`と決まったクラスの`<div>`に囲まれる。
そこにスタイルを当ててタイトルっぽくしてます。

````txt
```python:Hello.py
printf("Hello, World!");
return 0;
```
````
▼変換したHTML。
```html
<div data-v-f58a9f50="" class="remark-code-title">hello.c</div>

<div data-v-f58a9f50="" class="nuxt-content-highlight">
  <pre data-v-f58a9f50="" class="line-numbers language-c"><code data-v-f58a9f50=""><span data-v-f58a9f50="" class="token function">printf</span><span data-v-f58a9f50="" class="token punctuation">(</span><span data-v-f58a9f50="" class="token string">"Hello, World!"</span><span data-v-f58a9f50="" class="token punctuation">)</span><span data-v-f58a9f50="" class="token punctuation">;</span>
<span data-v-f58a9f50="" class="token keyword">return</span> <span data-v-f58a9f50="" class="token number">0</span><span data-v-f58a9f50="" class="token punctuation">;</span>
</code></pre>
</div>
```
▼コードブロックのCSSの例。公開すると位置がずれているけどCSSわからん。
```css
.remark-code-title {
    background: #d9d7e0;
    border-radius: 0px 0px 4px 4px;
    color: #3a3a3a;
    font-size: 0.75rem;
    letter-spacing: 0.075em;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    position: absolute;
    left: 1rem;
    text-align: right;
}
```

## 折り畳みを追加する

冗長な説明や長いコードブロックを折り畳むと、文章の流れを良くしつつ補足できる。
そんな折り畳み機能を追加するのが[remark-collapse](https://github.com/Rokt33r/remark-collapse)です。

```sh
$ yarn add remark-collapse
```

使い方
```txt
<details><summary>Open tango</summary>

target content

</details>
```
出力結果

<details><summary>Open tango</summary>

target content

</details>


## 脚注を作る

最高！これを探していました！

remark-footnotes[^1]を利用しています。
脚注はマークダウンのコンテンツの下部に作成されます。
文章の途中に脚注の補足を書いても下部に移動する。

星[^★]や日本語[^日本語]など数字以外の文字もいけるが、
対応する脚注は数字が自動で割り振られている。
そのため、自分で数字を合わせなければならない[^2]。

```md
文章中の脚注[^1]

[^1]: 脚注の補足

星[^★]や日本語[^日本語]など数字以外の文字もいけるが、
対応する脚注は数字が自動で割り振られている。

[^★]: 星マーク
[^日本語]: 日本語も大丈夫です。
```

ページの下部（パースしたコンテンツの最後）に脚注が出る。

[^1]: remark-footnotes: [https://github.com/remarkjs/remark-footnotes](https://github.com/remarkjs/remark-footnotes)

[^★]: 星マーク
[^日本語]: 日本語も大丈夫です。
[^2]: 自動で数字が割り振られる。ここは`[^2]`と書いている。

remarkでnuxt/contentのマークダウン書式を拡張する


[nuxt/content](https://content.nuxtjs.org/)といういい感じにブログを作成できるモジュールがあったので使ってみる。
このブログも`nuxt/content`を利用しています。

2021-04-24: 新しくブログ（Rustに入門してみた）を作ったのでその時の最新バージョンに更新しました。

## Table of Content

## nuxt/content

[nuxt/content](https://content.nuxtjs.org/ja/)は[Nuxtjs](https://ja.nuxtjs.org/)アプリケーションを拡張するモジュールです。
GitベースのヘッドレスCMSとして機能します。
`content/`ディレクトリに書き込んだMarkdown、JSON、YAML、XML、CSVファイルといったファイルをMongoDBのAPIような機能で扱えるようになります。

特徴
- 開発中の高速ホットリロード
- Markdownの中でのVueコンポーネント
- 全文検索
- `nuxt generate`で静的サイト生成をサポートする
- （MongoDBのような）強力なQueryBuilderAPI
- PrismJSを使用してマークダウンファイルのコードブロックを強調表示する構文。
- 目次の生成
- マークダウン、CSV、YAML、JSON（5）、XMLを処理します
- カスタムパーサーでの拡張（Latexや引用符など）

`/content`に書いたマークダウンがそのままコンテンツになります。
ホットリロードも対応しているため、ローカルでマークダウンを書きながらすぐに内容とスタイルを確認できます。

また、マークダウンの中に書いた変数でフィルタリングしたりページの構成に使えるようになります。
```txt:/content/path/to/articles.md
---
id: 264
title: nuxt/contentでブログを作る
created_at: 2020-12-12
updated_at: 2020-12-17
isDraft: false
tags: Nuxtjs,Vuejs,TypeScript,JavaScript
top_image: /icons/nuxt.svg
icon: /icons/nuxt.svg
---

## 本文

咳をしても一人
```

DBを使っていないのにかなり自由度が高い。

[Create a Blog with Nuxt Content](https://nuxtjs.org/blog/creating-blog-with-nuxt-content)を参考に作ってみます。

## 環境

- Node.js vv14.16.1
- npm 6.14.12
- yarn 1.22.5

構築後
- Nuxt:  ^2.14.6 
- @nuxt/content: ^1.11.1

## Nuxt.jsのインストール

公式の[インストール](https://ja.nuxtjs.org/docs/2.x/get-started/installation)をみてプロジェクトを作るところから進める。

アプリを作成したいパスで`yarn create nuxt-app <project-name>`を実行する。
`yarn`で進めます。`npm`と`npx`は公式をみておくれ。

```shell

> yarn create nuxt-app myblog

。。。

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in myblog

# プロジェクト名
? Project name: myblog

# ここでTypeScriptを選べる
? Programming language: 
  JavaScript
> TypeScript

# パッケージマネージャ
? Package manager: (Use arrow keys)
> Yarn
  Npm

# UIフレームワーク
? UI framework:  
  None
  Ant Design Vue 
  Bootstrap Vue  
  Buefy
> Bulma
  Chakra UI      
  Element        
  Framevuerk     
  iView
  Tachyons       
  Tailwind CSS   
  Vuesax
  Vuetify.js

# ここで@nuxt/contentをインストール出来る
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Axios
 ( ) Progressive Web App (PWA)
 (*) Content

# リントツール
? Linting tools:      
 (*) ESLint
>(*) Prettier
 ( ) Lint staged files
 ( ) StyleLint        
 ( ) Commitlint  

# テストツール
? Testing framework: 
  None
> Jest
  AVA
  WebdriverIO 

# レンダリングモード
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App

# デプロイターゲット
? Deployment target:
  Server (Node.js hosting)
> Static (Static/JAMStack hosting) 

? Development tools:
>(*) jsconfig.json (Recommended for VS Code if you're not using typescript)
 ( ) Semantic Pull Requests
 ( ) Dependabot (For auto-updating dependencies, GitHub only)

# CIツール
? Continuous integration:      
  None
> GitHub Actions (GitHub only) 

? What is your GitHub username? (suzuroku)
? Version control system: (Use arrow keys)
> Git
  None
```

`select`で選択する。
キーが効かないときはないときは日本語入力になってます。

プロジェクト作成時にTypeScriptの導入もしておくと楽です。
レンダリングモードとデプロイターゲットは`nuxt.config.js`の**target**で後から変更できます。

作成したディレクトリに移動して、アプリを立ち上げます。
```sh
$ cd myblog
$ yarn dev
```

##　静的サイトを作成する

```sh
# dist/ に静的サイトのページが作る
$ yarn run generate

# dist/ のページを確認する
$ yarn run start
```


## ページを追加する

`/posts/{記事}`となるようにページを追加します。
また、`/posts/`は一覧になるようにする。

```sh
├─content # マークダウンを置くところ。
|  ├─ about.md
│  └─posts
│     ├─post1.md
│     └─post2.md
├─pages # そのパスの処理
|  ├─_slug.vue
│  └─posts
│     ├─index.vue # /posts/ で一覧を表示する
│     └─_slug.vue # /posts/{_slug}　パスを引数にとる
```
### 記事のマークダウン
```txt:/content/posts/articles.md
---
title: nuxt/contentでブログを作る
created_at: 2020-12-12
tags: Nuxtjs,Vuejs,TypeScript,JavaScript
top_image: /icons/nuxt.svg
icon: /icons/nuxt.svg
---

## 本文

咳をしても一人
```
### 記事を表示するVueページ

CSSフレームワークの[bulma](https://bulma.io/)を利用しています。

```vue:/pages/_slug.vue
<template>
  <article class="article content section-article">
    // 記事のヘッダー部分の例
    <section class="header">
      <h1>{{ post.title }}</h1>
      <div class="media">
        <div class="media-left">
          <figure class="image is-48x48">
            <img :src="post.top_image" />
          </figure>
        </div>
        <div class="media-content">
          <div class="tags">
            <i class="mdi mdi-tag" />&nbsp;
            <span v-for="tag in post.tags.split(',')" :key="tag">
              <a :href="'/tags/' + tag" class="tag">{{ tag }}</a>
            </span>
          </div>
        </div>
        <div class="media-right">
          <i class="mdi mdi-update" />&nbsp;
          <time v-html="post.updated_at.split('T')[0]"></time>
        </div>
      </div>
    </section>
    // 記事の本文
    <NuxtContent :document="post" />
  </article>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  async asyncData({ $content, params }) {
    // URIから変数を取得 /posts/{_slug}
    const slug = params.slug
    return {
      // content/posts/{_slug}.mdのマークダウンを取得
      post: await $content('posts/' + slug).fetch()
    }
  },
})
</script>
```
TypeScriptのこの形になるまでかなり試行錯誤した。

## コンテンツの取得とクエリ

[@nuxt/contet コンテンツを取得する](https://content.nuxtjs.org/ja/fetching#wherequery)を参考に。

Contentはグローバルに $content` インスタンスを注入するので、`this.$content `を使えばどこからでもアクセスできる。


例
```ts
// クエリのイメージ
list = {
  [{ title: 'article1', tags: 'Nuxtjs,ブログ'}],
  [{ title: 'article2', tags: 'Python'}],
  [{ title: 'article3', tags: '数式,KaTeX'}],
};

$content(list)
  .sortBy(title, asc)
  .limit(2)
// titleで昇順に２件取得する
$content(list)
  .only('tags')
  .where({ 'tags': { $contains: [ 'Nuxtjs' ] } })
// tagsに絞ってtagsの文字列に'Nuxtjs'を含むオブジェクトをフィルタリングする。
```
$contentのWhere句は内部的に[techfort/LokiJS](https://github.com/techfort/LokiJS/wiki/Query-Examples#find-queries)を利用している。
クエリの詳細とたくさんの例が載っているので、ぜひ参照してください。

## シンタックスハイライト

[markdown.prism.theme](https://content.nuxtjs.org/ja/configuration#markdownprismtheme)


## Google Analytics

[@nuxt/google-analytics](https://google-analytics.nuxtjs.org/setup)

```sh
yarn add --dev @nuxtjs/google-analytics
```

```js:nuxt.config.js
  googleAnalytics: {
    id: process.env.GOOGLE_ANALYTICS_ID
  },
```
`GOOGLE_ANALYTICS_ID`は環境変数。

## Google Adsense

[@nuxtjs/google-adsense](https://github.com/nuxt-community/google-adsense-module)

```sh
$ yarn add @nuxtjs/google-adsense
```

```js:nuxt.config.js
  modules: [
    ['@nuxtjs/google-adsense', {
      id: process.env.GOOGLE_ADSENSE_ID
    }]
 ]
```
`GOOGLE_ADSENSE_ID`は環境変数。

```html
<template>
  <div>
    <adsbygoogle
    :ad-slot="'xxxxxxxx'"
    :ad-style="{ display: 'block' }"
    :ad-format="'auto'"
    />
  </div>
</template>
```
手動広告は、このようにしてページ内の広告を表示したい場所に書くことができる。
`ad-slot`は広告キーで、アドセンスで広告ユニットを作ると発行される。


## テストしてみる

プロジェクト作成で追加した[Jest](https://jestjs.io/ja/)でユニットテストをします。

```js:/test/Logo.spec.js
import { mount } from '@vue/test-utils'
import Logo from '@/components/Logo.vue'

describe('Logo', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Logo)
    expect(wrapper.vm).toBeTruthy()
  })
})
```

```sh
$ yarn test
yarn run v1.22.5
$ jest
 PASS  test/Logo.spec.js
  Logo
    √ is a Vue instance (15 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files  |       0 |      100 |     100 |       0 |
 index.vue |       0 |      100 |     100 |       0 | 29
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.69 s
Ran all test suites.
Done in 5.96s.
```

## マークダウンの書式を拡張する

[nuxt/contentに絵文字と数式のプラグインを追加する](https://www.suzu6.net/posts/265-nuxt-content-remark/)って記事に書きました。

## サイトマップを作成する

[nuxt/contentでサイトマップを作る](https://www.suzu6.net/posts/265-nuxt-content-sitemap/)に書いた。