[{"data":1,"prerenderedAt":880},["ShallowReactive",2],{"content-\u002Fcontents\u002Ftailwondblog-nextjs":3,"surroundPost-\u002Fcontents\u002Ftailwondblog-nextjs":871},{"id":4,"title":5,"body":6,"createdAt":858,"description":859,"draft":860,"extension":861,"meta":862,"navigation":156,"path":863,"seo":864,"stem":865,"tags":866,"thumbnail":869,"updatedAt":858,"__hash__":870},"contents\u002Fcontents\u002Ftailwondblog-nextjs.md","Tailwind Nextjs Starter Blog + Netlifyでブログ構築",{"type":7,"value":8,"toc":849},"minimark",[9,13,24,27,46,49,52,61,65,73,82,91,99,228,231,263,266,275,278,287,292,295,304,312,315,318,321,329,332,348,351,360,401,412,415,431,435,442,445,463,466,647,650,679,690,693,696,709,712,730,733,741,748,759,762,766,799,803,810,819,825,828,835,838,846],[10,11,12],"p",{},"これまで Hugo で作っていたブログを Next.js ベースに移行することにしました。\n移行理由は go をあまり業務で使わない、自分で css をメンテするのがしんどくなったからです。",[10,14,15,16,23],{},"自分であまりメンテナンスをしなくていいように今回はある程度デザインが構築済みかつ Next.js + Typescript で書かれているものを探しました。\nNext.js + Typescript を採用したのはモダンなフロントエンドを扱ってみたかったからです。\nそして見つけたのが",[17,18,22],"a",{"href":19,"rel":20},"https:\u002F\u002Fgithub.com\u002Ftimlrx\u002Ftailwind-nextjs-starter-blog",[21],"nofollow","Tailwind Nextjs Starter Blog","です。",[10,25,26],{},"本記事では、以下の内容について記載します。",[28,29,30,34,37,43],"ol",{},[31,32,33],"li",{},"Tailwind CSS について",[31,35,36],{},"Next.js について",[31,38,39,42],{},[17,40,22],{"href":19,"rel":41},[21],"を使用したブログ構築方法",[31,44,45],{},"Next.js を SSG で Netlify へのデプロイ方法",[10,47,48],{},"本記事の内容については私自身も学習中ということもあり、不確かな内容もあるかもしれません。\nなるべく個人ブログではなく、公式サイトの情報を参照し書きました。",[10,50,51],{},"まずは以下の関連ワードの整理から始めます。",[53,54,55,58],"ul",{},[31,56,57],{},"Tailwind CSS とは",[31,59,60],{},"Next.js とは",[62,63,57],"h2",{"id":64},"tailwind-css-とは",[10,66,67,72],{},[17,68,71],{"href":69,"rel":70},"https:\u002F\u002Ftailwindcss.com\u002F",[21],"公式サイト","によると Tailwind CSS は以下のように書かれています。",[74,75,76,79],"blockquote",{},[10,77,78],{},"A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.",[10,80,81],{},"flex、pt-4、text-center、rotate-90 などのクラスが搭載されたユーティリティファーストの CSS フレームワークで、マークアップに直接組み込むことで、あらゆるデザインを構築できます。\n(DeepL 翻訳)",[10,83,84,85,90],{},"イメージとしては Bootstrap のような便利 CSS の集まりですが、Bootstrap よりも細かく CSS のクラスという概念がないです。\n例として",[17,86,89],{"href":87,"rel":88},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Futility-first",[21],"公式ドキュメント","のコードの一部を載せておきます。",[10,92,93,94,98],{},"以下が一般的な CSS の書き方で、スタイルの定義を",[95,96,97],"code",{},"chat-notification-logo","にまとめています。",[100,101,106],"pre",{"className":102,"code":103,"language":104,"meta":105,"style":105},"language-html shiki shiki-themes github-dark","\u003Cimg class=\"chat-notification-logo\" src=\"\u002Fimg\u002Flogo.svg\" alt=\"ChitChat Logo\" \u002F>\n\n\u003Cstyle>\n  .chat-notification-logo {\n    height: 3rem;\n    width: 3rem;\n  }\n\u003C\u002Fstyle>\n","html","",[95,107,108,151,158,169,178,198,212,218],{"__ignoreMap":105},[109,110,113,117,121,125,128,132,135,137,140,143,145,148],"span",{"class":111,"line":112},"line",1,[109,114,116],{"class":115},"s95oV","\u003C",[109,118,120],{"class":119},"s4JwU","img",[109,122,124],{"class":123},"svObZ"," class",[109,126,127],{"class":115},"=",[109,129,131],{"class":130},"sU2Wk","\"chat-notification-logo\"",[109,133,134],{"class":123}," src",[109,136,127],{"class":115},[109,138,139],{"class":130},"\"\u002Fimg\u002Flogo.svg\"",[109,141,142],{"class":123}," alt",[109,144,127],{"class":115},[109,146,147],{"class":130},"\"ChitChat Logo\"",[109,149,150],{"class":115}," \u002F>\n",[109,152,154],{"class":111,"line":153},2,[109,155,157],{"emptyLinePlaceholder":156},true,"\n",[109,159,161,163,166],{"class":111,"line":160},3,[109,162,116],{"class":115},[109,164,165],{"class":119},"style",[109,167,168],{"class":115},">\n",[109,170,172,175],{"class":111,"line":171},4,[109,173,174],{"class":123},"  .chat-notification-logo",[109,176,177],{"class":115}," {\n",[109,179,181,185,188,191,195],{"class":111,"line":180},5,[109,182,184],{"class":183},"sDLfK","    height",[109,186,187],{"class":115},": ",[109,189,190],{"class":183},"3",[109,192,194],{"class":193},"snl16","rem",[109,196,197],{"class":115},";\n",[109,199,201,204,206,208,210],{"class":111,"line":200},6,[109,202,203],{"class":183},"    width",[109,205,187],{"class":115},[109,207,190],{"class":183},[109,209,194],{"class":193},[109,211,197],{"class":115},[109,213,215],{"class":111,"line":214},7,[109,216,217],{"class":115},"  }\n",[109,219,221,224,226],{"class":111,"line":220},8,[109,222,223],{"class":115},"\u003C\u002F",[109,225,165],{"class":119},[109,227,168],{"class":115},[10,229,230],{},"そして以下が Tailwind CSS の書き方です。",[100,232,234],{"className":102,"code":233,"language":104,"meta":105,"style":105},"\u003Cimg class=\"h-12 w-12\" src=\"\u002Fimg\u002Flogo.svg\" alt=\"ChitChat Logo\" \u002F>\n",[95,235,236],{"__ignoreMap":105},[109,237,238,240,242,244,246,249,251,253,255,257,259,261],{"class":111,"line":112},[109,239,116],{"class":115},[109,241,120],{"class":119},[109,243,124],{"class":123},[109,245,127],{"class":115},[109,247,248],{"class":130},"\"h-12 w-12\"",[109,250,134],{"class":123},[109,252,127],{"class":115},[109,254,139],{"class":130},[109,256,142],{"class":123},[109,258,127],{"class":115},[109,260,147],{"class":130},[109,262,150],{"class":115},[10,264,265],{},"このように高さと幅を定義したものがそもそもされていて、それらを組み合わせてスタイルを形成しています。\nTailwind CSS の特徴については以下のブログが日本語でよくまとまっていてわかりやすかったです。",[53,267,268],{},[31,269,270],{},[17,271,274],{"href":272,"rel":273},"https:\u002F\u002Ffixel.co.jp\u002Fblog\u002Ftailwindcss\u002F",[21],"TailwindCSS って何？なんで流行ってるの？",[10,276,277],{},"少し話は変わりますが、Tailwind CSS はいろいろ調べてみるとどうやら PostCSS というフレームワークから作られているようです。\nこれがよくわからなかったのでもう少し遠回りして調べてみます。",[10,279,280,281,286],{},"そもそも現状の CSS\b について調べてみると、よくある素の CSS ではなく SASS 構文・SCSS 構文というものを見かけます。\nこれらは CSS のメタ言語、AltCSS、CSS プリプロセッサ と呼ばれるもので、より便利な方法で CSS を書けるようにしたものです。\n",[17,282,285],{"href":283,"rel":284},"https:\u002F\u002Fsass-lang.com\u002Fguide",[21],"SASS の公式サイト","では以下のように記述されています。",[74,288,289],{},[10,290,291],{},"Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.",[10,293,294],{},"おそらく、SASS 構文で書かれたものを素の CSS にコンパイルしてくれるのでしょう。なので CSS プリプロセッサとも呼ばれていると推測できます。",[10,296,297,298,303],{},"では、PostCSS とはなんなのでしょうか。こちらも",[17,299,302],{"href":300,"rel":301},"https:\u002F\u002Fgithub.com\u002Fpostcss\u002Fpostcss",[21],"公式 GitHub","の定義を引用します。",[74,305,306,309],{},[10,307,308],{},"PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more",[10,310,311],{},"PostCSS は、JS プラグインで CSS を変換するためのツールです。これらのプラグインは、変数やミックスイン、トランスパイル・フューチャー・CSS シンタックス、インライン・イメージなどをサポートすることができます。(DeepL 翻訳)",[10,313,314],{},"CSS を変換する JS のプラグインのようです。CSS を変換するという意味では SASS と同じように思います。\nおそらく違いは、PostCSS は JS を使って CSS を出力する仕組みを提供しているだけであり、何をどのように変換するかはプラグインによって実現されるということです。\nなので例えば SASS の継承を利用したい場合は、それ用のプラグインを導入するという使い方になります。",[10,316,317],{},"SASS と PostCSS の両方を使うことも可能なようです。SASS で足りないものがあれば PostCSS のプラグインで実現する感じでしょうか。",[10,319,320],{},"ただし、Tailwind CSS のドキュメントではプリプロセッサの導入は可能だが、必要ないという旨の内容が記述されています。",[10,322,323,324],{},"参考：",[17,325,328],{"href":326,"rel":327},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fusing-with-preprocessors",[21],"Using with Preprocessors",[10,330,331],{},"PostCSS の GitHub で紹介されていた参考サイトを載せておきます。私と似たような疑問を持つ方は多そうです。",[53,333,334,341],{},[31,335,336],{},[17,337,340],{"href":338,"rel":339},"https:\u002F\u002Fwebdesign.tutsplus.com\u002Ftutorials\u002Fpostcss-deep-dive-what-you-need-to-know--cms-24535",[21],"PostCSS Deep Dive: What You Need to Know",[31,342,343],{},[17,344,347],{"href":345,"rel":346},"https:\u002F\u002Fwww.julian.io\u002Farticles\u002Fpostcss.html",[21],"Some things you may think about PostCSS... and you might be wrong",[62,349,60],{"id":350},"nextjs-とは",[10,352,353,354,359],{},"Next.js は React を使用したフロントエンドのフレームワークです。Next.js の何がいいのかは",[17,355,358],{"href":356,"rel":357},"https:\u002F\u002Fnextjs.org\u002F",[21],"公式トップ","に Why Next.js として記載されています。\n全部で以下の 12 個の特徴が挙げられています。（2021\u002F8\u002F11 時点）",[53,361,362,365,368,371,377,380,383,386,389,392,395,398],{},[31,363,364],{},"Image Optimization",[31,366,367],{},"Internationalization",[31,369,370],{},"Next.js Analytics",[31,372,373],{},[374,375,376],"strong",{},"Zero Config",[31,378,379],{},"Hybrid: SSG and SSR",[31,381,382],{},"Incremental Static Regeneration",[31,384,385],{},"Typescript support",[31,387,388],{},"Fast Refresh",[31,390,391],{},"File-system Routing",[31,393,394],{},"API Routes",[31,396,397],{},"Built-in CSS Support",[31,399,400],{},"Code-splitting and Bundling",[10,402,403,404,406,407,411],{},"個人的には React 製、早い、SSG 対応、そして",[374,405,376],{},"というのが気に入ってます。\nかなり前に本ブログでも取り上げた",[17,408,410],{"href":409},"javascript","JavaScript のいろいろまとめ（歴史・ツールなど）","のようにフロントエンドはとにかく設定しなきゃいけないことが\n多くて大変に思っていました。\nNext.js では Zero config をうたっているだけあって簡単なものなら特に設定を書かずに作れます。",[10,413,414],{},"もっと細かい話は以下のブログが非常に参考になりました。",[53,416,417,424],{},[31,418,419],{},[17,420,423],{"href":421,"rel":422},"https:\u002F\u002Fqiita.com\u002FYuki_Oshima\u002Fitems\u002F5c0dfd8f7af8fb76af8f",[21],"Next.js を使うべき 5 つの理由 + 実装 Tips",[31,425,426],{},[17,427,430],{"href":428,"rel":429},"https:\u002F\u002Fqiita.com\u002Fjagaapple\u002Fitems\u002Ffaf125e28f8c2860269c",[21],"Next.js 4 年目の知見：SSR はもう古い、Vercel に API サーバを置くな",[62,432,434],{"id":433},"tailwind-nextjs-starter-blog-を使用したブログ構築方法","Tailwind Nextjs Starter Blog を使用したブログ構築方法",[10,436,437,441],{},[17,438,22],{"href":439,"rel":440},"https:\u002F\u002Fgithub.com\u002Ftimlrx\u002Ftailwind-nextjs-starter-contents",[21],"の内容に従えば問題なく開始できます。",[10,443,444],{},"まずは以下のコマンドを実行（Typescript 版です）",[100,446,450],{"className":447,"code":448,"language":449,"meta":105,"style":105},"language-bash shiki shiki-themes github-dark","npx degit timlrx\u002Ftailwind-nextjs-starter-blog#typescript\n","bash",[95,451,452],{"__ignoreMap":105},[109,453,454,457,460],{"class":111,"line":112},[109,455,456],{"class":123},"npx",[109,458,459],{"class":130}," degit",[109,461,462],{"class":130}," timlrx\u002Ftailwind-nextjs-starter-blog#typescript\n",[10,464,465],{},"ディレクトリ 構造は以下のようになっています。",[100,467,469],{"className":447,"code":468,"language":449,"meta":105,"style":105},".\n├── LICENSE\n├── README.md\n├── components\n├── css\n├── data\n├── jsconfig.json\n├── layouts\n├── lib\n├── next-env.d.ts\n├── next.config.js\n├── node_modules\n├── package-lock.json\n├── package.json\n├── pages\n├── postcss.config.js\n├── prettier.config.js\n├── public\n├── scripts\n├── tailwind.config.js\n├── tsconfig.json\n├── types\n└── yarn.lock\n",[95,470,471,476,484,491,498,505,512,519,526,534,542,550,558,566,574,582,590,598,606,614,622,630,638],{"__ignoreMap":105},[109,472,473],{"class":111,"line":112},[109,474,475],{"class":183},".\n",[109,477,478,481],{"class":111,"line":153},[109,479,480],{"class":123},"├──",[109,482,483],{"class":130}," LICENSE\n",[109,485,486,488],{"class":111,"line":160},[109,487,480],{"class":123},[109,489,490],{"class":130}," README.md\n",[109,492,493,495],{"class":111,"line":171},[109,494,480],{"class":123},[109,496,497],{"class":130}," components\n",[109,499,500,502],{"class":111,"line":180},[109,501,480],{"class":123},[109,503,504],{"class":130}," css\n",[109,506,507,509],{"class":111,"line":200},[109,508,480],{"class":123},[109,510,511],{"class":130}," data\n",[109,513,514,516],{"class":111,"line":214},[109,515,480],{"class":123},[109,517,518],{"class":130}," jsconfig.json\n",[109,520,521,523],{"class":111,"line":220},[109,522,480],{"class":123},[109,524,525],{"class":130}," layouts\n",[109,527,529,531],{"class":111,"line":528},9,[109,530,480],{"class":123},[109,532,533],{"class":130}," lib\n",[109,535,537,539],{"class":111,"line":536},10,[109,538,480],{"class":123},[109,540,541],{"class":130}," next-env.d.ts\n",[109,543,545,547],{"class":111,"line":544},11,[109,546,480],{"class":123},[109,548,549],{"class":130}," next.config.js\n",[109,551,553,555],{"class":111,"line":552},12,[109,554,480],{"class":123},[109,556,557],{"class":130}," node_modules\n",[109,559,561,563],{"class":111,"line":560},13,[109,562,480],{"class":123},[109,564,565],{"class":130}," package-lock.json\n",[109,567,569,571],{"class":111,"line":568},14,[109,570,480],{"class":123},[109,572,573],{"class":130}," package.json\n",[109,575,577,579],{"class":111,"line":576},15,[109,578,480],{"class":123},[109,580,581],{"class":130}," pages\n",[109,583,585,587],{"class":111,"line":584},16,[109,586,480],{"class":123},[109,588,589],{"class":130}," postcss.config.js\n",[109,591,593,595],{"class":111,"line":592},17,[109,594,480],{"class":123},[109,596,597],{"class":130}," prettier.config.js\n",[109,599,601,603],{"class":111,"line":600},18,[109,602,480],{"class":123},[109,604,605],{"class":130}," public\n",[109,607,609,611],{"class":111,"line":608},19,[109,610,480],{"class":123},[109,612,613],{"class":130}," scripts\n",[109,615,617,619],{"class":111,"line":616},20,[109,618,480],{"class":123},[109,620,621],{"class":130}," tailwind.config.js\n",[109,623,625,627],{"class":111,"line":624},21,[109,626,480],{"class":123},[109,628,629],{"class":130}," tsconfig.json\n",[109,631,633,635],{"class":111,"line":632},22,[109,634,480],{"class":123},[109,636,637],{"class":130}," types\n",[109,639,641,644],{"class":111,"line":640},23,[109,642,643],{"class":123},"└──",[109,645,646],{"class":130}," yarn.lock\n",[10,648,649],{},"どんな感じかみたければ以下のコマンドを実行します。",[100,651,653],{"className":447,"code":652,"language":449,"meta":105,"style":105},"npm start\n# or\nnpm run dev\n",[95,654,655,663,669],{"__ignoreMap":105},[109,656,657,660],{"class":111,"line":112},[109,658,659],{"class":123},"npm",[109,661,662],{"class":130}," start\n",[109,664,665],{"class":111,"line":153},[109,666,668],{"class":667},"sAwPA","# or\n",[109,670,671,673,676],{"class":111,"line":160},[109,672,659],{"class":123},[109,674,675],{"class":130}," run",[109,677,678],{"class":130}," dev\n",[10,680,681,682,685,686,689],{},"自分は",[95,683,684],{},"yarn start","で実行しています。",[95,687,688],{},"start","の方だと変更が即座にブラウザで確認できます。",[10,691,692],{},"次に肝心の記事の書き方です。",[10,694,695],{},"記事を新たに追加するには以下のコマンドを実行します。",[100,697,699],{"className":447,"code":698,"language":449,"meta":105,"style":105},"node .\u002Fscripts\u002Fcompose.js\n",[95,700,701],{"__ignoreMap":105},[109,702,703,706],{"class":111,"line":112},[109,704,705],{"class":123},"node",[109,707,708],{"class":130}," .\u002Fscripts\u002Fcompose.js\n",[10,710,711],{},"コマンドを入力すると、フロントマターの内容について聞かれるので答えられるものは入力していきます。",[10,713,714,715,718,719,722,723,725,726,729],{},"ファイルの形式は",[95,716,717],{},".md","でも",[95,720,721],{},".mdx","でも OK ですが、",[95,724,721],{},"の方が HTML を書けるので便利です。\n完了すると、",[95,727,728],{},"data\u002Fblog\u002F","配下に新しいファイルが生成されます。",[10,731,732],{},"ファイルには以下のように入力したフロントマターが定義されています。",[100,734,739],{"className":735,"code":737,"language":738},[736],"language-text","---\ntitle: Tailwind Nextjs Starter Blog + Netlifyでブログ構築\ncreatedAt: '2021-08-07'\nupdatedAt: '2021-08-07'\ntags: ['NextJs']\ndraft: false\ndescription:  'Hugoで書かれていたブログをNext.jsベースに移行しました。使用したのはTailwind Nextjs Starter Blogと呼ばれるものでHugoと似たような使い心地で使用できます。'\nthumbnail: '\u002Fimg\u002Ftwitter-card.png'\n---\n# Tailwind Nextjs Starter Blog + Netlifyでブログ構築\n\n","text",[95,740,737],{"__ignoreMap":105},[10,742,743,744,747],{},"ほとんどは書いてある通りです。layout は 2 パターンあり、そこを変えると表示が微妙に変わります。\n自分の場合は",[95,745,746],{},"PostSimple","に統一しています。",[10,749,750,751,754,755,758],{},"ちなみにフロントマターと呼ばれる部分は Hugo とほぼ同じだったので、やりやすいです。\nHugo とちょっと違って戸惑ったのは、フロントマターの",[95,752,753],{},"draft=true","だと、変更が反映されないことです。\n書いた内容をチェックしながらやりたいなら",[95,756,757],{},"draft=false","にする必要があります。",[10,760,761],{},"あとは普通に Markdown を書いていくだけです。",[763,764,765],"h3",{"id":765},"その他の操作情報",[53,767,768,774,792],{},[31,769,770,771],{},"ブログ内ページへの内部リンクの書き方：",[95,772,773],{},"[表示名](ファイル名)",[31,775,776,777],{},"全体の CSS の書き換え方\n",[53,778,779],{},[31,780,781,784,785,788,789,791],{},[95,782,783],{},"tailwind.config.js","で書き換える。css で",[95,786,787],{},"-","で繋がれている要素は",[95,790,787],{},"を消して書くと認識される。",[31,793,794,795,798],{},"数式は Hugo と同じで",[95,796,797],{},"$$ y=ax$$","みたいにかける",[62,800,802],{"id":801},"nextjs-を-の-netlify-へのデプロイ方法","Next.js を の Netlify へのデプロイ方法",[10,804,805,806,809],{},"Hugo から変わったので Netlify でのデプロイ方法も変更する必要があります。\nリポジトリに",[95,807,808],{},"netlify.toml","を追加します。",[10,811,812,813,818],{},"合っているかわかりませんが内容は以下の通りです。\n",[17,814,817],{"href":815,"rel":816},"https:\u002F\u002Fgithub.com\u002Fcassidoo\u002Fnext-netlify-starter",[21],"Next + Netlify Starter リポジトリ","を参考にしました。",[100,820,823],{"className":821,"code":822,"language":738},[736],"[build]\n  command = \"yarn build\"\n  publish   = \"out_publish\"\n[[plugins]]\n  package = \"@netlify\u002Fplugin-nextjs\"\n[[plugins]]\n  package = \"netlify-plugin-cache-nextjs\"\n",[95,824,822],{"__ignoreMap":105},[10,826,827],{},"あとは Netlify のブラウザからリポジトリの参照先を変更すれば移行完了です。\nこれで Hugo の時のように記事追加などの変更後に git push すると自動でデプロイ可能です。",[10,829,830,831,834],{},"正直、Netlify の変更はかなりハマりました。通常だと SSG では",[95,832,833],{},"next export","で画像最適化を行うようですが、うまくいきませんでした。\nそのせいか、デプロイ後のページでは画像の読み込みが遅いです。",[62,836,837],{"id":837},"今後の課題",[53,839,840,843],{},[31,841,842],{},"Hugo の時のようにブログカードに画像が表示されるようにする。",[31,844,845],{},"記事の目次が表示されるようにする",[165,847,848],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":105,"searchDepth":153,"depth":153,"links":850},[851,852,853,856,857],{"id":64,"depth":153,"text":57},{"id":350,"depth":153,"text":60},{"id":433,"depth":153,"text":434,"children":854},[855],{"id":765,"depth":160,"text":765},{"id":801,"depth":153,"text":802},{"id":837,"depth":153,"text":837},"2021-08-07","Hugoで書かれていたブログをNext.jsベースに移行しました。使用したのはTailwind Nextjs Starter Blogと呼ばれるものでHugoと似たような使い心地で使用できます。",false,"md",{},"\u002Fcontents\u002Ftailwondblog-nextjs",{"title":5,"description":859},"contents\u002Ftailwondblog-nextjs",[867,868],"NextJs","Netlify","\u002Fimg\u002Ftwitter-card.png","VwVUuC9FuF-m97sqfWTdDmgZB3r_ITGyLoe-3zjuuLw",[872,876],{"title":873,"path":874,"stem":875,"children":-1},"TAHOE: Text-to-SQL with Automated Hint Optimization from Experience","\u002Fcontents\u002Ftahoe-text-to-sql-hint-optimization","contents\u002Ftahoe-text-to-sql-hint-optimization",{"title":877,"path":878,"stem":879,"children":-1},"PyTorchでTensorBoardを使う方法","\u002Fcontents\u002Ftensorboard","contents\u002Ftensorboard",1784936719398]