Zenn
✍

Windows10上にZennの執筆環境を構築する

2021/08/14に公開
1件
GitHub
VS Code
Zenn
Windows 10
環境構築
tech

はじめに

この記事は作業備忘録です。
Windows10上にVSCode + GitHub + Zenn CLIを導入し、Zennの執筆環境を構築します。
結果としては下記のような執筆環境が出来上がります。
特徴として、Zennの執筆がVSCode上で完結し、コマンド操作レスで、投稿まで可能です。

1. VSCodeの導入

1-1. VSCodeのインストール

下記のダウンロードページからインストーラーをダウンロードします。
https://code.visualstudio.com/
インストーラーを起動し特に何も変更せずに進めていき、「追加タスクの選択」のチェックボックスは全てOKにしておくと便利です。

このまま進めて行けば、VSCodeのインストール完了となります。

1-2. 拡張機能の導入

VSCodeには多くの拡張機能がありますが今回必要になるのは下記の【3つ】です。
拡張機能の導入方法は、【Ctrl + Shift + x】を押します。
検索窓に拡張機能名を入れて、見つけたらinstallボタンを押します。

  • Japanese Language Pack for Visual Studio Code
    VSCodeを日本語化する拡張機能(日本人なら入れとけば良いと思います)
    インストールが完了すると右下にポップアップで言語を変えますかと出るので変えます。
    ポップアップを見逃してしまった場合は、【Ctrl + Shift + p】を押し、検索窓にConfigure Display Languageと入力しjaを選択します。

  • Markdown All in One
    Markdownを書くときに欲しい機能が大体入った拡張機能(とりあえず入れとくと便利です)

  • Zenn Editor
    Zenn CLIをVSCodeに統合する非公式の拡張機能(最高に便利です!)

以下2つはオプション

  • Git graph
    gitの変更履歴を可視化する拡張機能(Gitの履歴が見やすい)
  • Markdown PDF
    MarkdownをPDFに変換する拡張機能(Ctrl+Shift+Pで簡単にPDF化できる)

2. GitHubを導入

2-1. Gitのインストール

事前準備としてGitを入れておきます。
こちらのページがわかりやすいです。このページの通りでできました。
https://qiita.com/kazukiHamstar/items/af450f8e9ca04bae3a89

2-2. GitHubのアカウント登録

下記のgithubのページに行き、アカウントを作ります(gmailアドレスなどがあれば簡単に作れます)。
https://github.co.jp/

2-3. 新規リポジトリを作成

新規リポジトリを作るボタンをクリックします。

リポジトリ名の入力と公開/非公開の選択(どちらでも良い)を行い、Create repogitoryボタンをクリックすると新規リポジトリができます。。

2-4. リポジトリを手元にクローン

リポジトリをクローンするにはクローン用のURLが必要です。下記に赤枠に記載されています。

それではクローンします。Windows Powershellを起動し、下記のコマンドを実行します。
ここでは、新規でディレクトリを作り、その中にクローンしています。

# Workディレクトリを作成
$ mkdir Work
# Workディレクトリの中に移動
$ cd Work
# sshでのgitクローン
$ git clone https://github.com/nkys39/zenn-doc.git

これでWorkディレクトリ下にリポジトリ名のディレクトリができているかと思います。
上記はHTTPSによるクローンなのですが、変更を加えてpushする際に毎回パスワードを入力する必要があります。楽にしたい場合はこちらの方法でクローンしてみてください。

https://zenn.dev/nkys39/articles/github-ssh-push

3. Zenn CLIを導入

基本的には、下記の公式ドキュメントに沿ってやっているだけです。
https://zenn.dev/zenn/articles/editor-guide
https://zenn.dev/zenn/articles/connect-to-github
https://zenn.dev/zenn/articles/install-zenn-cli

3-1. Zennのアカウント登録

Googleアカウントがあればアカウント登録できます。
Log inボタンをクリックして登録しましょう。

3-2. GitHubアカウントの連携

Zennの自分アイコンをクリックすることで出るウインドウから、「アカウント設定」をクリックします。
「プロフィール」のタグに「GitHubユーザー名」があるので2-2で登録したGitHubアカウント名を入力します。

3-3. GitHubリポジトリの連携

2-3で作成したリポジトリをZennに登録します。
Zennの自分アイコンをクリックすることで出るウインドウから、「GitHubからのデプロイ」をクリックします。
GitHubのリポジトリ名を入力します。

これでZennとGitHubリポジトリの連携設定が完了したので、残るはZenn CLIのインストールです。

3-4. Node.jsをインストール

Zenn CLIの導入には、Node.jsが必要です。こちらの記事を参考にインストールしてください。

https://zenn.dev/nkys39/articles/install-nodejs-win10

3-5. Zenn CLIのインストール

Windows Powershellを起動し、GitHubリポジトリのディレクトリに移動し、下記のコマンドを実行します。

# GitHubリポジトリのディレクトリに移動
$ cd Work/zenn-doc
# プロジェクトをデフォルト設定で初期化
$ npm init --yes
# zenn-cliを導入
$ npm install zenn-cli

これでGitHubリポジトリのディレクトリ内にZenn CLI環境が構築されます。

3-6. Zenn CLIの初回セットアップ

上記と同様に、Windows Powershellを起動し、GitHubリポジトリのディレクトリに移動し、下記のコマンドを実行します。

# GitHubリポジトリのディレクトリに移動
$ cd Work/zenn-doc
# npxコマンドでzennを初期化します。
$ npx zenn init

実行後、README.mdや.gitignoreのほか、articlesとbooksという名前のディレクトリが作成されます。この中にマークダウンファイル（◯◯.md）を入れて記事や本を作成していきます。

4. VSCode上での操作

VSCodeの拡張機能Zenn Editorがインストールされていれば、下記のように左のエクスプローラ上最下部にZENN CONTENTSが生成されており、ここで記事や本の作成がワンクリックで可能になっている。
また、Zenn Editor PreViewを見たいときは右上のZがついたアイコンをクリックすると、記事の最初に示したような執筆環境が表示できる。デフォルトではホットリロード(保存するとPreviewに反映)がONになっているため、書いてすぐに表示を確認できる。

4-1. 記事の作成

記事の新規作成は、エクスプローラーのZENN CONTENTSの右のボタンからできる。
作成すると----で囲まれた場所があり、記事のタイトルや公開/非公開などを設定できる。
その下の場所にMarkdownで記事の内容を書いていく。
記事をデプロイするにはPreviewに出ているエラーを解消しておく。

4-2. GitHubへpushし、Zenn連携により自動デプロイ

記事が書けたら、GitHubにpushする。(+ボタンでステージに上げて、コミット文を入力し、✓ボタンでコミットし、…ボタンを押してプッシュを選択でpushできる)

ZennとGitHubは連携しているので、自動デプロイされます。
しかし、初回や更新量が大きすぎる場合、タイムアウトして失敗してしまいます。
その時は手動デプロイをすることで、回避できるかと思います。

Zenn Editorに感謝です!!!
以上。

Discussion

みなとみなと

現在は、Zenn公式より「Zenn Preview for github.dev」という拡張機能がリリースされているようです。プレビュー版ですが問題なく使用できました。ご参考まで。