WDC Website Template

Have questions? Email us.

This is a quick template for making a website. Out of the box, it's fast, efficient, and secure. You can follow these steps and links or attend our club meetings to learn more.

---

🗺️ Table of Contents

1. Quick start

   a. Set up your computer (first time only)

   • School laptop
   • Personal Computer

   b. Start customizing

   c. Learn more

2. To the Internet!

   a. Login to GitHub

   b. Initialize a repository

   c. Login to Gatsby Cloud

   d. Launch your website

3. Personal Computer Setup

   • MacOS

   • Windows

   • Linux

4. Remember: Ask questions!

---

🚀 Quick start

a. Set up your computer (first time only)

• School Laptop

  i. Log in to GitHub.

  ii. Press the + button on the top-right corner.

  

  iii. Select New repository.

  

  iv. Click this textbox, type your project's name, and press Enter.

  

  v. Press the copy button on the right side of the screen.

  

  vi. Open Visual Studio Code.

  vii. Press this button on the left.

  

  viii. Select Clone Repository and press Enter until your browser opens.

  

  ix. Enter your GitHub username and password again and press Enter until you see the Repository name search menu.

  x. In the search menu, type columbusacademy/wdc-jamplate, and press Enter.

  xi. The file explorer should open. Click the Desktop folder and press Enter.

  xii. On the bottom right, click Open.

  

  xiii. Select Yes, I trust the authors.

  

  xiv. Press this button on the left.

  

  xv.

  xix. Open the terminal.

  

  xv. Type chmod 755 setup.sh && ./setup.sh and press Enter.

  That's it!

  Next: Open the code and start customizing!

• Personal Computer

  See below.

b. Open the code and start customizing!

1. Open your project folder in VS Code (done in the previous section)

2. Open the terminal.

3. Type npm t and press Enter.

Your site is now running at http://localhost:8000!

(Please tell me your default browser is Chrome.)

Edit src/pages/index.js to see your site update in real-time!

c. Learn more

• Documentation (General link)

• Tutorials (Beginners)

• Guides (Specific examples)

• API Reference (Advanced)

• Plugin Library (Browse Plugins)

• Cheat Sheet (Handy)

---

🚀 To the internet!

Deploy this website with one click on Gatsby Cloud:

1. Create an account on Gatsby Cloud.

2. Select Authorize Gatsby Cloud.

3. Click Add a site +.

4. Select GitHub.

5. Select Click here to add an installation.

5. In the pop-up window, scroll down and click Install.

6. The pop-up window should close. Find your project's name and click Import next to it.

---

💻 Personal Computer Setup

MacOS

• Download Visual Studio Code

• Download Git

  1. Open spotlight ( ⌘ + Space ), type terminal, and press Enter.

  2. Click inside the newly opened window.

  3. Type git and press Enter.

  4. Follow the prompts to compete the installation.

• Go to the School Laptop setup.

Windows

• Download Visual Studio Code

• Download Git

• Download NVS

  1. Click on nvs-x.x.x.msi (the x's will be numbers) and press Enter.
  
  2. Open the file and follow the prompts to complete the installation.

• Set up everything else

  1. Follow the School Laptop instructions up to xiv.

  2. Type the following, pressing Enter after each line.

         cd OneDrive/Desktop/wdc-jamplate-main
         nvs add lts
         nvs use lts
         nvs link lts
         npm i -g npm npm-check-updates gatsby-cli
         npm i
         echo "\n\nYou're welcome ;)\n"

  3. Next: Open the code and start customizing!

Linux

Don't worry. We still love you.

Just email us to set up an in-person or zoom meeting.

---

👑 Remember: Ask questions!

If you have any questions or interesting ideas, we're here to help. Email us and set up an in-person or zoom meeting.