title | emoji | type | topics | published | |||||
---|---|---|---|---|---|---|---|---|---|
Zennの記事をGitHub連携してVSCodeで作成させる手順① GitHubアカウントの作成・初期設定 |
📜 |
tech |
|
true |
今まで、技術情報は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とZennのアカウント作成順序はどちらが先で問題ありませんが、 今回はGitHubから作りました。
まず、GitHubのトップページからSign up
ボタンを押します。
email入力画面に続き、password、username画面を順に入力します。 usernameが利用可能になるとContinueボタンが押せるようになります。
![](https://storage.googleapis.com/zenn-user-upload/91bbb28a368b-20230423.png =500x) ![](https://storage.googleapis.com/zenn-user-upload/ea04e167e1f5-20230423.png =500x)
登録したメールアドレスへのupdate情報などの通知を希望するか?といった選択肢がでるので、y
orn
の好きな方を選びます。
![](https://storage.googleapis.com/zenn-user-upload/9ccb1f7bccad-20230423.png =500x)
次に、人間の証明?がありますので、それが成功するとCreate account
のボタンが押せます。
![](https://storage.googleapis.com/zenn-user-upload/128b3b8a695e-20230423.png =400x) ![](https://storage.googleapis.com/zenn-user-upload/b43e3e91cfe7-20230423.png =400x)
最後に登録したメールアドレス宛てに認証コードが送られますので、それを入力すればアカウントの作成が完了します。
:::message alert 自分がアカウント作成したときは、認証コードを入れても認証確認中の状態が終わらず、アカウント作成が完了しませんでした。 結局、次の日に改めて認証コードの入力を行ったので、うまくいかない場合は少し時間を空けてみるといいかもしれません。 :::
![](https://storage.googleapis.com/zenn-user-upload/6f69f887725f-20230423.png =500x)
アカウント作成完了すると、以下のページに遷移します。
![](https://storage.googleapis.com/zenn-user-upload/984c2393f45a-20230423.png =500x)
必須ではありませんが、セキュリティの観点からAuthenticatorアプリを使用した2要素認証の設定を行います。 必要ない方は飛ばして問題ありません。
基本的には、公式の手順通りです。
@card
まず、マイページの右上にあるアイコンボタンからSettings
をクリックします。
その後、左側のメニュー内からPassword and authentication
をクリックします。
![](https://storage.googleapis.com/zenn-user-upload/e8d3bcc25e58-20230423.png =300x)
![](https://storage.googleapis.com/zenn-user-upload/0a40d6d2e137-20230423.png =300x)
2要素認証の設定画面でEnable two-factor authentication
ボタンを押した後に、パスワードを入力します。
![](https://storage.googleapis.com/zenn-user-upload/05412580a39c-20230423.png =400x)
![](https://storage.googleapis.com/zenn-user-upload/276c2ceaa963-20230423.png =400x)
パスワード入力に成功すると、認証アプリでQRコードを読み込みます。 今回は、Microsoft Authentictor使用していますが、他にも、1PasswordやAuthyでもいけるようです(アプリ側の使用手順は割愛)。
![](https://storage.googleapis.com/zenn-user-upload/485f18605302-20230423.png =500x)
QRコードを読み込み、コードの入力に成功するとリカバリコードのダウンロード画面に遷移するため、ダウンロードして大切に保管します。
![](https://storage.googleapis.com/zenn-user-upload/787a1a4a9c3c-20230423.png =500x)
なお、他の2要素認証用の手段として、GitHub Mobileのダウンロードを推奨されるので、必要に応じてスマホにインストールください。
![](https://storage.googleapis.com/zenn-user-upload/39bfc95e9969-20230423.png =500x)
次に、GitHubアカウントのメールアドレスの非公開設定を行います。 以下のサイトを参考にしています。
@card
@card
Settings
をクリック後、左側のメニュー内からEmails
をクリックします。
![](https://storage.googleapis.com/zenn-user-upload/0cb2d702c6d8-20230423.png =300x)
Email設定の下の方にある、以下の2つの項目にチェックを入れます(Keep my email...は最初からチェックが入っているはず)。
![](https://storage.googleapis.com/zenn-user-upload/3f7e1ef59c6e-20230423.png =300x)
![](https://storage.googleapis.com/zenn-user-upload/0adc2a27478e-20230423.png =400x)
こうすることで、GitHubにプッシュする際にGitHubに登録したメールアドレスではなく、GitHub側で自動生成されたアドレスが使用されるようになります。
なお、このGitHub側で自動生成されたアドレスは、後でローカルのGit側に紐付ける必要がありますが、それについてはこの後の記事で説明します。
最後に、Zennの記事を管理するためのリポジトリを作成します。 基本的に、Zenn公式の手順の通りに実施しています。
@card
GitHubのマイページから、Repositories
を選択し、右上にあるNew
ボタンをクリックします。
![](https://storage.googleapis.com/zenn-user-upload/b0fa460a68e2-20230424.png =600x)
新規リポジトリ作成画面に切り替わったら、Repository nameを指定します。
公式では、zenn-content
でしたが、今回はzenn-contents
にしています。
公開設定(Public or Private)はどちらでも問題ないらしいので、好みで選んで問題ありません。
![](https://storage.googleapis.com/zenn-user-upload/3b3d29bedbfc-20230424.png =500x)
ここで指定したリポジトリをZenn側と連携する形になります。 Zenn側の設定は次の記事で説明します。