Zennの記事をGitHub連携してVSCodeで作成させる手順① GitHubアカウントの作成・初期設定
今まで、技術情報はQiitaに挙げていたのですが、今回GitHubのアカウントを作成するついでにZennのアカウントも作成してみました。
最初の記事として、Zennに記事をあげる環境構築について投稿してみます。
概要
Zennでは、Qiitaにはない機能として、GitHub連携による記事の投稿・管理が行えます。
今回は、GitHubアカウント、Zennアカウントの作成やVSCodeからの記事作成の手順について備忘録も兼ねて記事にしています。
開発環境
- OS：windows10 Home 22H2
記事の構成
以下の順で説明していきます。
なお、思ってたより記事の分量が多かったため、本記事では1. GitHubアカウントの作成・初期設定までとし、それ以降は次の記事に引き継ぐ形としています。
- GitHubアカウントの作成・初期設定 ⏪本記事で説明
- Zennアカウントの作成・初期設定 （手順②で説明）
- GitHubとZennの連携 （手順②で説明）
- Gitのインストール・初期設定 （手順③で説明）
- node.js(npm)のインストール （手順④で説明）
- zenn-cliのインストール （手順④で説明）
GitHubアカウントの作成・初期設定
GitHubとZennのアカウント作成順序はどちらが先で問題ありませんが、
今回はGitHubから作りました。
アカウント作成
まず、GitHubのトップページからSign upボタンを押します。
email入力画面に続き、password、username画面を順に入力します。
usernameが利用可能になるとContinueボタンが押せるようになります。
登録したメールアドレスへのupdate情報などの通知を希望するか？といった選択肢がでるので、yornの好きな方を選びます。
次に、人間の証明？がありますので、それが成功するとCreate accountのボタンが押せます。
最後に登録したメールアドレス宛てに認証コードが送られますので、それを入力すればアカウントの作成が完了します。
アカウント作成完了すると、以下のページに遷移します。
初期設定
2要素認証対応
必須ではありませんが、セキュリティの観点からAuthenticatorアプリを使用した2要素認証の設定を行います。
必要ない方は飛ばして問題ありません。
基本的には、公式の手順通りです。
まず、マイページの右上にあるアイコンボタンからSettingsをクリックします。
その後、左側のメニュー内からPassword and authenticationをクリックします。
2要素認証の設定画面でEnable two-factor authenticationボタンを押した後に、パスワードを入力します。
パスワード入力に成功すると、認証アプリでQRコードを読み込みます。
今回は、Microsoft Authentictor使用していますが、他にも、1PasswordやAuthyでもいけるようです（アプリ側の使用手順は割愛）。
QRコードを読み込み、コードの入力に成功するとリカバリコードのダウンロード画面に遷移するため、ダウンロードして大切に保管します。
なお、他の2要素認証用の手段として、GitHub Mobileのダウンロードを推奨されるので、必要に応じてスマホにインストールください。
メールアドレスの非公開設定
次に、GitHubアカウントのメールアドレスの非公開設定を行います。
以下のサイトを参考にしています。
Settingsをクリック後、左側のメニュー内からEmailsをクリックします。
Email設定の下の方にある、以下の2つの項目にチェックを入れます（Keep my email...は最初からチェックが入っているはず）。
こうすることで、GitHubにプッシュする際にGitHubに登録したメールアドレスではなく、GitHub側で自動生成されたアドレスが使用されるようになります。
なお、このGitHub側で自動生成されたアドレスは、後でローカルのGit側に紐付ける必要がありますが、それについてはこの後の記事で説明します。
Zenn用リポジトリ作成
最後に、Zennの記事を管理するためのリポジトリを作成します。
基本的に、Zenn公式の手順の通りに実施しています。
GitHubのマイページから、Repositoriesを選択し、右上にあるNewボタンをクリックします。
新規リポジトリ作成画面に切り替わったら、Repository nameを指定します。
公式では、zenn-contentでしたが、今回はzenn-contentsにしています。
公開設定（Public or Private）はどちらでも問題ないらしいので、好みで選んで問題ありません。
ここで指定したリポジトリをZenn側と連携する形になります。
Zenn側の設定は次の記事で説明します。
Discussion