Zenn
🗒️

GitHub Codespaceを利用して、Zennの記事を書く

2023/06/25に公開
GitHub
Zenn
Codespaces
tech

概要

  • GitHub Codespacesを使って、ブラウザのみでZenn記事を作成する方法

動作確認環境

  • PC
    • iPad Pro 12.9インチ（第3世代）
  • ブラウザ
    • Chrome

方法

事前準備

  1. GitHubのWebページからリポジトリを作成する
    • リポジトリ名はなんでも良い (例：zenn-content)
    • Add .gitignore で、Nodeを選択する
  2. GitHub Codespacesから上記のリポジトリを選択して、編集画面に移動
  3. GitHub Codespaces上のTERMINALで、Zenn CLIをインストール

    1. 左上のメニューから「Terminal」>「New Terminal」でTERMINALを開く

    2. 下記コマンドでZenn CLIをインストール

      npm install zenn-cli

    3. Zenn CLIの初期化

      npx zenn init

記事の作成

  1. リポジトリ内のトップディレクトに移動して、下記コマンドで新規記事の作成

    npx zenn new:article

    自動的にarticlesフォルダとその配下にランダムな名前の入った記事のテンプレートが生成される。
    下記のようになっていれば成功

    .
└─ articles
   └── {xxxxxxxxxxxxxx}.md
    • {xxxxxxxxxxxx} は14文字のランダムな英数字

    その他のオプションなどは、Zenn公式サイト：CLIガイドを参照

  2. 記事を作成

    上記のマークダウンに記事を作成する。

  3. 記事のプレビュー表示

下記のコマンドでブラウザ上から記事のプレビュー表示が可能。

npx zenn preview

Codespacesの右下にブラウザで開くかの表示が出てくるので、クリックするとブラウザ上でプレビュー表示される。

終了したい場合は、Ctrl + c キーで終了。
(注意：iPadの場合も、commandキーではなく、controlキー)

Tips

画像のアップロード

Zenn公式サイト：GitHubリポジトリ連携で画像をアップロードする方法を参考。
Github Codespacesのimagesフォルダへのアップロードは、アップロードしたいimages配下のフォルダを右クリック(タッチの場合は、長押し)して、Uploadから画像を選択してアップロードする。

画像のサイズを変更したい場合

画像パスの後ろに、半角スペースを入れてから、=OOOxを指定する。
例：300xの場合

![](/images/{path-to
image-folder}/sample-image.png =300x)

詳細は、ZennのMarkdown記法一覧を参照。

記事の公開

記事の上部にあるヘッダ部分の、「published: false」を「published: true」に変更して、GithubへPushする。

---
title: ""
emoji: "🐕"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: []
published: true
---

トラブルシューティング

Codespacesでキーボードが効かない

原因

対策

  • Codespaces上で、別のアイコンなどを選択して、画面を一度切り替える
  • 【参考】上記issueで紹介されている解決方法ではうまくいかなかった

参考

Discussion