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:
- Terminal, Shell, or Console application.
- git for version control
- Node and npm
- A Text Editor of your choice, e.g. Sublime Text (recommended), Textmate, VS Code
- A browser of your choice, e.g. Chrome, Firefox, Edge, Safari
Below, you will find more specific instructions for your operating system.
On MacOS
- Terminal is a shell that comes pre-installed on Macs. Find it in the Application folder and open it.
- Install homebrew, which you will use to install Node.
- Check if brew is installed by running
brew -v
in Terminal.
- Install node in homebrew by running
brew install node
in Terminal.
- Check if node and npm are installed by running
node -v
and npm -v
in Terminal.
- Open your browser.
On Linux
- Linux usually comes pre-installed with at least one terminal emulator: gnome-terminal, konsole, xterm, eterm. Find it and open it.
- Install git with
sudo apt install git-all
. Check it is installed by running git -v
in terminal.
- Install node with
apt-get
by running sudo apt install nodejs
in your terminal.
- Install npm with
apt-get
by running sudo apt install npm
in your terminal.
- Check if node and npm are installed by running
node -v
and npm -v
in terminal.
- Open your browser.
On PC
- Install a git terminal emulator by downloading the build and installing it. Open it.
- Install node and npm by downloading the Node.js installer.
- 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.
- Open your browser.
Getting Started (The First Time)
GitHub account firsts
- Create a GitHub account.
- In your terminal, generate a SSH public key, following the steps in this guide. Copy the public key.
- In GitHub, go to your Account Settings, and save the public key to your SSH and GPG keys.
GitHub Repository Firsts
- Git Clone this repository onto your machine (see link for instructions).
- Change your directory to the cloned repository:
cd mcs-web
in terminal.
- Install dependencies:
npm install
in terminal.
- Build the site for the first time (generating a
_site
directory) by running npx @11ty/eleventy
in terminal.
Running the server
- Run
npx @11ty/eleventy --serve
in terminal to start the app server.
- 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.
- Open terminal and change your directory until you are in this repository's directory.
- Open your Text Editor, and open this repository as a project.
- Pull down the latest code changes from GitHub.
git checkout master
git pull origin master
- Create a new branch for your work.
git checkout -b my-new-branch-name
- Install npm packages again, just in case they changed.
npm install
- Create a new terminal window or tab and run the server there.
npx @11ty/eleventy --serve
- Open your browser. View the app in a new tab at
http://localhost:8080
.
- 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.
- 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'
- 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
- 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.
- 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'.