jerinjohnk/v4

Fourth iteration of my personal website

jerinjohnk.netlify.app

The website jerinjohnk.netlify.app built with Gatsby and hosted with Netlify

🛠 Installation & Set Up

1. Install the Gatsby CLI

   npm install -g gatsby-cli

2. Install and use the correct version of Node using NVM

   nvm install

3. Install dependencies

   yarn

4. Start the development server

   npm start

🚀 Building and Running for Production

1. Generate a full static production build

   npm run build

2. Preview the site as it will appear once deployed

   npm run serve

🎨 Color Reference

Color	Hex
Navy	#0a192f
Light Navy	#112240
Lightest Navy	#233554
Slate	#8892b0
Light Slate	#a8b2d1
Lightest Slate	#ccd6f6
White	#e6f1ff
Yellow	#FFDF6C

🧐 What's inside

A quick look at the top-level files and directories in this project.

.
├── src
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package.json
└── yarn.lock

1. /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser), like your site header, or a page template. “Src” is a convention for “source code”.

2. gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

3. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

4. gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

5. gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

6. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

7. yarn.lock: Yarn is a package manager alternative to npm. You can use either yarn or npm, though all of the Gatsby docs reference npm. This file serves essentially the same purpose as package-lock.json, just for a different package management system.

Troubleshooting

If you encounter authentication problems while deploying with deploying, then you might have not setup ssh authentication yet.

Credits

This project was forked from Brittany Chiang's repo.