🦔

Zenn+GitHub連携 環境構築手順

commits2 min read

概要

Zenn始めました!!
GitHub連携の記事は色々あるのですが、Gitを使用したことなかったりWindowsで環境を構築したこともあってもう少し詳しい記載が欲しいと思いました。
記述不足だと感じた点を備忘録としてまとめておきます。

動作環境

OS : Windows10 Pro 20H2
Node.js : 16.13.0
Git : 2.34.0.windows.1

GitHubのインストール

公式手順のGitHubリポジトリでZennのコンテンツを管理するに記載のない内容を捕捉します。

  1. GitHubのアカウントを作成する

  2. リポジトリを作成する

    公開設定は記事を管理するリポジトリであればPublic、本を管理するリポジトリはPrivateを設定する

  3. QuickSetupに表示されるリポジトリのURLリンクを記録しておく
    リポジトリのURL

    リポジトリのQickSetupや既存のリポジトリを利用するためのコマンドラインが表示されるが、ここでは何もする必要はない。

  4. ダッシュボードから連携する

Gitのインストール

  1. 【Windows】Gitの環境を構築しよう!の2章まで実施する
  2. Zennを管理するフォルダを作成する
    エクスプローラからでもGitBashからのコマンドラインからでもどちらでも構いません。
    コマンドラインの場合はcdコマンドでディレクトリを移動し、mkdirコマンドでフォルダを作成します。
  3. GitBashで作成したフォルダに移動し、下記のコマンドを実行する
    XXXにはリポジトリのURLリンクを記載し、YYYはリポジトリ名となる
    git clone git@github.com:XXX.git
    
    cd YYY
    npm init --yes
    npm install zenn-cli
    npx zenn init
    

コンテンツを管理する

記事を投稿する

  • GitBash
    下記のコマンドを実行し、リモートリポジトリにデプロイする(記事を投稿する)

    git add XXX.md
    git commit -am 'コメント'
    git push
    

    GitHubのリポジトリにアクセス時に「remote: Support for password authentication was removed on August 13, 2021.」が発生する場合
    https://note.kiriukun.com/entry/20210904-github-password-authentication-was-removed

    GitHubのリポジトリにアクセス時に「AggregateException」が発生する場合
    https://qiita.com/horsewin/items/fdf2fb9092b4092fcc34

    ローカルのプレビューでは画像が表示されるが、本番環境では画像が表示されない場合
    本番環境では、ファイル拡張子の大文字小文字を区別しているため、拡張子が小文字になっているか確認してください

    GitHubへのPushはできるが記事が更新されない
    ダッシュボードのDeploysから手動デプロイを実行してください。
    また、この際デプロイ対象のブランチとGitHubのブランチが一致するか確認してください。

  • GitHub Desktop
    コマンド操作はできる限り避けたい人はGUIツールも提供されています。
    GitHub Desktopのインストールから使い方まで徹底解説!を参考にしてみてください

GitHubで編集を提案

Discussion

ログインするとコメントできます