グレートギャツビー😎

5555 ワード

react javascript gatsby webdev テキストリンク

💅 ギャツビーでミニマリスト

🍋 Live

誰でも！私は最近、ギャツビーで忙しかったです、そして、私は楽しい方法で基礎を学ぼうとしていました。したがって、私はギャツビーでミニマリストのCVを作成しました。私は一歩一歩私のCVステップを構築しました、そして、また、あなたは私と基本的なCVをつくることができるか、ちょうど道に沿って基礎を学ぶことができます。閉じるこの動画はお気に入りから削除されています。桶を掘りましょう！

🐝 イントロ

まず、開発環境を設定する必要があります.

🌱 グローバルインストール

インストールHomebrew . ( Macでgatsbyとnode . jsをインストールするには、Home homebrewを使うことをお勧めします.)

あなたがすでにそれを持っていないならば、インストールしてくださいNode.js, npm . ( node . jsは、Webブラウザの外部でJavaScriptコードを実行できる環境です)

Gitをインストールします.

Gatsbyをグローバルにインストールしますnpm install -g gatsby-cli

から新しいサイトを作成するStarters

あなたが好きであるか、デフォルトのギャツビースターターで始まるものを選んでくださいhello world

TLドクター🔖 あなたがちょうどあなたのコマンドラインからチェックする前にあなたが何をインストールしたかわからないならばnode --version あなたのバージョンをご覧ください.

🐙 ターミナル＆VSコード

リポジトリを作成するgatsby-intro あなたのgithubに.

ReadMeファイルを初期化することを忘れないでください.

それをあなたのマシンにクローンしなさい.(私は個人的にVSコードを使います)

ディレクトリを変更します(これは「hello world」サブフォルダにディレクトリ(cd)を変更したいです.○)

あなたが立ち往生しているか、失われるならば、あなたの端末gatsby --help そして、それがあなたに与えるオプションを見てください.

開発モードを起動します.gatsby develop このコマンドは開発サーバを起動します.あなたは、開発環境であなたの新しいサイトを見て、対話することができます-ローカル(あなたのコンピュータで、インターネットに公開されません)

あなたのサイトをローカルに表示してください:あなたのブラウザーで新しいタブを開けて、そしてhttp://localhost:8000/

あなたhello world インデックス.jsファイルは次のようになります.

import React from "react"

export default function Home() {
  return <div>Hello world!</div>
}

{/* you need to always export and this is a  React rule. */}.

コンポーネントの作成src フォルダ.

コンポーネントの構造は以下のようになります.

フッター.js

ヘッダ.js

メイン.js

アバウト.js

連絡先.js

スキル.js

プロジェクト.js

光沢のある色のために申し訳ありませんFigma
⚠️ 作成することを忘れないでくださいstyles.css ファイル.

💫 プラグインのインストール

あなたのgatsby-config.js ファイルを作成するプラグインを作成する必要があります.

ギャツビープラグイン

Provides drop-in support for Sass/SCSS stylesheets

npm install node-sass gatsby-plugin-sassHow to use

あなたがsassプラグインをインストールすることに関する問題があるならばstackoverflow

🎨 形状を与える

CSS: Apply some basic CSS. If you feel confident with CSS frameworks then you can implement a framework to your gatsby project. Tailwind or Bootstrap.