プロジェクト・オブ・100

おい!私は、100を反応させる任務にいます.JSは2020年10月31日から2021年2月7日までの100日間のプロジェクトです.あなたの質問があれば私のdev . toプロファイルまたは私の更新のために私のdevに従って、アウトに達すること自由に感じなさい.あなたのサポートに感謝!
今日の配備されたアプリケーションへのリンクlink
レポへのリンクgithub
コロナウイルスがその国の醜い頭を回復して、私が基本的なウェブ開発でより快適になっているように、私は若干のフリーランス仕事を拾うことを考えていて、ウェブサイトを作る私の能力を広告していました.
しかし、待ってください-私は今何もしていないが、しばらく反応して、ウェブサイトを作る古い方法に戻ることさえ想像することができません.人々は本当に全体のページ長で彼らのHTMLをまだ定義します、そして、それから、スタイルのマークアップはスタイルの長い何千もの線で長くなります?それはフリーランサーが行うものですか?
私は中間の地面を見つけたかった.クライアントのための静的な、高速のウェブサイトにサービスを使用することなく、まだ再利用可能なコンポーネントを作成することができます提供する方法.

静的サイトジェネレータ

私は1年間のポッドキャストのプログラミングを聞いているので、私は“静的サイトジェネレータ”という言葉を何百万回聞いたことがあるが、私はそれが意味したことを理解した反応を使用し始めるまではなかった.
以前、私は常に笑います.あなたはHTMLとCSSとサーバーの権利を意味しますか

それが起こるように、反応を使用したくないすべての時間に反応するJavaScript開発者の全産業があります、そして、彼らのために、テクノロジーは反応を使用して書かれている静的ウェブページをレンダリングするために造られました.

何が良いのですか。絶対にすべて。

この方法でウェブサイトを作成することです.あなたのファイルサイズがHTMLとCSSでウェブサイトを書くならば、あなたのファイルサイズがちょうど小さいということです.私がしたギャツビースタータープロジェクトにそれを比較してください.私はちょうど医者からスターターを生成して、彼らのデフォルト写真を猫PICに変えました.ビルド後のフォルダの大きさを推測しますか?

あなたはその権利を読んだ.ディスク上には373メガバイトです.ギガバイトの3分の1以上.H 1、リスト要素、および猫の写真のためだけに!
それは、このスタータープロジェクトを実行した後、私はすぐにこれは大規模なプロジェクトに役立つことがわかります.反応は、Fullstackアプリケーションで使用するために使用されているものと同じです、そしてそれはすぐに簡単にページを作成する(または生成)多くのを作成するために、GXSQLやCSSのような他の技術の束を使用しています.
更なるADOなしで-ここでは、ギャツビークイックスタートプロジェクトの私のチュートリアルです.あなたがそれを試みることに興味がある反応家であるならば、私は非常にそれを推薦します!

クイックスタートプロジェクト

Gatsbyドキュメントは優れていると述べます.また、彼らは明確で、最新の状態です.私が新しい技術から始めるとき、私が求めるすべてGatsby Quick Start
1 -プロジェクトの初期化npm init gatsbyこれは、選択したディレクトリにプロジェクトを作成します.CLIは、特定のバックエンドのニーズに合わせてプロジェクトを設定するプロセスをガイドし、既存のCMSにリンクする必要がある場合は、Gitリモートを設定し、展開を選択します.私は基本的に最も裸の骨プロジェクトを得るためにこれらのそれぞれを選択しました.
あなたのプリセットを選んだ後、私のかなり良いインターネット接続をダウンロードし、すべてを設定するには約3分かかりました.ちょうどわずかに長いcreate-react-app , そして、ディレクトリ構造は、ちょうどAgatsby-config.js ファイル.
2 -プロジェクトを実行する
一歩一歩うまくいけば、この詳細な成功メッセージを得るべきです.

Start by going to the directory with

cd gatsby-site

Start the local development server with

npm run develop

開発サーバーを起動した後、ドキュメントにリンクしている魅力的な配色の良い一般的な起動画面が表示されます.それよりも良いcreate-react-app スタータープロジェクト画面.
3 -プロジェクトの編集
私はちょうどプロジェクトを構築し、変更のカップルを作りたいので、それがうまく行くから右に起こっていたものに精通していたことは素晴らしいことだった.それは反応するので、何か特別なテンプレート言語や何かを学ぶ必要がない場合は、静的なページを提供したい.私はヘッダーを変更して、彼らのSVGを義務的なFat Cat PICに変えて、すぐにそれを見ることができました:

その瞬間に私を殴った-静的サイトジェネレータとCMSの違いは何ですか?私は、彼らが異なるテクノロジーを記述するのを知っています、しかし、このギャツビープロジェクトとそのウェブサイトをレンダリングするためのそのビルトイン技術のすべてを見て、ビルトインバックエンドルーティングツール(Graphql)でビルトインバックエンドルーティングツールとGSXを使っているデータをすぐに見ていることを見て、私は最近私がしていた表現エンジンのものを少し思い出させました.CMS?
私が思い付く最高の説明は聴衆だった.この静的サイトジェネレータは、開発者がすぐにサイトを作成するためのものですが、CMSのは、作家やより少ない技術的なコンテンツの専門家のためのものです.しかし、類似点はそこにある.
4 - Gatsbyプロジェクトの配備
展開は実際に私がロードブロックに走った唯一の部分でした.クイックスタートは、ギャツビーのクラウドを試していることを示唆していますが、通常NetLifyに展開しようとしているので、NetLify CLIで展開するためのドキュメントを使いたいと思っています.docs here ).

興味深いことに、GATSBY CLIを首尾よくインストールしたとしても、展開のステップ1でギャツビーコマンドを入力したとき、次のエラーが出ました.zsh: command not found: gatsby私は、ZSHが何であるかについて漠然と意識していました.これは、プログラムは、Appleの顧客には、6ヶ月前には、端末での作業のためのbashよりも優れているはずだった更新プログラムを強制した.安article 私はオンラインで「私はZSHパスにグローバルな実行可能ファイルへのパスを追加する必要がある」と示唆しました.
私の質問は次のとおりでした.

zshとは

どのようなパスですか?

どのようなグローバル実行可能ですか?

そのページはanother page これは私がこのコマンドを実行したかどうかを示す3次の答えにリンクしています.npm config get prefix... それは私にいくつかの種類の重要なビンへの道を与えます.上記のbinの内部に入ってしまえば、ZSH端末プログラムがgatsbyコマンドを実行する方法を知ることができます.

path+=('my/path/here')
export PATH

一旦これがリンクされて、私が怖いビン領域から出たならば、私はGatsby CLIコマンドを走らせることができて、上記の配備ステップの6を通してステップ1を通り抜けることができました.つのポイントのNetlifyウィザードは、ビルドコマンドを要求します.また、それがGatsbyのためのコマンドがgatsby build ないnpm run build お勧めです.
少し後には、あなたのギャツビーのアプリをインストールしているとかなり良いように見える!これは私にとってとても価値のあるプロジェクトでした.
GATSBY配備memmの義務的な成功のために

よくやった、古いスポーツ.