Zenn
✨

Zenn入門 GitHubリポジトリをZennに連携させる【前編：環境構築】

2021/04/03に公開
2件
Git
Zenn
tech
変更履歴

2021/3/31 初稿
2021/4/12 タイトル、記事を2部構成に大幅変更（前編：環境構築、後編：Git入門）
2021/8/9 Gitインストールは後編に変更

はじめに

Gitを学ぶきっかけ

私は、Zennで技術記事を投稿したいと思い、Zennのコンテンツ作成ガイド を見て投稿方法を学ぼうと思いました。

作成ガイドを見ていくと、投稿方法には2種類あることが分かりました。

  1. Web エディター
  2. ローカルのテキストエディター + CLI（GitHub連携)

Webエディターの方が今の自分には合ってるけど、ドラフト記事の状態で編集するのはスマートじゃないなあ。元に戻すの面倒だし、、やっぱローカル環境で作業確認してから投稿すべきだろうなあ

周りのヤングなエンジニアみてるとGitでバージョン管理するのが普通っしょみたいな雰囲気。。

よし！　これを機にGitを学んで、オッサンもエンジニアの会話に入れてもらおう！
という思いから２．ローカルのテキストエディター + CLI（GitHub連携)を選択しました。



でも、、、投稿するまでの道のりは簡単では無かった(ToT)　私にとってはですが、、、

これから2回わたってGitHubを連携させてZennに記事を投稿する手順を説明します
自己流なので、もっと良い方法があれば教えて頂けると嬉しいです。

【前編：環境構築】
　　1. インターネット公開用の環境構築（GitHub登録とZennへの連携）
　　2. ローカル環境構築(Zenn CLIのインストール)

【後編：記事投稿(Git)】
　　3. Gitインストール
　　4. Gitコマンドによる投稿手順(add,commit,remote,push)


概要図
概要図

Zennの投稿には興味無いんだよね～、またGit環境も構築済みなんだよね～

という方は、後編：記事投稿(Git)にスキップして下さい。

1. GitHub登録とZennへの連携

早速、GitHubサイトで自分のリポジトリを作成し、そのリポジトリをZennに連携する作業を行いましょう。

リポジトリって何？の方はこちら

リポジトリ(repository)とは、ファイルやディレクトリの状態を記録する場所のことです。
単純に言えば、自分の作業場（作業記録）を作ると思えばいいでしょう。

■参考：サル先生のGit入門
https://backlog.com/ja/git-tutorial/intro/02/

1. GitHub登録とZennへの連携
1.1 GitHub登録 → 1.2 Zennへの連携

1.1 GitHub登録

GitHubにアクセスして、GitHubに登録するをクリックしましょう。

GitHub公式サイト https://github.co.jp/

1.1 GitHub登録-1GitHubサイト

すると、アカウント登録画面が出てくるので
Username, Email, Passwordなどの必要な情報を入力してCreate Accountをクリックしましょう。
1.1 GitHub登録-2アカウント登録

Welcome to GitHubなどの画面で、主にどんな仕事してますか？と質問が来るけど、どれでもOK
（例： Software Engineer)
登録したメールアドレスで認証すればOK。

次にリポジトリの登録です

私は、下記の3つを記載してCreate repositoryをクリックして作成しました。

  • Reposigtory name : zenn-content
  • Description : Zenn連携用のリポジトリです (Optional)
  • Public / Private : Public

1.1 GitHub登録-3リポジトリ作成

リポジトリが完成しました。

1.1 GitHub登録-完了

1.2 Zennへの連携

では、1.1で作成したリポジトリをZennのダッシュボードと連携してみましょう。

Zennダッシュボードサイトにアクセスして下さい

Zennのダッシュボード https://zenn.dev/dashboard/deploys

リポジトリを連携をクリックしてください。

1.2 Zennへの連携-1連携クリック

1.1で作成したリポジトリを選択して連携しましょう。

手順は以下の通り

  1. Only select repositories を選択
  2. Select repositoriesのプルダウンから1.1で作成したリポジトリを選択
  3. Install & Authrize をクリック
    1.2 Zennへの連携-2リポジトリの選択

Github-Zenn連携が完成！！

やりました！　これであなたの記事を投稿する場所ができました(^o^)/~
Githubに投稿すればZenn上で記事が見えるようになりましたよ。
1.2 Zennへの連携-3完了

でも、
書きかけの記事は途中で公開したくないあ。。。
自分のPC上で記事の事前チェックしたいなあ。。
と思いますよね。

2. ローカル環境構築(Zenn CLIインストール)で自分PC上で確認できるZennローカル環境構築の仕方について説明します。

2. ローカル環境構築(Zenn CLIインストール)

2-01-ローカル環境構築

2.1 Zenn CLI (Node.js) インストール

まずは、Zenn CLIというツールをインストールしましょう。
インストールすると、編集中の記事ファイル（hello-zenn-world.md)をChromeなどのブラウザでhttp://localhost:8000と入力するだけで、Zennサイト投稿のプレビュー画面を確認できるようになります。

Node.jsのインストール確認
Zenn CLIはNode.js製のアプリケーションだそうです。
自分のPCにNode.js環境がインストールされているかコマンドプロンプトで確認しましょう。

$ node --version

バージョンが出てきたらOKです。
Node.jsのバージョン確認

Node.jsをインストールしていない方へ

Zenn CLIはNode.jsという言語で作成されているため、Node.jsもあらかじめインストールするしないとだめらしいっす。
下記サイトからインストールしましょ。
https://nodejs.org/ja/download/

ちなみに私は 2021/3/9 に推奨版の14.16.0 LTS　をインストールしました。


Zenn CLIのインストール
コマンドプロンプト上でZenn投稿用の作業フォルダーに移動して、下記コマンドを実行してください

$ npm init --yes            # プロジェクトをデフォルト設定で初期化
$ npm install zenn-cli      # zenn-cliをインストール

npm initの実行結果
init実行

npm installの実行結果
install実行

2.2 ZennCLI初期設定

2.1の作業フォルダー上で、Zennの初期設定コマンドを実行してください。

$ npx zenn init      # Zennの初期設定

これで記事、本を格納するための必要なファイルができあがります。

README.mdや.gitignoreのほか、articlesとbooksという名前のフォルダーが作成されます。この中に投稿用のマークダウンファイル（◯◯.md）を入れていくことになります。

実行結果はこんな感じ
zenn初期化


2.3 Zenn Preview画面の起動

下記コマンドでPreview画面を起動します。

$ npx zenn preview

ブラウザで動作確認
Chromeなどのブラウザで下記を入力してください

http://localhost:8000/

おめでとうございます！

ローカル環境作業は終了しました。
下記画像のようにZenn Editorの画面が表示されていたらOKです。
最終確認

次回以降のZenn Editor起動

作業フォルダーで2.3 Zenn Preview画面の起動を行えばZennCLIで事前確認ができます。

最後に

ZennCLIはとても便利、投稿記事のマークダウンファイル(xxx.md)をVS Code上で保存すれば
即時にその結果が確認できるからです。みなさまも是非トライしてみてください。

次回は、いよいよ投稿記事作成からGitを使って記事投稿するまでの手順を説明します。

さいごに

技術記事を書くのって楽じゃないですね。早く下記の記事を投稿したいです。
後編を夏休み中にアップしますのでもう少しお待ちください。

参考サイト

Discussion