気軽に投稿できるブログっぽいものを作った
なぜ作ったか
- 気軽にアウトプットできる場所が欲しかった
- 長文を書くのが苦手（頑張ればかけるけど気が重い）なので短文を連ねることで書きたかった
要件定義
作りたい、欲しいという気持ちが生まれたので要件定義をしていく
- markdownで書きたい
- ローカルでファイル生成したくない
- mdファイル書いてコミットしてビルドしてプッシュしてみたいな
- 1ファイルに書きたくない(真面目な文章で長文で書かないといけない感があるから)
- issue みたいに少しずつ書きたい
- Zenn のような独自記法に対応可能
- syntax highlight
- mathjax
- mermaid
- Twitter を埋め込む
- YouTube を埋め込む
- Google Analytics でアクセス解析
- CI で Lighthouse
類似のサービスについて
最近だとZennのScrapsが近い気がする
でも
Zennはエンジニアのための新しい情報共有コミュニティです。 誰かのために、自分のために知見を共有しましょう。
と書いてあり、技術情報以外にもクジラについて調べたこととか書きたいと思ったので合わなかった
あとは関係なく 作りたい があったので類似サービスはそんなに調べてない
技術構成について
要件定義でissueみたいに書きたいとある通り, Issue as a Blog となっている
完成した後に調べてみるとazuさんやmiyaokaさんが過去に考えたり作ってたみたい
- https://twitter.com/azu_re/status/969903462199713794
- https://qiita.com/miyaoka/items/1922d5d8528fe31016b9
本題
記事データについて
記事データ自体はGitHub Issuesに置いてる
各IssueにLabelを付与することで状態管理をしている
- posts: 投稿である
- pulished: 公開する
のような
将来的にはposts以外にも多分何かが増える
issueの最初の投稿には下記のようなfrontmatter的なものを作りこれを基にしている
---
date: 2021-07-18
tags: []
slug: hello-world
---本文に関してはissueコメントをつなげる形で記述している
画像も一応issueに貼ればGitHub側でホストしてくるけど最適化されないので当分は最適化後に貼り付ける予定
気が向いたらCloudinaryとかを使おうかと
サイトについて
11ty を使ってGitHub Actionsで静的に生成後、Firebase Hostingsにデプロイしている
11tyを使うのは初めてだったのでsosukesuzukiさんのblogを参考にさせていただきました。ありがとうございます！🙇♂️
今思うとデザインがかなり類似していて引っ張られてしまったなと少し反省しています
markdownのパース等はmizchiさんのamdxを参考にさせていただきました。ありがとうございます！🙇♂️
OGP生成に関してはretoruto-carryさんのshindan-chart-maker-ogp
を参考にさせていただきました。ありがとうございます！🙇♂️
mermaidをmdからsvgにするライブラリがあまり見つからず書きました。
mermaidはsvg内にstyleタグを持つのですが、それの重複が少し嫌だったのでclean-cssで最適化できるようにしました。
実装に関してサイトが簡素なこともあり基本的に詰まることはありませんでした。
(大した量もないのでhtmlをテンプレートリテラルで書いても大丈夫だろうと思ってたけど、最後の方は辛くてjsxで書きたい気持ちが強かったです)
できること
一般的にmarkdownでできることは網羅してあると思います
heading
heading 2
heading 3
heading 4
heading 5
heading 6
plain text
plain text
link
code block
const data = fetch("url");
console.log(data);math block
inline math
から までの総和は と表せる
todo
- task
- done
list
- 1
- 2
- 2-1
- 2-1-1
- 2-2
- 2-1
- 3
mermaid
quote
春眠不覚暁
処処聞啼鳥
夜来風雨声
花落知多少
— 孟浩然
summary
じつは...
image(horizontal)
https://unsplash.com/photos/BjgFMADAH-s
image(vertical)
https://unsplash.com/photos/yyH95Gx_Fqc
YouTube
編入終わったらしたいことリストです
— こばたけ (@kobakazu0429) July 10, 2021
誰か一緒にしよ！！！！ pic.twitter.com/iJFdlmjJDf
上記はこのように書くことで変換されています
## heading
# heading 2
## heading 3
### heading 4
#### heading 5
##### heading 6
## plain text
plain text
## link
[Google](https://www.google.co.jp)
## code block
\`\`\`js
const data = fetch("url");
console.log(data);
\`\`\`
## math block
$$e^{i\theta} = \cos \theta + i \sin \theta$$
## inline math
$1$ から $10$ までの総和は $\sum_{n=1}^{10} n$ と表せる
## todo
- [ ] task
- [x] done
## list
- 1
- 2
- 2-1
- 2-1-1
- 2-2
- 3
## mermaid
\`\`\`mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
## quote
> 春眠不覚暁
> 処処聞啼鳥
> 夜来風雨声
> 花落知多少
> — 孟浩然
## summary
<details>
<summary>じつは...summary>
<div>
僕の一番好きなお寿司はマグロです
div>
details>
## image(horizontal)
クリックすると拡大表示されます
https://unsplash.com/photos/BjgFMADAH-s
## image(vertical)
https://unsplash.com/photos/yyH95Gx_Fqc
## YouTube
https://www.youtube.com/watch?v=FR91CB5SBWU
## Twitter
<blockquote class="twitter-tweet" data-dnt="true"><p lang="ja" dir="ltr">編入終わったらしたいことリストです<br>誰か一緒にしよ！！！！ <a href="https://t.co/iJFdlmjJDf">pic.twitter.com/iJFdlmjJDfa>p>— こばたけ (@kobakazu0429) <a href="https://twitter.com/kobakazu0429/status/1413711067427983367?ref_src=twsrc%5Etfw">July 10, 2021a>blockquote>その他
一応 https://kaz.dev/posts/tags/ があってそこから絞り込めるようになってる
最後に
とりあえずは使えそうなものができたので良かったです
Lighthouseも満点だった気がする
今後の予定として下記のようなものを考えてる
- 不要な style の最適化
- 画像などの遅延ロード
- アクセシビリティの向上
- TypeScript, j(t)sx対応
- 画像の外部ホスト
- デプロイフローの改善
何かあればTwitterのDM等までお願いします！