Skip to content

Latest commit

 

History

History
78 lines (42 loc) · 5.38 KB

DEVELOPMENT.md

File metadata and controls

78 lines (42 loc) · 5.38 KB
Raw

Development

Technology

The project is based on using the same technology as the a11yproject.

Using Eleventy, to build a simple static site which uses nodeJS to generate and deploying with Github Actions to Github Pages hosts the site.

Eleventy relies on Markdown, Sass, Nunjucks, and JSON to function.

It may be helpful to familiarize yourself with these technologies, depending on what you want to do. For more information, check our our Contributor documentation.

Requirements

You'll need access to the following programs and technology in order to get the website running on your computer to work on:

  1. A command line application such as Terminal.
  2. Git version control and a GitHub account.
    • You can check to see if Git is already installed on your computer by typing git --version into your command line application. If it is installed it will list the currently installed version (e.g. git version 2.18.0).
    • If you prefer to use a GUI to work with version control, GitHub offers a free desktop app.
  3. Node.js, a programming environment powered by JavaScript.
    • You can check to see if Node.js is already installed on your computer by typing node -v into your command line application. If it is installed it will list the currently installed version (e.g. v16.4.0). This project requires a minimum version of 16.0.0.
    • It may also be helpful to use a program such as nvm to help manage your Node.js versions. This will ensure that the version of Node.js your computer uses to run various things won't conflict with an updated version. For Windows users, you can use coreybutler/nvm-windows.

Installation

Once you have met the prerequisites, follow these steps to install the website on your computer:

  1. Fork the repository via the Github web by clicking the "Fork" button in the top right corner.

  2. After you created your fork from the Github web site. Clone your fork repository by entering this command into your command line application: Replace "$githubUsername" by your github username.

git clone https://github.com/$githubUsername/gc-da11yn.github.io.git

It will create a version controlled copy of the website in the directory you entered the command in.

  1. Navigate into the project's root directory by typing the following change directory command in your command line application.

cd gc-da11yn.github.io/

  1. Add a reference to the upstream.

git remote add upstream https://github.com/gc-da11yn/gc-da11yn.github.io.git

  1. Fetch all the latest changes. It will make you local instance is aware of all the recent change made to upstream project, but nothing will be updated in your code.

git fetch --allEnsure your local working copy include all the recent changesgit rebase upstream/main

6a. Be attentive to rebase conflict, in such situation you can rollback by running

git rebase --abort

and then use a different strategy to update your working copyEverything went well

6b. You will see the following message if it went well

Successfully rebased and updated refs/heads/main.

  1. Install the project's Node.js modules by typing npm install into your command line application. A list of these modules should be displayed after they are downloaded and installed.

Running the website

After cloning and installing project Node.js modules, type npm start into your command line application. This will tell Node.js to compile the project and turn it into a website.

Your command line application will then display some information about Eleventy, including a line that starts with Local:. You can copy the URL it points to (it should read something like http://localhost:3000) and paste it into a browser tab. This will load a local copy of the website that you can interact with to preview your changes.

You can also use the External URL to preview the local copy on another device connected to the same network, which helps you check to see how the site looks and functions on things like smartphones. This is done via Browsersync.

Updating the website

Saving project files will make Node.js regenerate the website to reflect the changes you made. Your command line application will display some new messaging to reflect this, including any errors you might accidentally make. Don't worry! Since the site uses version control, you're not in danger of seriously breaking anything. If you fix the error, Node.js should continue to run.

Make sure you edit the files in the src/ subdirectory. Any edits made in the _site subdirectory will be overwritten by the next change to any file in src/ and all your hard work will be lost!

Quitting

You can tell Node.js to stop running by pressing the Control and C keys at the same time in your command line application, or by closing the command line application window or tab.