easy-notion-blogがついに40スターに達した

📅 2022-08-19

Community

easy-notion-blogがついに40スターに達した

振り返り Contributor

🔄 2023-03-14

最近easy-notion-blogのスター数の増加スピードについていけていないへろほろです。

ついこの間30かと思っていたら….

おめでとうございます〜〜〜＼(^o^)／＼(^o^)／

私なりに急に感慨深くなってきまして…..

easy-notion-blogをForkしてから体験できたことを

振り返りたくなり記事にしてみました。

Forkする以前の私

easy-notion-blogに出会う以前、

「プログラミングの勉強したい。けど目的がない！どうしよう…」

という悩みを抱えながら過ごしていました。

そんな時期に、なんとなくのKaggle。

Kaggleは…..データ分析をするコンペ。

世界規模。

国内のコンペであるsignateでは練習コンペをワイワイ楽しむ程度だったので、

いざKaggleを覗いてみると別世界。

まずはトレーニングが必要だと察し、

無料で学べるKaggle Courseを進めていました。

３つの講座を終えた後…..

【頑張らなくても熱中できること】

を発見したんです。

それが『Notionで手順書を作ること』でした(´・ω・｀)

お節介は私の特性

ある日お友達とNotion上で勉強ネタのやり取りしていた時、

「はじめてMac買ったんだけど便利ワザあったら教えて〜」

といったコメントが。

それを見るやいなや

紙をiPhoneでスキャンしてAir dropでMacに飛ばしてそこからPDFのサイズを調整する…

といった手順をNotionで作成してシェアしました。

もう衝動的な行動だったのでなんでそんなことをしたのか覚えていません。

ただの【お節介】というやつです。

https://sparkling-cinnamon-3f9.notion.site/iphone-ipad-pdf-mac-e2054d2cec8b4dcfbbe85183bfe31a9e

これが楽しかった。

「〇〇教えて！」

って言われたら元教員の血が騒ぐわけです。

Notionはintegrationが公開された頃から使っていたので….

2021/05 頃から愛用していました。

勉強・読書・講座・野望…..

思い付いたことをそのままメモしてデータベースに収納。

別件で開いた時に頭の中が整理されていれば修正して整理整頓していく。。。

そんな感じで使い続けていたNotion。

『自分だけでなく他の人にも役に立つ内容にできたら面白そう』

そう思ったのが2021/11 頃でした。

ただ公開設定をしてもあんま広まらない。

じゃ、ブログしかない……

ということでGitHubを探すものの

中々使いこなせるリポジトリが見つかりませんでした。

easy-notion-blogを発見「信頼できるぞ」

当時公式APIでのリポジトリが少なく、

README通りに進めてもなかなかdeployまでたどり着けず

涙目になっていたところアルパカ先生のZennの記事に出会いました。

🦙

Notion Blog が簡単に始められる easy-notion-blog の紹介

アルパカ先生のブログへ飛び、

notion-blog関連の記事を全て読み…..

https://alpacat.com/blog/tag/Notion Blog/before/2021-11-30

Notionの公式APIについての

詳しい解説をしている記事が

少なかった時期に、

ここまで記事数を投稿されていることに驚かされました。

「….この人が作ったリポジトリなら安心して使えるかも」

そう感じました。

日付に注目して遡ると…..

公式APIが発表されてすぐに使いはじめているんです。

この早さに私は絶大な信頼感を抱きました。(今となってはこの感覚が正しかった)

＼(^o^)／

私がeasy-notion-blogをForkしたのは2021/12/10。

Fork数が一桁。

スター数も一桁。

たしか4人とかだったかな…….….…

ブログを改造できると勘違い

カスタマイズしたくなったら、私のブログの Notion Blog カテゴリ
で様々なカスタマイズ方法を解説していますのでぜひ参考にしてください。

https://zenn.dev/otoyo/articles/38e4092927f7c1

この部分を私はなんの疑いもなく真に受けてしまいます。。。。。😂

５ヶ月ほど経ってアルパカ先生が投稿された記事で…..

以前からOSS(オープンソースソフトウェア) を作ったことはありましたが、
それらは全て職業エンジニア向けのものでした。
easy-notion-blog を作ったのは Zenn にも書いた通り Notion Blog が使いたかったからと、それが楽しかったので自分だけの体験にしておくのはもったいないと思ったからでした。
easy-notion-blog を公開した当初は「OSSなのだから使える人だけ使えれば良い。よってサポートはしない」というスタンスでした。

easy-notion-blog v0.7 アップデート内容の紹介

職業エンジニアでもない私がズケズケと参上してしまったが故に

アルパカ先生までも巻き込んでしまっていた事実を知りました。

なんとお礼を言っていいのやらです(´・ω・｀)

でも、さすがにCloud Runは止められましたwww

プログラミングの難易度を理解できていないってある意味無敵ですwww

当時の私は解説記事さえ見つけられれば実装できるもんだと思い込んでいたのだから恐ろしい( ﾟдﾟ)ﾊｯ!

立ち会えたeasy-notion-blogの開発過程

Forkしたばかりの頃の記事一覧ページのコードはcomponentがほぼ無い状態でした。

<Header path="/blog" titlePre="" />
      <div className={`${blogStyles.flexContainer}`}>
        <div className={`${sharedStyles.layout} ${blogStyles.blogIndex}`}>
          {posts.length === 0 && (
            <p className={blogStyles.noPosts}>There are no posts yet</p>
          )}
          {posts.map(post => {
            return (
              <div className={blogStyles.postPreview} key={post.Slug}>
                {post.Date && (
                  <div className="posted">📅&nbsp;&nbsp;{post.Date}</div>
                )}
                <h3>
                  <div className={blogStyles.titleContainer}>
                    <Link
                      href="/blog/[slug]"
                      as={getBlogLink(post.Slug)}
                      passHref
                    >
                      <a>{post.Title}</a>
                    </Link>
                  </div>
                </h3>
                <div className={blogStyles.tagContainer}>
                  {post.Tags &&
                    post.Tags.length > 0 &&
                    post.Tags.map(tag => (
                      <Link
                        href="/blog/tag/[tag]"
                        as={getTagLink(tag)}
                        key={`${post.Slug}-${tag}`}
                        passHref
                      >
                        <a className={blogStyles.tag}>🔖&nbsp;&nbsp;{tag}</a>
                      </Link>
                    ))}
                </div>
                <p>{post.Excerpt}</p>
                <Link href="/blog/[slug]" as={getBlogLink(post.Slug)} passHref>
                  <a className={blogStyles.expandButton}>Read more...</a>
                </Link>
              </div>
            )
          })}
          {firstPost.Date !== posts[posts.length - 1].Date && (
            <div className={blogStyles.nextContainer}>
              <hr />
              <Link
                href="/blog/before/[date]"
                as={getBeforeLink(posts[posts.length - 1].Date)}
                passHref
              >
                <a className={blogStyles.nextButton}>Next page ＞</a>
              </Link>
            </div>
          )}
        </div>
        <div className={blogStyles.sideMenu}>
          <h3>Recommended</h3>
          <hr />

          {rankedPosts.length === 0 && (
            <div className={blogStyles.noContents}>There are no posts yet</div>
          )}
          {rankedPosts.length > 0 && (
            <ul>
              {rankedPosts.map(rankedPost => {
                return (
                  <li key={rankedPost.Slug}>
                    <Link
                      href="/blog/[slug]"
                      as={getBlogLink(rankedPost.Slug)}
                      passHref
                    >
                      <a>{rankedPost.Title}</a>
                    </Link>
                  </li>
                )
              })}
            </ul>
          )}
          <h3>Categories</h3>
          <hr />

          {tags.length === 0 && (
            <div className={blogStyles.noContents}>There are no tags yet</div>
          )}
          {tags.length > 0 && (
            <ul>
              {tags.map(tag => {
                return (
                  <li key={tag}>
                    <Link href="/blog/tag/[tag]" as={getTagLink(tag)} passHref>
                      <a>{tag}</a>
                    </Link>
                  </li>
                )
              })}
            </ul>
          )}
        </div>
      </div>