初めてのzenn
初めてのzenn
zennのアカウントを取得したので、zennの最大の特徴でもあるGitHub連携をやってみました。
GitHub連携する
こちらを読みながらGitHubと連携します。
連携したら、ローカル側を準備します。
$ mkdir zenn-contents
$ cd zenn-contents
$ git init
$ git branch -M main
$ git remote add origin git@github.com:xxxxxxxxxxxxxxxx/xxxxxxxxxxx.git
あとは好きなマークダウンエディッタでローカルで書いたら、コミットしてプッシュするだけ・・ですが、プッシュするとその時点で公開されちゃうと思われるのでその前にローカルでもプレビューが確認したいところです。
そして、こういうときは開発元が想定しているお作法に則っておいた方が色々と問題は起こらないものです。
Zenn CLIを導入する
ということで、Zenn CLIの導入手順を見ながらCLIを導入します。
$ npm init --yes
$ npm install zenn-cli
$ npx zenn init
作成されたarticlesというディレクトリにmdファイルを置いていけばいいらしいです。
記事を書く
とりあえずファイル名はyyyy-mm-dd-??.mdとしてこの記事を書いてみます。まぁ連番は2桁もあれば大丈夫でしょう(1日に100件以上も記事書くとか無理w)。
エディッタは最近はtyporaをよく使ってます。
プレビューを確認する。
以下のコマンドを実行すると、http://localhost:8000でプレビュー用のサーバが起動するのでそこにブラウザで接続します。
$ npx zenn preview
Windowsだと以下のようにファイアウォールの設定を聞かれると思うので、許可しておきます。
表示されましたが、いくつか修正が必用と表示されます。
記事の書き方にお作法があるようですので、リンク先を確認します。おっと、最初にCLIでひな形を作るんですね。次回から気をつけます・・・。
今回はファイルの先頭に以下を手動で足します。絵文字は何がいいかピンとこないので(笑)、例の通り猫にしてみます。
---
title: "初めてのzenn"
emoji: "😸"
type: "tech"
topics: ["zenn"] # タグ。["markdown", "rust", "aws"]のように指定する
published: true
---
修正したらプレビューを確認します。ファイルをセーブしたらリロードも不要なようです。
修正の指摘が消えてますね。これで良さそうです。
記事を公開する
記事を公開します。gitリポジトリにプッシュすればOKです。今回は初回なので
$ git add ./
$ git commit -m 'create my first article'
$ git push -u origin main
でプッシュされます。
実際公開されてるか確認してみましょう。
無事公開されてました！
まとめ
というわけで、練習もかねて「GitHubと連携してzennの記事を書く手順」を最初の記事として書いてみました。
次回からは最初に
$ npx zenn new:article
でスタートするようにします(笑)
Discussion