Skip to content

Website Setup Doc

Jump to bottom
Jonathan Atkins edited this page Sep 14, 2021 · 2 revisions

Primer: Running Commands for Mac and Windows

For Macs, use the Terminal app. For Windows, use the Command Prompt. Run all commands (i.e. ls) in Terminal or Command Prompt, which is a default app on Mac/Unix computers for command line usage. To run a command in Terminal/CP, type it and press enter.

Basic Terminal/CP tutorial for navigation:

  • When you start Terminal, you should see something like User@mycomputer ~ $
    • The ~ stands for your Home folder (for example, /Users/Kevin is my Home folder).
  • ls (Terminal) or dir (Command Prompt) - list all files in current folder
  • cd [folder_name] - enter a folder. (for example cd Desktop goes into Desktop folder assuming it’s in current directory)
  • cd ../ - goes into parent folder
  • [tab] autocompletes your command or folder name. (For example if I want to enter the website folder and it exists, I can type cd web and then press [tab] and it should autocomplete to cd website, if I have the folder.)
  1. Set up Git (if not already on your computer) Install Git if you don’t have it. If you are on Windows follow the link here. If you're on a Mac or are using a form of Linux (such as Ubuntu), you already have a program called Terminal or something similar on your computer. Open that up and you should be good to go. Additionally, make a Github account if you don’t have one.

Clone the repo to local (local means your computer): git clone http://github.com/your_user_name/website2.git Cd into the folder and add remote to pioneers: git remote add pioneers http://github.com/pioneers/website2.git This way, you can fetch changes to the repository to your computer

Setup

After pulling the repo add the environment variables (note: these are not here after pulling from the repo because .env files are part of the .gitignore). There are a few that are used for the mail chimp form, but these are not really needed for local development. However, what will be needed will the the Contentful api key. To get it head over to Contentful and click on the settings dropdown tab on the navbar. Under the header Space Settings, click on the one that says API keys. There should be two keys listed, click on the PieWebsite one. Then you want to copy to clipboard the Content Delivery API - access token. Back in your website2 files, make a new file called .env.development inside the pie-website directory. Then put inside the following:

CONTENTFUL_API_KEY=Contentful_API_Key

Replacing Contentful_API_Key with what you grabbed from Contentful.

Note: the commands for setup use npm, so if you do not have it run the command npm install -g npm
More on that here

Next, install the Gatsby CLI globally. cd into the project folder and run the following:

npm install -g gatsby-cli

Then cd into pie-website, install the dependancies and boot up the server:

cd pie-website
npm install
npm start

Note: this will take a long time probably - there are some fat things to install.

The site is now running at http://localhost:8000

_Note: You'll also see a second link: http://localhost:8000/___graphql_. This is a tool you can use to experiment with querying your data.

Clone this wiki locally