😸

GitHub+Gitpodで記事を書いてみよう

2 min read

Zennで記事を書いてみよう

最近始まった?プログラマー向けの情報のZennが日々のアイディア的な
Techメモを書くのに良さそうなので試してみようと思います。

GitHubと連携

ZennはMarkdown形式で書くことができます。
これだけで、ほかの記事公開サービスより使いやすいですが
せっかくMarkdownならば自分の好みのエディタで書けたほうがとても便利なのでGithubと連携をします。

alt

管理画面のDeply画面から、自分のGithubのリポジトリを指定することができます。
ので、とりあえずここで自分のリポジトリを指定しました。
(非公開でもOK)

これで、GithubでMarkdownを管理できるので、Mkdocsと変わらずVSCodeで記事をもりもり書くことができます。

Gitpodを使う

これでもOKですが、記事の場合はいちいちVSCodeにCloneしてきてPushしなければいけないのは
ややめんどくさい。
(家でがっつり書く場合は問題ないけど)

ので、クローム上でVSCodeとおないようなGUIで使えるエディタが使える Gitpod というサービスがあるので
それを入れてみます。

使い方は簡単で、
Gitpodの登録をしてから Chromeの拡張を入れて

Githubのページにある「Gitpod」を押すと、Gitpodで開くことができます。

見た目はほぼVSCodeです。
拡張も全部ではありませんが使うことができるし、Githubとも簡単に連携できるので十分の機能です。

Shortcutを使えるようにする

Gitpodを使うときの注意点としては、デフォルトだとショートカットがChromeのショートカットになってしまい
正しく使用できません。
ので 専用のアドインを使用することでショートカットがきくようにしています。

記事を書く

あとは記事を書くだけです。

あとは、articlesフォルダに num-name.md の形でmarkdownを作成します。

---
title: "GitHub+Gitpodで記事を書いてみよう" # 記事のタイトル
emoji: "😸" # アイキャッチとして使われる絵文字(1文字だけ)
type: "idea" # tech: 技術記事 / idea: アイデア記事
topics: ["Zenn"] # タグ。["markdown", "rust", "aws"]のように指定する
published: true # 公開設定(falseにすると下書き)
---

ヘッダ部分に必要な項目を追加して、
あとは普通のMarkdownと同じように記事を書いていきます。

画像の挿入については、公式に画像のアップローダーもあるのですが
それだとめんどくさいのでMkdocsと同じようにGyazoを使用していきます。

注意点

Gitpod

試しにこの記事をGitpodを使用して書いてみてるのですが、いくつか注意点があります。

GitpodはほぼVSCodeですが、拡張には使えないものがあります。
例えばEmacs関連のキーバインド拡張。
私はVSCodeはEmacsキーバインドなので、これが使えないだけでストレス度が高いです。

Zenn CLI

GitpodでもZennCLIを使えないかとコンソールからインストールを試みましたがうまくいきませんでした。
使いどころはNewする時ぐらいなのでなくても問題ないですが
使えたらさらに良かったなと思います。

日本語問題

Gitpodでの日本語入力がいろいろ誤爆するらしく、若干ストレスがあります。

まとめ

慣れないところもありますが、
記事を書くのであればやはりMarkdown+好きなエディタが一番良いので
このZennでの記事作成はとても満足です。

ちょうどサービスを検討していて
noteやFanBoxなどためしてみたものの、やはりあのブロック形式の記事作成は
苦手でうーん...になっていました。

が、Zennの場合そういうストレスもないので
今後のアイディアだったり考察的な記事は
こちらに書いていこうかなと思います。

GitHubで編集を提案

Discussion

ログインするとコメントできます