からの個人的なウェブサイトを移動する


Personal websiteは、GatsbyJSにうまく移りました!
最初のサイトは数年前にReactJSに建てられました.私は最初の仕事で拾ったreactjsスキルを行使したかった.万事うまくいった.しかし、私のサイトに欠けている1つのものは、ルートでした.私は潜在的なリクルーターを直接ページにダウンロードしてリンクを見つけることができる場所を指すことができなかった.
長い間、私はgatsbyjsを学びたかったが、私の日仕事のために時間を見つけることができませんでした.最後に、この週末を始めるために、若干の時間を見つけました.敷地はNetlify.
ほとんどの場合、gatsbyjsがreactjsに組み込まれているので、サイトの転送は簡単でした.私が奮闘した1つの問題は、働くためにFontAwesome Proアイコンを得ていました.いくつかのgoogling後、私はそれを動作させることができた.どうやら、私はアイコンをレンダリングするFontaWamyの反応コンポーネントを使用する必要がありました.
その後、サイトを展開するいくつかの問題に遭遇しました.これはNetLifyで展開ログを読む方法を学んだ時でした.
最初に遭遇したエラーは、ビルドプロセスからいくつかのライブラリが見つからなかったことでした.私は.npmrcファイルを追加しなければならないと気づいた.次のエラーは、
"window" is not available during server side rendering
私は2つの場所でwindowを使用していました:戻るトップからボタンまで、そして、質問ストリングを抽出するために.私はボタンの上にアンカータグを使用していくつかのスタイルを変更することによってトップボタンに戻る解決した.次に、クエリ文字列値を抽出するための代替案について研究した.私は、このStackOverflow postに導かれました.私はquery-stringパッケージを使って行きました.エラーが解決され、サイトが正常に公開されました.
後で、私は壊れたイメージで問題を抱えました.私が発表したプロジェクトはほとんどなかったので、APIとDBを維持したくなかった.私は将来それをします.そこで、プロジェクトを静的データとしてサイトに読み込むことにしました.いくつかのデバッグの後、../ルートの下のすべてのイメージに/projectsを加えることによって、イメージURLを修理しました.
NetLifyログを読んでイメージURLをデバッグするためにコンソールを使用することから、私はこのgatsbyjsサイトを展開することから多くを学びました.私は新しい技術を探求し、実験を楽しみます.うまくいけば、私は再びGatsbyjsのために新しいプロジェクトアイデアを持っています!