Zenn入門 GitHubリポジトリをZennに連携させる【後編：記事投稿(Git)】
変更履歴
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に設定します。
Default Editorは、最初VimになっていますのでここでVS Codeに変更しましょう。
VimでOKの方は作業不要です。
Zennでブランチ名を master 以外に設定している方(例:main)
下記ように、Zennで連携したブランチ名mainを入力して下さい。
ブランチ名がmasterの方は作業不要です。
ちなみに私は、mainブランチ名を設定しています。mainの方が馴染みがあるからかな。。
これでGitのインストールできました。
Gitインストールの確認
まずは、VS Codeを起動してGitがインストールされているか確認しましょう。
1.「ターミナル」から
新しいターミナルを起動
2. ターミナルでGitのバージョン確認
$ 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はアイデア記事
$ npx zenn new:article --slug hello-zenn-world-202108091346 --title Hello zenn world --type tech
テスト記事が出来ました。
投稿用にちょっとファイルを編集しましょう。
title: "Hello"
emoji: "📌"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: []
published: false
(変更内容)
- topic に zennを設定
- pubulished変更：false -> true
- 本文を追加
title: "Hello"
emoji: "👻"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: [zenn]
published: true
# Hello zenn world !
Zennへの投稿テストページです。
4.1 git add(working ⇒ staging)
1.変更管理アイコン（左側の丸が三つで線でつながったアイコン）をクリック
2.対象ファイルの右のプラス（＋）ボタンをクリック
4.2 git commit
これでStagingへファイルが登録されました。
次にローカルリポジトリに登録するためにコミットメッセージを入力しましょう。
4.3 git push
↑矢印が1になっているのでクリックしてPushしましょう。
完成です。お疲れ様でした。
テストで投稿した記事はいらないのでGithubから削除しましょう。
Zennだけ削除してもGithubからの再同期で復活してしまいますよ(ToT)
さいごに
これから学んだことを少しずつでもZennで投稿して行ければと思います。
Discussion