📝
VSCodeとGitHubを使ってZennに記事をアップロードするまでの長い道のり
概要
GitHubと連携して記事をアップロードする
必要なもの
- Zennのアカウント
- GitHubのアカウント
- GitとGitDesktop(GitDesktopはなくてもいいけど楽ちん)
- Node.js
- VS Code (最低でもZenn Editorの拡張機能を入れておく)
ざっくりな手順
-
必要なモジュールをローカルPCにインストール (VS Code以外は、winget。VS Codeは別に入れる(理由は別記事で))
モジュールを入れたら必ず再起動する (PATHが登録されない) -
ローカルにGitHubのリポジトリー用フォルダーを作成 (OneDriveに同期してないフォルダーがいい)
-
2.で作ったフォルダーの下にGitDesktopでZenn用のリポジトリーフォルダーを作成するしてGitDesktopでGitHubにプッシュしておく
-
Powershellを開き3.のフォルダーにカレントフォルダーを変更して以下のコマンドを実行す売る
$ npm init --yes # プロジェクトをデフォルト設定で初期化
$ npm install zenn-cli # zenn-cliを導入
$ npx zenn init # Zennのフォルダーをzenn用に初期化
$ New-Item Images -ItemType "directory" #自動手作られないので画像用のフォルダーを作成
リポジトリーのルートフォルダーで以下も実行VS Code
(名前は、参考先のサンプル、した2行は、エディターをVSCodeに指定)
$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com
$ git config --global core.editor 'code --wait'
$ git config --global merge.tool 'code --wait "$MERGED"'
参考
- Zenn の以下のページで 3. で作ったフォルダーのリポジトリーのフォルダーをZennと連携するように設定する
https://zenn.dev/dashboard/deploys?tab=repo_settings - 3.のフォルダーをVSCodeで開く
- エクスプローラーアイコンのサイドメニュー内に「ZENN CONTENTS」という項目があるので、記事の新規作成アイコンをクリックして記事を作成。
- 記事を書いたらGitをコミットしてプッシュする。
躓きポイント
ZennもはじめてならGitもはじめてなのでかなりはまりました。。。
- npmを使うのにNode.JSを入れたまではいいがPATH登録に再起動がいることを忘れる
- Gitの初期設定で躓く (ユーザー名とメールを設定するのとVSCode側のTokenの設定)
- Zenn側でファイル名が不正だと怒られファイルを再度作ってコピペする。。。
- VSCodeのGUIでプッシュやコミットがうまくいかなくても諦めず、
ターミナルからコマンドでGitを実行する (以下実行例)
$ git add .
$ git commit -m "コミット時のコメントを記載"
$ push origin main
↑どうやらVS CodeのGUIで実行した際は、コミット時のコメントを書き忘れて止まっていたっぽい。
コメント書いてコミット実行したらうまくいった。
こんな初心者な記事がだれかの参考になれば幸いです。
参考記事
Discussion