mcs-web

This is the repo for www.mysterycodesociety.com.

Technologies

• Eleventy - static site generator
• Liquid - templating language
• Node - JavaScript runtime
• npm - node package manager
• GitHub - host of the git repository
• Netlify - build, deploy, and host the website

Local Development

Environment Setup

To develop locally, you will need to work on a computer with the following tools:

1. Terminal, Shell, or Console application.
2. git for version control
3. Node and npm
4. A Text Editor of your choice, e.g. Sublime Text (recommended), Textmate, VS Code
5. A browser of your choice, e.g. Chrome, Firefox, Edge, Safari

Below, you will find more specific instructions for your operating system.

On MacOS

1. Terminal is a shell that comes pre-installed on Macs. Find it in the Application folder and open it.
2. Install homebrew, which you will use to install Node.
3. Check if brew is installed by running brew -v in Terminal.
4. Install node in homebrew by running brew install node in Terminal.
5. Check if node and npm are installed by running node -v and npm -v in Terminal.
6. Open your browser.

On Linux

1. Linux usually comes pre-installed with at least one terminal emulator: gnome-terminal, konsole, xterm, eterm. Find it and open it.
2. Install git with sudo apt install git-all. Check it is installed by running git -v in terminal.
3. Install node with apt-get by running sudo apt install nodejs in your terminal.
4. Install npm with apt-get by running sudo apt install npm in your terminal.
5. Check if node and npm are installed by running node -v and npm -v in terminal.
6. Open your browser.

On PC

1. Install a git terminal emulator by downloading the build and installing it. Open it.
2. Install node and npm by downloading the Node.js installer.
3. In the git terminal, check to see if node and npm are in the path by running node -v and npm -v. If not, add them to your PATH environmental variable.
4. Open your browser.

Getting Started (The First Time)

GitHub account firsts

1. Create a GitHub account.
2. In your terminal, generate a SSH public key, following the steps in this guide. Copy the public key.
3. In GitHub, go to your Account Settings, and save the public key to your SSH and GPG keys.

GitHub Repository Firsts

1. Git Clone this repository onto your machine (see link for instructions).
2. Change your directory to the cloned repository: cd mcs-web in terminal.
3. Install dependencies: npm install in terminal.
4. Build the site for the first time (generating a _site directory) by running npx @11ty/eleventy in terminal.

Running the server

1. Run npx @11ty/eleventy --serve in terminal to start the app server.
2. Open your browser to a new tab and view the app at http://localhost:8080

Example Workflow

This workflow assumes you have already done all the 'Getting Started' pieces and are coming back to do work on this repo.

All code snippets below are commands to run in terminal.

1. Open terminal and change your directory until you are in this repository's directory.
2. Open your Text Editor, and open this repository as a project.
3. Pull down the latest code changes from GitHub.

   git checkout master
   git pull origin master

4. Create a new branch for your work.

   git checkout -b my-new-branch-name

5. Install npm packages again, just in case they changed.

   npm install

6. Create a new terminal window or tab and run the server there.

   npx @11ty/eleventy --serve

7. Open your browser. View the app in a new tab at http://localhost:8080.
8. Do any work that you need to do. Save changes to the files, and eleventy should rebuild the site automatically and show the changes in the browser.
9. When you are done working, you can stage and commit your changes with git.

   git add .
   git commit -m 'Will add a good commit message about what this change does'

10. Push your branch to GitHub so you can open a new PR. If you cannot remember the current branch name, you can type git status to see the branch name.

    git push origin my-new-branch-name

11. Go to the repository on GitHub. You should see the branch you just pushed. Click the 'Compare & pull request' button to make a new Pull Request.
12. On the Open a Pull Request page, type information a reviewer might need to review your work in the main body. On the right hand menu, use the Settings icon in the Reviewers section to tag reviewers. On the right hand menu, in the Label section add 'Code Review' as a label. Click to Create Pull Request'.