Zenn
📜

Zennの記事をGitHub連携してVSCodeで作成させる手順③　Gitのインストール

2023/04/25に公開
GitHub
VS Code
Bash
npm
Zenn
tech

前回からの記事の続きになります。

概要

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

開発環境

  • OS：windows10 Home 22H2

記事の構成

以下の順で説明していきます。
本記事では4. Gitのインストール・初期設定について説明します。

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

Gitのインストール・初期設定

この作業は過去にGitをインストールした方は不要です。
その場合は、この章は飛ばしてください。

インストーラのダウンロード

Gitのサイトにアクセスし、DownloadsボタンまたはDownload for Windowsボタンを押し、自分の環境に合ったソフトをダウンロードします。
Portable版もありますが、今回はインストーラ版をダウンロードしています。

インストーラを実行すると、ライセンスへの同意とインストール先の指定画面が表示されますので、特に変更を希望しなければそのままどちらもNextをクリックします。

インストール時のオプション設定

この後、Gitインストール時のオプション設定になるんですが、項目がかなり多いです（しかも英語）。

オプションの選択にあたっては、こちらの記事が大変参考になりましたので、こちらの記事も併せて確認しつつ、自分に合った設定を選んでいくと良いと思います。

参考に、私のオプション選択も画面キャプチャを貼っておきます（詳細は省略）。

  • インストールオプション

  • スタートメニュー登録

  • ⚠エディタ設定

  • リポジトリのブランチ名

  • 環境変数

  • SSH設定

  • HTTPS設定

  • 改行コード

  • ターミナル

  • git pull設定

  • 認証設定

  • その他オプション

  • 試験オプション

ここまででオプションの選択は完了します。
Installボタンをクリックすると、インストールが開始され、完了するとインストール完了画面が表示されます。

初期設定

GitHubとの紐付け

GitHubの初期設定時に記載されていた、GitHub側で自動生成されたアドレスをローカルのGitに紐付ける作業を行います。

Git Bashを立ち上げ、以下のコマンドを順に実行します。
usernameはGitHub Docsの記載を見た限り、何を入力しても問題なさそうですが、今回はGitHubのユーザー名と合わせてます。

Git は、アイデンティティによってコミットを関連付けるためにユーザ名を使います。
Git ユーザ名は、GitHub ユーザ名と同じではありません。

address_issued_by_GitHubについては、GitHub側で自動生成されたアドレスを入力します。

git config --global user.name "username"
git config --global user.email "address_issued_by_GitHub"

コマンド入力後、続けて以下のコマンドを入力して、ユーザー名、メールアドレスが正しく反映されていることを確認します。
また、core.editorには、インストール時のエディタ設定で選択したエディタソフトが選択されていることを確認します。

git config --global -l
// 出力結果
core.editor==*******************
user.name==*******************
user.email=*******************

VSCodeでのGit設定

先ほどはGit Bashからコマンドを実行していましたが、VSCodeのターミナルからもGitを起動できるので、今後はそちらを使います。

なお、本記事ではVSCodeのインストールは既に済んでいる前提ですので、未インストールの方は別途VSCodeをインストールください。
VSCodeを起動し、画面右上にある画面分割（パネル切り替え）ボタンをクリックします。

すると、画面下にターミナル画面が出ますので、右側の＋ボタン右にある下矢印ボタンをクリックして、Git Bashをクリックします。

ターミナル画面が追加され、bashの方でGitコマンドが実行できます。
なお、デフォルトのターミナルをPower ShellからGit Bashに変更することも可能ですので、
必要に応じて設定を変更ください（設定方法は省略）。

GitHub上のリポジトリのローカルへのクローン

GitHub上で作成したZennコンテンツ用のリポジトリをローカルにクローンします。
GitHub上から、クローンしたいリポジトリのページに行き、HTTPSを選択し、コピーボタンをクリックします。

VSCode上のGit Bashで、ローカルリポジトリを作成するフォルダに移動し、以下のコマンドを実行します。

git clone https://github.com/************.git

その後、ローカルにGitHub上と同じ名前のフォルダが作成できていれば問題ありません。

GitHubで編集を提案

Discussion