からの個人的なウェブサイトを移動する
1849 ワード
Personal websiteは、GatsbyJSにうまく移りました!
最初のサイトは数年前にReactJSに建てられました.私は最初の仕事で拾ったreactjsスキルを行使したかった.万事うまくいった.しかし、私のサイトに欠けている1つのものは、ルートでした.私は潜在的なリクルーターを直接ページにダウンロードしてリンクを見つけることができる場所を指すことができなかった.
長い間、私はgatsbyjsを学びたかったが、私の日仕事のために時間を見つけることができませんでした.最後に、この週末を始めるために、若干の時間を見つけました.敷地はNetlify.
ほとんどの場合、gatsbyjsがreactjsに組み込まれているので、サイトの転送は簡単でした.私が奮闘した1つの問題は、働くためにFontAwesome Proアイコンを得ていました.いくつかのgoogling後、私はそれを動作させることができた.どうやら、私はアイコンをレンダリングするFontaWamyの反応コンポーネントを使用する必要がありました.
その後、サイトを展開するいくつかの問題に遭遇しました.これはNetLifyで展開ログを読む方法を学んだ時でした.
最初に遭遇したエラーは、ビルドプロセスからいくつかのライブラリが見つからなかったことでした.私は
後で、私は壊れたイメージで問題を抱えました.私が発表したプロジェクトはほとんどなかったので、APIとDBを維持したくなかった.私は将来それをします.そこで、プロジェクトを静的データとしてサイトに読み込むことにしました.いくつかのデバッグの後、
NetLifyログを読んでイメージURLをデバッグするためにコンソールを使用することから、私はこのgatsbyjsサイトを展開することから多くを学びました.私は新しい技術を探求し、実験を楽しみます.うまくいけば、私は再び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のために新しいプロジェクトアイデアを持っています!
Reference
この問題について(からの個人的なウェブサイトを移動する), 我々は、より多くの情報をここで見つけました https://dev.to/davinaleong/moving-personal-website-from-reactjs-to-gatsbyjs-3hooテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol