GitHub+Gitpodで記事を書いてみよう
Zennで記事を書いてみよう
最近始まった？プログラマー向けの情報のZennが日々のアイディア的な
Techメモを書くのに良さそうなので試してみようと思います。
GitHubと連携
ZennはMarkdown形式で書くことができます。
これだけで、ほかの記事公開サービスより使いやすいですが
せっかくMarkdownならば自分の好みのエディタで書けたほうがとても便利なのでGithubと連携をします。
管理画面の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の場合そういうストレスもないので
今後のアイディアだったり考察的な記事は
こちらに書いていこうかなと思います。
Discussion