Zenn入門 GitHubリポジトリをZennに連携させる【後編:記事投稿(Git)】

4 min read
変更履歴

2021/8/9 初稿

Githubの登録がまだの方

[02]Git入門 GitHubリポジトリをZennに連携させる【前編:環境構築で環境のセットアップをお願いします。

はじめに

いよいよ後編:記事投稿(Git)です。
VS Code上で投稿記事作成して、Githubに記事投稿するまでの手順を説明します。

【前編:環境構築】
  1. インターネット公開用の環境構築(GitHub登録とZennへの連携)
  2. ローカル環境構築(Zenn CLIのインストール)

【後編:記事投稿(Git)】
  3. Gitインストール
  4. Gitコマンドによる投稿手順(add,commit,remote,push)
概要図
概要図

3. Gitインストール

下記サイトからGitをダウンロードしてインストールしましょう。
その際にDefault EditorをVS Codeに設定します。

https://gitforwindows.org/

Gitダウンロード

Default Editorは、最初VimになっていますのでここでVS Codeに変更しましょう。
VimでOKの方は作業不要です。
VS Codeをデフォルトエディターに設定

Zennでブランチ名を master 以外に設定している方(例:main)

下記ように、Zennで連携したブランチ名mainを入力して下さい。
ブランチ名がmasterの方は作業不要です。

ブランチをmainに変更

ちなみに私は、mainブランチ名を設定しています。mainの方が馴染みがあるからかな。。
zennでmainブランチ名を設定

これでGitのインストールできました。

Gitインストールの確認

まずは、VS Codeを起動してGitがインストールされているか確認しましょう。

1.「ターミナル」から新しいターミナルを起動 
2. ターミナルでGitのバージョン確認

$ git --version

Git version

4. Gitコマンドによる投稿手順(add,commit,push)

いよいよ投稿手順ですね。手順はこんな感じですね。
投稿手順の概要図

Zennの投稿用記事を作成

Zenn用の作業フォルダーに移動し、npx zenn newコマンドで記事を作成してください。

$ npx zenn new:article --slug <ファイル名> --title <記事のタイトル> --type <tech or idea>

ファイル名:hello-zenn-world ※小文字の半角英数とハイフン(-)の組み合わせで12~50文字
タイトル : Hello zenn world ※任意
タイプ  :tech ※techは技術記事、ideaはアイデア記事

誰かが一度登録したファイル名だと登録できないようです。
今回、私はhello-zenn-world から  hello-zenn-world-202108091346 にファイル名を変更してPublishしました。

$ npx zenn new:article --slug hello-zenn-world-202108091346 --title Hello zenn world --type tech

テスト記事が出来ました。
テスト記事

投稿用にちょっとファイルを編集しましょう。

hello-zenn-world-202108091346.md (変更前)
title: "Hello"
emoji: "📌"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: []
published: false

(変更内容)

  • topic に zennを設定
  • pubulished変更:false -> true
  • 本文を追加
hello-zenn-world-202108091346.md (変更後)
title: "Hello"
emoji: "👻"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: [zenn]
published: true

# Hello zenn world !
Zennへの投稿テストページです。

4.1 git add(working ⇒ staging)

1.変更管理アイコン(左側の丸が三つで線でつながったアイコン)をクリック
2.対象ファイルの右のプラス(+)ボタンをクリック
git add

4.2 git commit

これでStagingへファイルが登録されました。
git add finish

次にローカルリポジトリに登録するためにコミットメッセージを入力しましょう。

4.3 git push

↑矢印が1になっているのでクリックしてPushしましょう。
git push

完成です。お疲れ様でした。

完成



テストで投稿した記事はいらないのでGithubから削除しましょう。
Zennだけ削除してもGithubからの再同期で復活してしまいますよ(ToT)

さいごに

これから学んだことを少しずつでもZennで投稿して行ければと思います。

参考サイト

Discussion

ログインするとコメントできます