Zennをはじめる
変更履歴
2023/5/16 初版
2023年4月に行った作業のメモをもとに整理したものです。それぞれの環境によって違いがあるかもしれませんが，ご容赦ください。
できるようになること
まったくの初心者が，ローカルPC（Windows10）のエディターで書いた記事をZennで公開できるようになります。
Zennをはじめるには
Zennで，右上のLog inボタンをクリックしてポップアップした画面からLogin with Googleボタンをクリックします。アカウントの選択画面でログインするgoogleアカウントを選択します。
Welcome画面が表示されるので，ユーザー名（後から変更できない）と表示名（いつでも変更できる）を入力してください
Setup your profileでprofileを入力して，ZennをはじめるをクリックすればOKです。
0．ローカルPC（Windows10）へアプリのインストール
Gitのインストール
Gitの公式サイトからインストーラーをダウンロード。インストール時の設定は上記サイトを参考に以下の通り設定しました。
・インストールするコンポーネントの選択：デフォルト
・テキストエディターの選択：普段使うエディターを選択
・新しいリポジトリ作成時のブランチ名：GitHubにあわせて「main」に変更
・パスの設定：デフォルト（Git from the command line and also from 3rd-party software）
・OpenSSH：デフォルト（Use bundled OpenSSH）
・HTTPS接続の設定：デフォルト（Use the OpenSSL library）
・改行コードの設定：Checkout as-is, commit as-isに変更
・ターミナルの設定：デフォルト
・git pull コマンドの設定：デフォルト
・資格情報マネージャー(Credential Manager)の選択：デフォルト
・追加オプションの設定：デフォルト
インストールが完了するとgitコマンドが使えるようになっています。次いで，コマンドラインでユーザ名などを登録します。
git config --global user.name 任意のユーザ名
git config --global user.email 任意のメールアドレス
git config --listで入力を確認できます。抜けられなくなったら:qと入力すると次のコマンドが入力できるようになるはずです。
Node.jsのインストール
Zenn CLIを使うにはNode.js 14以上が必要。
Node.jsの公式サイトからインストーラー（推奨版でよい）をダウンロード。特に変更する設定はなく，画面の表示に従ってインストールしてください。
1．GitHubとZennとの連携
公式説明
GitHubの登録
GitHubで，GitHubに登録するをクリック。
Username，Email address, passwordを入力し，Verify your accountとして質問に答えて，Create accountをクリックしてください。
メールにlaunch codeが来るので入力（入力後にSet up your organization画面が表示されるかもしれませんが，無視してかまいません）。
GitHubリポジトリの作成
GitHub画面右上の自分のアイコンからYour repositoriesを選択。右にあるNewという緑色ボタンをクリックすると，Create a new repository画面が表示されます。
Repository nameに好きな名前を入力します。公開設定はとりあえずPrivate（どちらでもよい。あとから変更可能です）。この時点ではリポジトリの中身は空です（Add a readme fileはチェック無し，add .gitgnoreとChoose a licenseはNoneとしてください）。
Zenn管理画面からGitHubリポジトリを連携する
Zennの画面で画面右上の自分のアイコンをクリックし，GitHubからのデプロイから設定画面を開きます。
GitHubリポジトリを連携するをクリック。GitHubに遷移します画面で「連携へ進む」をクリック。[Only select repositories]にチェックを入れ，連携するリポジトリを選ぶ→Install & Authorizeをクリック
3．Zenn CLIの導入
公式説明
GitHubリポジトリをCloneする
Cloneしたいフォルダで右クリックし，Git Bush Hereを選択。以下のとおり実行してください。
git clone https://github.com/[ユーザ名]/[リポジトリ名].git
cd [リポジトリ名]
Zenn CLIをインストールし，Zenn用のセットアップを行う
npm init --yes
npm install zenn-cli
npx zenn init
これで，ローカルPC内のZennコンテンツを収めるフォルダ内にREADME.mdというファイルやarticlesとbooksというフォルダが作成されています。
4．記事の作成～投稿
公式説明
記事の作成
まず，記事のテンプレートを作成します
npx zenn new:article --slug [任意の名前]
[任意の名前].mdという名前のファイルがarticleフォルダに作成されています
ここからはテキストエディターで編集していきます。
まずはタイトルやトピックスなど記事の設定がYAML（ヤムル）形式で書かれているので書き換えます。
本文はmarkdown方式で記載します。記法は以下を参考にしてください。
記事のプレビュー
作成した記事の確認には，次のコマンドを実行してください。
npx zenn preview
ブラウザでhttp://localhost:8000 にアクセスするとプレビューが表示されます。
記事のアップロード
git addでローカルリポジトリにアップするファイルを選択（ステージングエリアに追加）します。作業ディレクトリやステージング エリアの状態の確認はgit statusでできます。
git commitでコミット。コミット履歴はgit logでできます。
git pushでGitHubリポジトリへアップしてください。
git add . #特定のファイルを更新したい場合は，git add [ファイル名]
git commit -m 'メッセージ'
git push origin main
GitHubリポジトリへプッシュできるとZennの画面右上にあるGitHubのアイコンでデプロイの履歴を確認することができます。
デプロイ成功と表示されていることを確認したら，viewから当該の記事を開くことができるので内容を確認してください。
記事の公開
.mdファイルのpublishedをtrueにして，GitHubリポジトリへプッシュすれば公開されます。
---
title: "Zennをはじめる"
emoji: "🤖"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["初心者", "Zenn", "GitHub"]
published: true
---
参考
Discussion