🤖
VScodeでのzennの記事の書き方メモ
久しぶりに記事を書こうとすると忘れてるので備忘録
前提としてgithubにzennのリポジトリは作っている状態とする
記事作成の流れ
- githubからVSCodeに環境をコピー（clone&pull)
- 記事をコマンドで作成
- コミットする(コミットしてプッシュ)
githubを使って記事を作成する
参考 https://zenn.dev/eguchi244_dev/articles/github-zenn-linkage-20230501
まずはgithubからローカル環境にコピーする
そのやり方としてクローンとプルがある
とりあえずクローンしとく
$ git clone リポジトリのURL
記事作成のコマンド
記事はnpx zennコマンドで作成する
slugはここで決定する。誰かと被るとエラーになるので、末尾に日付などをつける
プレビュー機能はとても便利。
記事作成
$ npx zenn new:article --slug 英小文字数字と_-でslugを決める --title タイトルは日本語でおｋ
プレビュー
$ npx zenn preview # プレビュー開始
zenn-docs配下(articleにcdせずに)でコマンド実行する
記事の編集をする
- ファイルを編集
- コミット用コメントを書く
- 「コミットしてプッシュ」を選択
画像の配置
画像の配置場所
にアップロード
/images/に配置する方法もあるが、アップロードした方が簡単なのでこちらを採用
画像ファイルの制限
- ファイルサイズは 3MB 以内
- 対応する拡張子は .png .jpg .jpeg .gif .webp のみ
画像ファイルの参照方法
アップロードするとURLがコピーできるようになるのでそちらを参照
)
記事の消し方
- ファイルを消してコミット
-
ダッシュボードから削除する
安全のため、articlesディレクトリからmarkdownファイルを削除しても zenn.dev 上では削除はされない。
マークダウン方式
基本的にはこちらを参考に
良く使うものを以下に記載
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
プログラムやコマンドの書き方
```プログラムのスタート
プログラムの終わり```
リスト
- Hello!
- Hola!
- Bonjour!
* Hi!
- Hello!
- Hola!
- Bonjour!
- Hi!
番号付きリスト
1. First
2. Second
- First
- Second
テキストリンク
[アンカーテキスト](リンクのURL)
画像
=250x はサイズを指定している。px単位
（指定しなくてもいい。）
Discussion