どのように私は次のブログを構築しました.JS ?

最後の月から、私は私のYouTubeチャンネルのどんな内容も更新する機会を得ませんでした、そして、何かが私が私の仕事をしている間、私がまだブログをすることができるという私の心または私の心に来ます
私が週を通して学んだものを集めて、彼らについてのメモを掲示してください.
まず最初に、まずブログを書く.dev . to、媒体、または他のプラットフォーム?私が私のウェブサイトをコード化して、他の人と道に沿って旅行を共有して、それを文書化するならば、どうですか?
機能はかなり簡単ですが、いくつかのコンテンツとコードのスニペットおそらく単純なプラットフォームです.

テックスタック

私は次に好きです.jsそして、それは驚くべき静的サイト生成機能を持っています.また、それはコメントなどのいくつかのデータを好む必要があるというブログの投稿であるので、好きで、私も私はかなり私は設定したくない確信している
バックエンドサーバーを処理し、私のブログ情報を格納します.それで、私はちょうど次へ行くことに決めました.ServerlessなAPI.
PlanetScaleは、コメントなどの私のブログのポストの情報を格納するServerlessデータベースプラットフォームです.私にとって、Jangoバックグラウンドを持つ男は私はオルムと
また、私はすべてが私の意見で完全になるので、typescriptでコーディングするつもりです.

内容はどうやって書くのですか。

私はいくつかの経験をいくつかのプロジェクトのコンテンツについては、Web上での書き込みに取り組んでいる.私の会社のプロジェクトのいくつかでは、いくつかのリッチテキストエディタを使用して、Web上のコンテンツを書き込み、解析しました.
(例:quilljs、jodit、ckeditorなど).
これらの編集者は、より良いユーザーエクスペリエンスを活用するのに本当に驚くべきものでした、しかし、時々、彼らは彼ら自身のトレードオフで来ます.この場合、私は、私がウェブサイトを書いて、更新するつもりであるただ一人の人であるつもりであると理解しました.So
私は私のウェブサイトのコンテンツを書くためにMarkdownを使用することを決めた.

どのようなマークダウンですか？

Markdownはプレーンテキストをフォーマットするための軽量マークアップ言語です.あなたが見ることができるMarkdownの最も明白なユースケースの1つはGithub ReposのREADMEファイルです.
テキストの装飾を太字、斜体、下線などのテキストに追加すると、基本的に書式設定されます.したがって、Markdownは構文です、あるいは、あなたはあなたのテキストがそうである方法をフォーマットする規則のいくつかのセットを言うことができます.
たとえば、Web上で、我々はハイパーテキストマークアップ言語(HTML)を使用してどのように我々のブラウザを表示するには、コンテンツをフォーマットします.我々がウェブページを訪問するとき、我々のブラウザーはHTMLを読んで、規則をテキストに適用します.それがいくつかのイタリック体テキストであるのを見るとき、それはタグの間のすべてを理解します.しかし、HTMLはタグで読むのが比較的困難です.また、そこに
HTMLタグの多くは、我々のテキストは、特定の方法でフォーマットする方法をブラウザに指示することができます.
Markdown is meant to be easy to read / to write as is feasible. マークダウンは、HTMLよりもずっとシンプルで実行可能なテキストを作るために作成されています.タグは、人間が読むことと理解するのにかなり難しいからです.また、彼らは非常に
ユーザーは、それを読んで多くの経験を持っていない人々のために友好的.
チェックアウトできますMarkdown Syntax Guide はい.
ねえ、我々はコンポーネントベースの反応アプリケーションを構築するつもりです.我々が知っているように、我々は我々のウェブサイトのためにJSXのトンを使用するつもりです、そして、1つの大きなものは我々が我々のJSXコンポーネントでMarkdownを使うことができるということです.
幸運にも我々は次を使用している.JSは、それは自動的に私たちのアプリケーションでMarkdownsを使用するようにサポートしています.我々は、MDXを書くだけでなく、コンテンツを使用することができます
我々のアプリケーションでは、我々もMDXのおかげで、Markdownファイル内の当社のJSXコンポーネントを使用することができます.

MDXとは

MDX バニラMarkdownのより良いバージョンですが、我々はインポートすることができますし、Markdownファイル内のインタラクティブな反応コンポーネントを使用します.
mdxjsからのデモの若干は、ここにあります.

import {Chart} from './snowfall.js'
export const year = 2018

# Last year’s snowfall

In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.

<Chart year={year} color="#fcb32c" />

このコードはJavaScriptにコンパイルされ、基本的にはJSXをサポートする任意のフレームワークで使用できます.

どのように私は私の次のmdxを使用します。アプリケーション?

今私はどのような方法を私が使用するつもりであるかについて明確である、それは方法を決定する時間です!

コンテクスト層

基本的に、ContentLayerは、私はそれが非常に簡単にMarkdownをインポートするために作るデータにブログにgonnaのブログである任意のmdxファイルを回すために使用することができます.現在はアルファステージですが
それは驚くほどクールです.これは、任意のローカルコンテンツまたは任意のヘッドレスCMS(例えば. JSON、MDX)からデータソースを取得し、JSONのデータファイルに変換し、さらに定義されたとしてtypescriptの種類を生成します.
それで、次の私のケースで.JSは、私は次から静的サイトの生成を使用することができますクールではない.静的ページを生成するには、JSとContentLayerデータを使用します.よく、それは静電気の速度でダイナミックの力です.
後で私のブログでContentLayerを使用する方法については、完全なブログをチェックアウトすることができます.私は、私が後でできるだけ多くのブログを試みるつもりです.

バックエンドはどうですか。

私は次に好きです.JSと次の主な機能の一つ.私を興奮させるJSは、その無力なAPIです.次に.あなた自身のAPIを構築することができます.JSアプリケーション.あなたがページ/APIフォルダの中に置くすべては、ウェブページの代わりにAPI終点として扱われます.また、サーバーサイドのバンドルであり、クライアント側のバンドルでは増加しません.
したら、次を作成します.JSのアプリケーションを使用して次のアプリを使用して、すでに作成するAPIフォルダを作成することができます次のアプリケーションを作成します.URLを要求して、JSON応答を見ることができるように.

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

自分のバックエンドサーバーを自分のブログ記事の情報を処理するために入れたくないので、これは私にとって本当に素晴らしいです.それで、私はちょうど私が私の次の内部に必要とする認証または何かのためにAPI終点を書くつもりです.JSアプリケーション.

データベースについては？

私も、私がデータベースを必要とするように、私のウェブサイトで若干のデータを保存しなければならないつもりです.それで、私はデジタル海で私自身のデータベースサーバをセットアップしますか?

プリマ

Prismaは、データベースを管理し、対話するためのオープンソースのORMです.Prismaでは、データモデルを自分のPrismaスキーマにどのようにしたいかを定義でき、データベースを変更するためにPrismaマイグレーションツールを使用できます.
チェックアウト

    model Article {
        id        Int     @id @default(autoincrement())
        title     String
        content   String?
        published Boolean @default(false)
    }

私の個人的なブログでは、このケースでは、私はどのように私は私のデータモデルをしたいと宣言することができますし、私がしなければならないすべては移動され、それが完了です.また、より良い開発者の経験を提供する偉大な近代的な開発ツールを持っています.
データベースからデータを検索するには、Prismaクライアントを使用できます.Prismaでは、自動的にデータモデルの種類を生成するので、Prismaクライアントを使用してデータを照会すると、レバレッジ
誤植とより速い開発者経験を避けるために、タイプスクリプトの力.
ここでPrismaクライアントについての詳細をチェックしてください.Prisma Client

const allArticles: Article[] = await prisma.article.findMany()

また、Prismaは正式に次の作業に簡単な方法をサポートします.jsPrismaクライアントを使用して次のデータをクエリすることができます.JSアプリケーション.あなたの次のページか次のサーバーレスAPIからかもしれないので、私の場合では
私のための完璧な選択で動作します.私は次から任意のレンダリングメソッドを使用することができます.JSとそれは完璧にPrismaクライアントで動作します.
個人的には、Jjangoから来ている開発者として、私は自分自身がどのようにこれらのものがうまくいくかについてかなり幸せであるとわかります.それはあなたのクールなGUIを使用してデータの更新を管理することができますPrisma Studioと呼ばれるものがあります.
私は、私がこのブログの後でPrismaについて知っているすべてに関する詳細を書くより多くの時間を見つけるようにしようとしています!
あなたの次を設定する方法をチェックしてください.プリズマとのアプリケーション here

平面図

今私のORMを持って、私はまだ動作するように私のprismaスキーマのデータベースが必要です.もう一度プラネタスケールを試してみました.私はすでにPlanetScaleデータベースを使用してプロジェクトのカップルをしました、そして、私はそれを愛しています.
PlanetScaleは、何かを壊すことなく速くあなたのデータベースを管理して、出荷することができるMySQL互換の、Serverlessなプラットホームです.また、より良い開発者の経験のための素晴らしい開発ツールを提供します.
そして、それは本当にクールな1つのことは、データベースのgithubのように動作することです.複数のデータベースブランチを作成することができます.それはあなたがいつでも任意のテストやテーブルに変更を行うことができますは、生産データベースに触れることなく、本当に素晴らしいです.GitHubと同じように、プル要求を作成し、後でそれらをマージすることができます.
ダッシュボードのデータベーススキーマをチェックできます.また、独自のコンソールで任意のスキーマの変更を使用して動作するようになります.
一つは、それがPrismaでとてもうまく機能することです.Prismaスキーマでデータベースの変更を移行し、データベースを自動的に更新できます.
Planetscale

ここに私のウェブサイトをチェックアウトすることができますあなたの時間をありがとう

Github