
むかしからやってみたいと思いつつ、なかなか腰が重くて行動にうつせていなかった個人ブログ作成をついにやってみました！

Web フロントエンドにほとんどふれてこないまま今日まできてしまったので、どこかしら個人ででもフロントエンドっぽいことを多少なりやりたい・題材としてブログとかやってみたいなと常々おもっていました。
ただ根本的な問題としてブログを継続的に書けるタイプでもないので、作ってしまったはいいもののすでに持て余す未来がみえていますが、逆に場所があることで書くモチベーションがうまれるみたいなのも期待しています。

なんで急にやるきになったのかというと、完全にたまたまで、[Deno](https://deno.land/) を触ってみたい → [Aleph.js](https://alephjs.org/) なる [Next.js](https://nextjs.org/) inspired な SSG/SSR フレームワークがあるらしい → 触ってみるか → はまる → Next.js ではどうなってるんだろう？ → 気付いたら Next.js でブログつくってた、という経緯です。
Deno + Aleph.js は(まだまだ発展途上とはいえ)なかなか体験もよく、これはこれでもうちょっと触って記事にしたい & 結局 Next.js にした理由はいくつかあるのでなにかしら貢献できたら楽しそうだなと思っていたりします。

## 技術

Markdown でかいた記事を、 Next.js で SSG して [Cloudflare Pages](https://pages.cloudflare.com/) でホスティングしています。
スタイルは自分でかくのは苦手意識がすごかったので、 [Chakra UI](https://chakra-ui.com/) を採用しました。

最低限のスタイルは整えたつもりで、 Syntax Hightlight もきくし、スマートフォンのような端末でみてもそれなりに見れる感じにはなっているのではないかと思います。

```typescript
type Props = {
  tag: string;
};

export const TagLink: React.VFC<Props> = (props) => {
  const { tag } = props;
  return (
    <Link href={`/tags/${tag}`} padding="0">
      <Tag colorScheme="blue" variant="outline" padding="1" size="sm">
        <TagLabel>{tag}</TagLabel>
      </Tag>
    </Link>
  );
};
```

[remark](https://github.com/remarkjs/remark) で Markdown → HTML -> rehype -> React Component をやっています。一回 HTML を介する意味がない気がするのですが、試行錯誤のなりゆきでこうなってしまって特にまだ害もないのでこのままにしています。
Highlight は [Prism](https://prismjs.com/) です。

React Component にしているのは、コンテンツ部分も Chakra UI や `next/link` をつかうようにするためです。
Chakra UI は書き心地やメンダルモデルが Flutter とかにちかい感じでかけるのでだいぶ書きやすかったです。(僕が HTML & CSS 素人すぎるだけかもしれないです。なれているひとはこのテンションで HTML/CSS を書いてるんですかね)

RSS もむりやり対応しました。 https://blog.agatan.dev/feed.xml
`/pages/index.tsx` の `getStaticProps` で `/public/feed.xml` にファイルを書き出すという技をきめているのですが、ただしいやりかたなんでしょうか...

せっかくなので Google Analytics も導入してみました。
Next.js はそういう [サンプル](https://github.com/vercel/next.js/tree/master/examples/with-google-analytics) まで用意されていてすごいですね。

og も一応最低限は設定しました。

このブログは記事もソースコードも https://github.com/agatan/blog で管理しています。
なので各記事の最下部に GitHub 上の該当ファイルへのリンクを置いてみました。
なにか間違いを見つけたら PR ください。

ホスティングは最初は GitHub Pages にしようとおもったのですが、Netlify も Vercel も Cloudflare Pages もさわったことがなかったので、なにかしら新しいものに触れたくなり、ユースケース的にもぴったりだった Cloudflare Pages にのせることにしました。
デプロイまわりの設定がぽちぽちやるだけで一瞬で完了し、カスタムドメインをあてるのも異常に簡単で驚きました。

## 移行

記事がないとスタイルもよくわからないし、過去に書いてきたものもいくらかは集約させるかーと思い、Qiita/はてなブログ/Medium から内容をもってきました。
Qiita/はてなブログからの移行は Deno でちょちょっとスクリプトを書いておこないました。こういうのには便利ですね。

- [Qiita から記事を export する Deno スクリプト](https://gist.github.com/agatan/ce03732e03d3cae3a7e70b2ac62a0164)
- [はてなブログから export した MT ファイルを Markdown に変換する Deno スクリプト](https://gist.github.com/agatan/dd306e967c953739f41718ea44638c16)

はてなの方は HTML だったので結局このあと Python で HTML → Markdown を(多少変換を加えつつ)おこなうスクリプトをかきました。
Deno でやろうとおもったのですが、HTML → Markdown のよさそうなライブラリが見当らず、自分でかくほど労力をかけたくもなかったので。

いまのところ人生でいちばん書いているのは Python らしく、ぶっちゃけこういう書き捨てスクリプトは Python で書くのがいちばん速いです。
(Python の標準ライブラリが便利なのもわかっているし、良い言語だとはおもうのですが、個人的な好みとしては静的型検査がある言語がすきなので、書き捨て用の良い言語を探していたりします。Deno をさわりまくっているのもその一環です。このへんも雑談として記事にしたい。)

というわけでブログを作ったという話でした。
つづくかはわかりませんが、転職して(終盤はコロナで前職もリモートでしたが)リモートベースになったのもあって技術的なトピックについてグダグダと話す機会がへっているので、知見未満の雑談っぽい内容をかいてみるのもよいかなーとおもっています。


個人ブログをつくりました


### 追記 (2021.07.14)

[Obsidian](https://obsidian.md/) に移行しました。
追記ここまで。

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Dropbox">Dropbox</a> Paper と <a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Keep を併用してメモとかを取っていた．
長期的な記録とか人に見せうるもの，長めの文章は <a class="keyword" href="http://d.hatena.ne.jp/keyword/Dropbox">Dropbox</a> Paper に，
一時的なメモとかリマインダ的なものは Keep に，
と使い分けていた．</p>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Dropbox">Dropbox</a> Paper すごく好きだったんだけど，</p>

<ul>
<li>なんか重い気がする</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/WYSIWYG">WYSIWYG</a> なので <a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> で書いているつもりでもちょこちょこ変なことが起きる

<ul>
<li>バッククオートをおした時の挙動とか</li>
</ul>
</li>
<li>ブラウザでしか開けない</li>
</ul>

<p>というのが使いにくく感じてしまった．
基本的にグループで使うものだと思うので，僕は使わない機能がいっぱいあるなぁという感じもした．</p>

<p>Keep は Keep で好きだし，使い分ければそんなに嫌なこともなかったので続投したい．
その上で，長期的に残しておきたいメモやノートを書くサービスを探してみた．</p>

<h1>ほしい要件</h1>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> で書ける</li>
<li>端末間同期</li>
<li>画像を D&amp;D で貼れる &amp; 保存できる</li>
<li>グループ分け．<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リを切るくらいの機能で十分</li>
<li>Archive</li>
<li>検索</li>
<li>ブラウザ以外のアプリケーションとして閲覧できる

<ul>
<li>別に Electron でもなんでも良いけど，ブラウザとは独立したアプリケーションとして動いて欲しい</li>
</ul>
</li>
<li>mobile app</li>
<li>細かい一時的なメモを取るのは keep.<a class="keyword" href="http://d.hatena.ne.jp/keyword/google">google</a>.com でやる</li>
<li>ToDo もいらない</li>
</ul>

<h1>比較</h1>

<h2><a href="https://dropbox.com/paper">Dropbox Paper</a></h2>

<h3>Pros</h3>

<ul>
<li>サービスの大きさ・信頼性</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> + <a class="keyword" href="http://d.hatena.ne.jp/keyword/WYSIWYG">WYSIWYG</a> なエディタであること</li>
<li>人にパッと見せられるくらいキレイにメモがとれる</li>
<li>presentation mode（個人で使ってたらあんまりいらないかも）</li>
</ul>

<h3>Cons</h3>

<ul>
<li>重い...</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/WYSIWYG">WYSIWYG</a> であること</li>
<li>ブラウザでしか開けない</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> で書いているのに <a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> として export すると微妙に modify されている...</li>
</ul>

<h2><a href="https://keep.google.com/">Google Keep</a></h2>

<h3>Pros</h3>

<ul>
<li>さくさく</li>
<li>シンプル</li>
<li>リマインダとの連携とか</li>
</ul>

<h3>Cons</h3>

<ul>
<li>長期的に残しておきたいドキュメントとかノートを書くためのものではない</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> で書けない</li>
</ul>

<h2><a href="https://evernote.com/">evernote</a></h2>

<p>お金は払う前提で考える</p>

<h3>Pros</h3>

<ul>
<li>圧倒的コミュニティ．連携の広さとか tips が転がりまくっている．</li>
<li>web clip とかちょっとした pdf や画像をポンポンぶち込んでおける</li>
<li>短いメモみたいなものも躊躇なくいれておけそう</li>
</ul>

<h3>Cons</h3>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> が使えない問題がでかい</li>
<li>長めの文章を書く感じじゃなさそう</li>
<li>機能が多すぎてごちゃつきそうというイメージもある</li>
</ul>

<h2><a href="https://boostnote.io/">Boostnote</a></h2>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/OSS">OSS</a> になっているエディタで，<a class="keyword" href="http://d.hatena.ne.jp/keyword/dropbox">dropbox</a> みたいな外部<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>ストレージを使って同期をはかるやつ．</p>

<h3>Pros</h3>

<ul>
<li>UI</li>
<li>要件はほぼ満たしている</li>
<li>外部ストレージを使っているので，サービス停止のリスクは外部ストレージに依存する

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/dropbox">dropbox</a> / <a class="keyword" href="http://d.hatena.ne.jp/keyword/google%20drive">google drive</a> / one drive とか代替も結構あるのでサービス停止を気にする必要がなさそう</li>
</ul>
</li>
</ul>

<h3>Cons</h3>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Dropbox">Dropbox</a> などのストレージを圧迫する</li>
<li>Boostnote 独自のフォーマット（フォーマットとしては cson だけど）で保存されるので，別に外部ストレージにそのまま md が吐かれるとかではない

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> として export はできる</li>
</ul>
</li>
</ul>

<h2><a href="https://www.inkdrop.info/">Inkdrop</a></h2>

<h3>Pros</h3>

<ul>
<li>UI</li>
<li>要件は満たしている</li>
<li>status と tag 機能は便利そう．</li>
<li>一番普通に整理が出来る構造になっている気がする</li>
<li>Data <a class="keyword" href="http://d.hatena.ne.jp/keyword/Access">Access</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> が使える</li>
</ul>

<h3>Cons</h3>

<ul>
<li>個人開発なのでサービス停止がこわい

<ul>
<li>とはいえ <a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> なので移行は容易い</li>
</ul>
</li>
</ul>

<h1>結論</h1>

<p>要件を満たしているといえるのは Inkdrop と Boostnote くらいだろうか．
Boostnote よりも Inkdrop のほうが first impression では好みだった．
とりあえず 60 日 free なので Inkdrop を使ってみる．
今この文章も Inkdrop 上で書いている．普通に <a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> を書けばいいのでまあ書くのは楽．</p>

---

---


↗ agatan blog ↗

#雑談

個人ブログをつくりました

個人のメモ・ノートを保存するサービス選び