📜

Zennの記事をGitHub連携してVSCodeで作成させる手順① GitHubアカウントの作成・初期設定

2023/04/24に公開

今まで、技術情報はQiitaに挙げていたのですが、今回GitHubのアカウントを作成するついでにZennのアカウントも作成してみました。
最初の記事として、Zennに記事をあげる環境構築について投稿してみます。

概要

Zennでは、Qiitaにはない機能として、GitHub連携による記事の投稿・管理が行えます。
今回は、GitHubアカウント、Zennアカウントの作成やVSCodeからの記事作成の手順について備忘録も兼ねて記事にしています。

開発環境

  • OS:windows10 Home 22H2

記事の構成

以下の順で説明していきます。
なお、思ってたより記事の分量が多かったため、本記事では1. GitHubアカウントの作成・初期設定までとし、それ以降は次の記事に引き継ぐ形としています。

  1. GitHubアカウントの作成・初期設定 ⏪本記事で説明
  2. Zennアカウントの作成・初期設定 (手順②で説明)
  3. GitHubとZennの連携 (手順②で説明)
  4. Gitのインストール・初期設定 (手順③で説明)
  5. node.js(npm)のインストール (手順④で説明)
  6. zenn-cliのインストール (手順④で説明)

GitHubアカウントの作成・初期設定

GitHubとZennのアカウント作成順序はどちらが先で問題ありませんが、
今回はGitHubから作りました。

アカウント作成

まず、GitHubのトップページからSign upボタンを押します。

https://github.com/

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側の設定は次の記事で説明します。

GitHubで編集を提案

Discussion