Zenn
Closed17

VS Codeを使ってZenn.devに記事を投稿するまでの手順

Git
Node.js
VS Code
Zenn
CLI
akiGAMEBOY🤖はれときどきZennakiGAMEBOY🤖はれときどきZenn
  1. Zenn-CLIの初期設定
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> & 'D:\Program Files\nodejs\npm' init --yes
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> 

Mode                 LastWriteTime         Length Name                                                                                                                                                  
----                 -------------         ------ ----                                                                                                                                                  
-a---l        2023/02/23      0:03            218 package.json


PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn>
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> & 'D:\Program Files\nodejs\npm' install zenn-cli
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn>
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn>
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> dir



Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
da---l        2023/02/23      0:03                node_modules
-a----        2023/02/23      0:03            639 package-lock.json
-a----        2023/02/23      0:03            270 package.json


PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn>
akiGAMEBOY🤖はれときどきZennakiGAMEBOY🤖はれときどきZenn
  1. Zenn-CLIの初期設定2
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> & 'D:\Program Files\nodejs\npx' zenn init       
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn>
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> dir


    ディレクトリ: D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
da---l        2023/02/23      0:03                node_modules
-a---l        2023/02/23      0:03            639 package-lock.json
-a---l        2023/02/23      0:03            270 package.json
akiGAMEBOY🤖はれときどきZennakiGAMEBOY🤖はれときどきZenn
  1. Zenn-CLIの初期設定3
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> & 'D:\Program Files\nodejs\npm' install zenn-cli@latest
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn>
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> dir

    ディレクトリ: D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
da---l        2023/02/23      0:03                node_modules
-a----        2023/02/23      0:10            639 package-lock.json
-a---l        2023/02/23      0:03            270 package.json


PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn>
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn>

これまでnode.jsのコマンドがフルパスでないと通らなかったが、
PC再起動により環境変数が設定されたので、そのままコマンドを
打っても通るようになった。

PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> npm -v
9.5.0
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn>
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> node -v
v18.14.2
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn>

参考情報：https://qiita.com/coticoticotty/items/b730ecfe69372bd69a3e

akiGAMEBOY🤖はれときどきZennakiGAMEBOY🤖はれときどきZenn
  1. gitの初期設定
    下記でコミットは動作するがプロジェクト名がローカルのフォルダ名で
    コミットされてしまった。
    既にあるリポジトリ、haretokidoki_znへのコミット方法がわからないので、
    違うやり方も考慮にいれて調査。
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> git config --global user.name 'akiGAMEBOY'
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> 
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn> git config --global user.email 'akigameboy@haretokidoki-blog.com'
PS D:\Users\XXXX\OneDrive\ドキュメント\VS Code\Zenn>

参考情報：https://www.simpletraveler.jp/2021/07/15/vscode-troubleshooting-git-username-email-error/

akiGAMEBOY🤖はれときどきZennakiGAMEBOY🤖はれときどきZenn

やり方を理解していないだけだと思うが、公式の手順だとうまくいかなかったが
下記の流れで、うまくコミットできた。

  1. VS Codeインストール
  2. node.jsインストール
  3. VS Code初期設定
  4. zenn-cli初期設定
  5. VS Code上でzenn-cliを使い記事を作成
  6. Gitインストール
  7. コミット

公式の手順通りに最初、リポジトリを作成していると、
コミット時、既にあるリポジトリの為、NGとエラーがでる。
たぶん、Gitを使い慣れていないので、既にあるリポジトリへのコミット？
の方法があると思われる。

akiGAMEBOY🤖はれときどきZennakiGAMEBOY🤖はれときどきZenn

2024.04.26 追記
今後、ZennのBookで有料記事を公開した場合、GitHubのリポジトリがPublicで公開していると、
意味がなくなるのではと感じ調べてみた結果、
こちらのとおり、Zenn CLIで接続するGitHubのリポジトリはPublicでなくても問題ない事がわかった。

これをうけ、私のGitHubリポジトリは、Privateに切り替えました。
切り替えた後でも問題なくZenn CLIが動作してした事も確認済み。

このスクラップは2023/02/23にクローズされました