Zennのブログ記事をGitHubで管理する

はじめに

Zennで技術ブログを書くにあたって、GitHubで管理できるようなので
GitHubの勉強がてら取り組んでみました。

簡単な手順を紹介します。Linuxコマンドの基礎知識はあった方が良いかもです。

結果

無事にGitHubによる管理の概要はつかめました！
(ちゃんと苦戦しました)

事前準備

1. GitBashのインストール
   1-1. https://gitforwindows.org/ にアクセスしてください。
   1-2. [Download]をクリックしてください。
   
   1-3. ダウンロードしたファイルからインストールしてください。
   
   
2. GitHubのアカウント作成
   2-1. https://github.co.jp/ にアクセスしてください。
   2-2. [GitHubに登録する]をクリックしてください。
   
   
   
3. Node.jsのインストール
   3-1. https://nodejs.org/en にアクセスしてください。
   3-2. [Recommended For Most Users]をクリックしてください。
   
   3-3. ダウンロードしたファイルからインストールしてください。

手順

事前準備を終えたら、いよいよ連携させます。

1. 以下の記事から1-1～1-3を進めます。
   1-1. リポジトリを作成する
   1-2. Zennのダッシュボードから連携する
   1-3. 同期するブランチ名を確認

https://zenn.dev/zenn/articles/connect-to-github

2. GitBashを起動します。
3. GitBashでZennのコンテンツを管理したいフォルダに移動します。
4. 移動したフォルダを、Gitで管理できるようにコマンドを入力します。
   git init
5. プロジェクトを初期化します。
   npm init --yes
6. zenn-cliを導入します。
   npm install zenn-cli
7. Zenn用のセットアップをします。
   npx zenn init
8. articlesフォルダ内に「〇〇.md」とうファイルを作成します。
   npx zenn new:article
   ここで作成したファイルがブログ原稿になります。
9. プレビューします。
   npx zenn preview
10. フォルダ内のファイルをローカルリポジトリにコミットします。
    git add .
git commit -m "first commit"
11. 手順1-3で確認したブランチを作成します。
    git branch -M master main
12. ローカルリポジトリとZennと連携しているGitHubのリモートリポジトリを紐づけます。
    git remote add origin https://github.com/ユーザ/[作成したリポジトリ].git
13. ローカルリポジトリをリモートリポジトリに反映します。
    git push origin main

おわりに

取り急ぎの手順でした。
随時、画像や補足説明を追加していきます。