ローカルPCのエディタで作成した記事をZennにアップロードしてみた
ローカルPCのテキストエディタを使ったZennに記事をアップロードしようと思って、つまづいた点や調べた点を記載します。
概要を説明すると、ZennとGithubリポジトリを連携しただけでは簡単に記事は投稿できず、Zenn CLIのインストールが必要でした。
ただ、Zenn CLIをインストールすれば簡単に記事を投稿することができました。
公式ドキュメントをしっかり読んでから、進めればよかったのですが、読まずにとりあえず手を動かしながら進めたためか、余計に躓いてしまいました。
ZennとGithubリポジトリを連携しただけでは記事を投稿できなかった
以下の記事を参考にZennとGithubを連携しました。
連携してリポジトリ配下にマークダウンのファイルを置いたらエラーが発生した
マークダウンの記事を置いたら、何かしらの記事がアップされると思い、マークダウンのファイルを置いてGithubリポジトリ連携を置きました。
連携設定後、以下のようなメッセージが表示されました。
articlesディレクトリが見つかりませんでした
Github連携すると以下エラーが表示されて指定のフォルダにファイルをマークダウンファイルをおく必要があるらしい
メッセージ通り、articleフォルダの配下にファイルをおいた。
articles/test.mdはslugが不正です
アップロードするファイルはフォーマットに従う必要があり、フォーマットが違うとエラーが表示されました。
Zen CLIを使って記事を投稿する
Githubリポジトリの連携手順の記事を確認すると、Zenn CLIを利用した方が、ファイル作成やプレビューが簡単にできるらしい。
※CLIなしでも記事は作れるがZenn CLIを利用すれば記事用のファイルやフォルダ構成を気にしなくてよさそう。
Zenn CLIをインストールする
Zenn CLIをインストールするをみながら、Zenn CLIをインストールします。
Zennのコンテンツを管理したいディレクトリで、インストールする必要があるので気をつけてください
Zenn CLIで雛形を作成する
Zenn CLIで記事・本を管理する方法を見ながら、記事を書くための雛形を作成しました。
Zenn CLIでプレビューモードを起動した時に見られるガイドが記法についてや、画像の上げ方など参考になった
テキストエディタを使って記事を書く
Zennはマークダウンで記事を書きます。記法はZennの記事ZennのMarkdown記法一覧に公開されています。
テキストエディタはVisual Studio Codeを使いました。
画像をアップする
画像もGithubリポジトリに置いて、同期する方法がありましたが、今回はZennnに画像をアップしました。
終わりに
無事にこの記事がアップロードできました。
もう少し、スムーズにアップできるように研究を重ねようと思います。
Discussion