🔰

WSL2 (Ubuntu20.04) に Zenn 執筆環境構築を構築してみた

2021/07/04に公開

Zenn

WSL 2

tech

はじめに

FPGA や Python など、プログラムの勉強の忘備録を残したいと思い、新しめのサービスである Zenn を使ってみようと思った。
Zenn には GitHub 連携 + Zenn CLI という執筆支援ツールを使って記事を管理 & デプロイできるそうなので、自分の PC 環境で一通り動かせるようにしてみた。
これをネタに、まずは記事を書いてみる練習をやってみる。

開発環境

Windows 10 20H2
WSL2 ( Ubuntu 20.04.2 LTS )
- 基本的には WSL2 に環境を構築し、Visual Studio Code の Remote-WSL からごにょごにょできるようにする

構築ログ

前提

WSL2 のセットアップが終わっている状態
- 以下公式記事を参考に、手動インストールの部分を進める
- Windows 10 に WSL をインストールする | Microsoft Docs
  - ディストリビューションは "Ubuntu" を選択
Zenn のアカウント作成が終わっている状態
GitHub のアカウント作成ができており、SSH Key 等を設定して接続確認が済んでいる状態
- 以下記事を参考に、WSL2 上から GitHub への接続確認を行う
- SSH 接続をテストする - GitHub Docs

Zenn GitHub 連携

公式の参考URLどおりに進める
- GitHubリポジトリでZennのコンテンツを管理する
- リポジトリ名は何でもよい
- リポジトリはひとまず Private 設定にした
- README.md を作る設定にして、Initial Commit を発生させておいた
- 2021/7/3 現在、GitHub のデフォルトブランチは master ではなく main なので、main ブランチを連携させる

WSL2 (Ubuntu 20.04) に Zenn CLI をインストール

下準備
- WSL を最新にアップデートしておく
```
$ sudo apt update && sudo apt upgrade
```
- WSL に node.js をインストールしておく
  - Zenn CLI に必要
  - 手順は以下の URL を参考に進めるが、バージョンは最新のものを使う
  - WSL 2 上で NodeJS を設定する | Microsoft Docs
  - 2021/7/3 現在の nvm 最新リリースバージョンは v0.38.0
    - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
    - README にインストールコマンドがのってた
  - 以下実行手順
```
$ sudo apt install curl
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash # nvm のインストール
### インストール後 PC 再起動
$ command -v nvm # コマンドが使えるかのチェック、nvm と返ってくれば OK
$ nvm install --lts # node.js 安定版をインストール
$ nvm ls # バージョンチェック
```
- GitHub のリポジトリをクローンしておく
Zenn CLI をインストール
- 基本的に以下記事で進める
  - Zenn CLIをインストールする
- npx zenn init 実行前に、GitHub 上で作った README.md を削除しておく
  - 同一ファイルがすでにある場合、ファイル生成がスキップされるため
- npx zenn preview を使うために、WSL2 の localhost を Windows Host 上で使えるようにしておく
  - 以下記事が参考になる
    - WSL2内で立ち上げたサーバにWindows側からlocalhostで接続する - Qiita
  - .wslconfig ファイルを指定の場所に作成
  - PC再起動後、WSL 上でnpx zenn preview を実行し、Windows 上のブラウザで http://localhost:8000 にアクセス

おわりに

ひとまずこれで WSL 上から Zenn CLI の機能が使えるようになった。
記事の管理ってどうやるんだろう？とか思っていたので、かなり助かりそうなツールである。
Preview も実際に Zenn 上にアップされる記事として見れるので、結構便利。
この記事の公開もCLIを使ってできました。
Hello, Zenn. これからよろしくお願いします。