ローカルからZennへ記事をアップロードできるように設定してみる
お久しぶりです。nemunekoです=^_^=
最近上司から「文章がなってない！書いて勉強しろ！」的なことを遠回しに言われました。(・ω<) ﾃﾍﾍﾟﾛ
せっかくなのでZennで技術ブログを更新しながら文章力を鍛えていこうと思います！
目標は 週1更新 ！！！...って目標低すぎかな？
まぁ、最初は継続をできるように緩めの目標でやっていこうと思います！（これでもきつい気ががががが...）
今回の記事は、今更ながらZennとGithubを連携して、ローカルからZennの記事をアップロードできるように環境を整えた件について、その手順を書いていこうと思います！
基本は公式が出しているZennの記事通りにすればうまくいきますので、この記事の必要性はほぼないですが。。。
それではどうぞ。
記事の対象読者
- ローカルからZennの記事を更新したい方
実行環境
私の実行環境は以下の通りです。
| カテゴリ | ソフトウェア/ハードウェア | バージョン |
|---|---|---|
| OS | Windows 11 Home | 24H2 |
| Ubuntu (on WSL2) | 22.04 LTS | |
| ランタイム | Node.js | v22.17.0 |
| パッケージマネージャ | npm | 11.4.2 |
連携手順
1. Githubにリポジトリを作成
まずはGithubに記事を管理するリポジトリを作成します。
私は公式サイト[1]の画像通り、「zenn-content」という名前のリポジトリを作成しました。
2. 手元のGitとGithubを連携する
コンテンツを管理するディレクトリを作成し、GitとGithubを連携します。
まずはディレクトリを作成し、先ほど作成したリポジトリを登録します。
$ mkdir ~/zenn-content
$ cd ~/zenn-contet
$ git init
$ git branch -M main # ここは好み
$ git remote set-url origin git@github.com:[ここはあなたのURL！]/zenn-content.git
次にSSH接続するようの公開鍵と秘密鍵を秘密鍵を作成します。
$ mkdir .ssh
$ ssh-keygen -t ed25519 -f .ssh/zenn_key
$ ssh-add .ssh/zenn_key
GithubでSSHに使用する公開鍵を設定します。
Githubの右上にあるアイコン > Settings > SSH and GPG keys > SSH keys > New SSH keyをクリック。
Keyの中身に、.ssh/zenn-key.pubの内容を貼り付けて保存します。
これでGitとGithubが連携できたはずなので、実際にpushできるか確かめます。
$ touch test
$ git add test
$ git commit -m "test"
$ git push origin main
...
To github.com:[あなたのURL!]/zenn-content.git
* [new branch] main -> main
うまくいきました！やったー(*≧▽≦)
3. Zenn CLIをインストール
Zenn CLIをローカルに導入して、Zennの記事を管理できるようにします！
インストールの詳細やzenn-cliの詳しい使い方は公式サイト[2][3]をチェック！
$ npm init --yes
$ npm install zenn-cli
$ npx zenn init
$ npm install zenn-cli@latest
ちゃんとコマンドが使えるかを確かめるために、テスト記事を作ってみます。
$ npx zenn new:article --title test
created: articles/31e...243.md
コマンドを実行したことで記事のテンプレがarticles/にできました！
あとちょっとです！
4. Githubにあげて自動デプロイ
arcticles/の下にできたファイルに記事の内容を書いてpushします。
headerに書かれたpublished: falseをtrueに変えるとpushと同時に記事が公開されるので注意！
$ git add arcicles/[ファイル名].md
$ git commit -m "初めての執筆！"
$ git push origin main
この後にhttps://zenn.dev/dashboardを見に行ってみましょう！
少しラグがあるかもしれませんが、pushしてから数分以内には、先ほど描いた記事が上がっているはずです！
これで完了！！！！やったね(●´▽｀)
まとめ
今回はZennとGithubを連携して、ローカルからZennの記事を公開できるように設定しました！
まだまだつたない文章力・構成ですが、継続して記事を書いていこうと思います！
当分は初心者向けの（技術的に）平易な内容の記事が多くなりますが、よろしくお願いします。
それでは、また次の記事で。nemunekoでした=^_^=
Discussion