軽く紹介
とっても中学生の○○部みたいなタイトルを書きましたが安心してください。独身成人男性（大学生）です。
しずかなインターネットでのんびりと文章を書いたりしていましたが、自分のところで書いてみるのもいいんじゃないかなと思ってBlogを始めてみました。時代に逆行しているかもしれませんが、いやもしかしたら一周回って個人ブログが流行るのかもしれない。Twitter(現X)みたいなものではなくて、いっぱい文章を書くことに意味があるのかもしれない。そう思ったわけです。
このサイトを作るにあたって、はじめに見えるトップページだけは英語で書いてやろうと思い、Nani翻訳を駆使して頑張って英語を書くことができました。もう英語を学び始めてから6余年、そろそろちゃんと書けるようになりたいです。
技術の時間
さて、技術的なお話をしましょう。本来このBlogはこうあるべきだと思うからです。
{
"name": "pongotsu.net",
"version": "0.1.0",
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm",
"dev": "next dev --turbopack -H 0.0.0.0 -p 3000",
"build": "node ./scripts/copyStatics.js && next build",
"start": "next start",
"lint": "eslint",
"copy-statics": "node ./scripts/copyStatics.js"
},
"dependencies": {
"@headlessui/react": "^2.2.10",
"daisyui": "^5.5.19",
"gray-matter": "^4.0.3",
"html-react-parser": "^6.1.0",
"next": "16.2.3",
"react": "19.2.4",
"react-dom": "19.2.4",
"react-markdown": "^10.1.0",
"rehype-raw": "^7.0.0",
"remark": "^15.0.1",
"remark-breaks": "^4.0.0",
"remark-directive": "^4.0.0",
"remark-gfm": "^4.0.1",
"remark-html": "^16.0.1",
"shiki": "^4.0.2"
},
"devDependencies": {
"@cloudflare/next-on-pages": "^1.13.16",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "16.2.3",
"tailwindcss": "^4",
"typescript": "^5"
},
"browserslist": "> 1%"
}
面倒なのでpackage.jsonを貼り付けることにしました。
メインはNext.jsですね。App Routerを使っています。
UI部分はTailwind CSSとHeadlessUI、そしてdaisyUIを使っています。あ、よく考えたらHeadlessUIもう使ってないんですよね。途中でdaisyUIに切り替えちゃったので。いつか修正しましょう。
Tailwind CSSに関してはちょっと言いたいことがあるので今度書きます。
他にも消し忘れPackagesがいっぱいありそうなので今度まとめてお掃除します。気づいてやってくれる人がいるなら喜んで押し付けます。
追記(2026/05/17) 修正しました
さて、作るうえで大変だったのがMarkdownをhtml化することです。
上の画像のように、このBlogはMarkdownで書かれているため、これをきれいにしてあげる必要があります。
そこで登場するつよ〜い味方が......
そう。GitHub Copilotくんです。
なんでもこなしてくれます。本当に技術の進歩はすごい。
Copilotくんに書かせたのはおもにhtmlを生成するロジックの部分で、デザイン周りは人間にやらせました、やりました。楽しかったですね。
よろしく
そんな感じで、今日5月12日の深夜に書きました。よろしゅう。