Zennの初期導入手順
はじめに
様々な技術情報やトピックを公開していくために、Zennを使い始めてみました。
これが記念すべき最初の記事です。
最初はつたない部分などいろいろあると思いますが、温かく見守っていただけると嬉しいです。
折角Zennを始めてみましたので、導入手順をまとめておきます。
記事の書き方には、ブラウザで書いていくパターンと、GitHubと連携して.md形式のファイルを作成する形で記載していくパターンがあります。
途中からでも書き方を変えられるようですが、一旦エクスポートするなど手間もありそうですので、技術者らしく最初からGitHub連携で.md形式（マークダウン）で書くことにしました。
※マークダウン書きなれていない人は慣れましょう！
GitHubなのでうまくやれば、いずれ記事のプルリク運用とかもできるんじゃないかと思っています。
また、サポートを受けるという、読者からお金をいただくいわゆる投げ銭機能がついていたり、
本のような形にして販売することもできるようです。
あまり、そういった形でお金になることは期待はしていないですが、記事を書くモチぺーションはちょっと上がりそうですね。
編集にはVisualStudioCodeを使用し、プラグインとして「Markdown All in One」をインストールしています。
Zenn CLIというツールを入れると、プレビューしながら記事が書けます。（すごい！）
実際に行った導入手順は以下の通りです。
必要になるもの
- Googleアカウント
- GitHubアカウントおよび記事管理用のリポジトリ
- マークダウンエディタ（何でもいいと思いますが、私はVisualStudioCodeを使用しています）
- NPM（npm/npxコマンド使います。普通にインストールしておきましょう）
- Git（普通にインストールしておきましょう）
Googleアカウントを作成する
Googleのアカウントを作成しておきます。
ZennはGoogleアカウントでの登録をのみをサポートしています。
Zennに登録する
次のURLから、Zennに登録を行います。
画面に従って登録していけば簡単に登録できます。
画面をスクロールした下のほうに「Join Zenn」という部分がありますので、「今すぐ始める」を押して登録します。
連携するGoogleアカウントを効かれますので、事前に作成したGoogleアカウントを選択します。
GitHubでリポジトリを作成する
GitHubで記事登録用のリポジトリを作成します。
プライベートでもパブリックでも利用は可能なようです。
このあたりの設定は意外と悩みました。
以下参考にさせて頂きました。
結論、「zenn-contents」で、プライベート設定にすることにしました。
Readmeファイル等は作成する必要はありません。
ちなみに、ブランチはmasterではなく、mainを読み取るようなので注意しましょう。
※GitHubデフォルト設定だと今は、mainになっていると思いますが。
Zenn管理画面からリポジトリを連携する
Zennの管理画面の右上のアイコンから「GitHubからのデプロイ」というメニューがありますので、そちらから連携設定を行います。これも、画面通りに操作を進めていけば簡単に登録できます。
途中でGitHubに遷移してパスワードと連携するリポジトリを聞かれるので入力します。
このとき、全リポジトリを連携するか、特定のリポジトリを連携するか聞かれるので、特定のリポジトリのみを連携するようにしましょう。
GitHubリポジトリをCloneする
GitHubに作成したリポジトリを、ローカルPCの任意のフォルダにcloneします。
私は、以下のフォルダにしました。
C:\zenn-contents
git clone https://github.com/[ユーザ名]/zenn-contents.git
Zenn CLIをインストールする
※NPMをインストールしていない方は事前にインストールしてください。
先ほど、cloneしてきたディレクトリ上で、以下のコマンドを実行します。
npm init --yes
npm install zenn-cli
npx zenn init
プレビュー機能の動作を確認する
次のコマンドを実行することで、ローカルPC上でnodeのサーバが立ち上がり、記事を書きながらプレビュー確認することができます。
npx zenn preview
ブラウザで以下のURLにアクセスすることで、プレビュー確認ができます。
http://localhost:8000
記事を書いて保存するだけで、すぐに画面に反映されます。（画面のリロードも不要）
そのほかにも「記事の作成ガイド」や「マークダウン記法」へのリンクもあり、そのあたりを参考にしながら記事を書けます。
記事の作成
新しい記事を作成するときには、articlesフォルダ配下に.mdファイルを置くことで作成できますが、Zennにタイトルやタグ、属性情報を認識させるための情報を入れる必要があります。
（例）
---
title: "Zennの初期導入手順"
emoji: "📑"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["Zenn"]
published: false
---
コンソールで以下のようにコマンドを実行することで、テンプレートを簡単に作成できますので、コマンドで作ったほうが良いです。
ちなみに、この際にslugという指定が任意でできます。これが.mdファイルのファイル名になり、指定しないと、ランダムで作られるようです。また、これがサイト上の公開URLにも入るようです。
後から分かりやすいような名前にしておくのがよさそうです。
なお、このslugは同じ名前で被ることができないので、12文字以上という制限があるようです。（どういう名前をつけるか悩みますね）
以下では、zenn-first-installという名前を付けてみました。
npx zenn new:article --slug zenn-first-install
articles/zenn-first-install.mdといったファイルが出来上がります。
ちなみに、slugを指定せずにコマンド実行したらd1d21fc9d14635.mdのような名前のファイルができました。
後は、出来上がった.mdファイル内にマークダウン形式で記事を書いていけばOKです。
ちなみにこの際に、記事の先頭のpublishedという属性をtrueにすると公開で、falseにすると下書きになります。
最初はfalseでやってみたほうが良いです。
GitHubにpushする
記事が完成したら、コミットしてプッシュしましょう。
git add .
git commit -m `最初のコミット`
git push origin [main]
※TortoiseGit等が使い慣れている方はそちらでもよいかと思います。
Zennから表示を確認する
記事をGitHubにPushすると、そのPushをトリガーとして、Zennに自動連係されます。
管理画面からArticlesというメニューを選択すると、Pushした記事が表示されます。
このときpublishedをfalseに設定していれば、「下書き」と表示されます。
記事の右側のプレイボタン「△」を押すと、プレビュー確認できます。npx zenn previewとはまた少し違って見えるので、確認しておきましょう。
また、この時編集ボタンから編集もできてしましますが、GitHubにPUSHすると上書きされてしまうので、編集はしないようにします。
記事を公開する
記事の準備ができたら、.mdファイルのpublished設定をtrueにして、再度PUSHを行います。
慣れてきたら、いきなり公開するのもありかもしれません。
- サポートの受付設定（閲覧者からサポート（投げ銭）を受け取りたい場合）
- プロフィールの自己紹介（簡単にでよさそうです）
- カード情報（これは、他の人にサポートしたい場合のみでよさそう）
- お振込先（これはサポートを受け取ったり、本を販売した場合の振込先のようです）
- GoogleAnalytics設定（GoogleAnalyticsで測定ID(トラッキングID)を作成して設定しておくとアクセスが測定できるようです）
Discussion