DVC WiCS Website

Our official website!

Scroll down below to learn how you can contribute to our website!

---

Table of Contents

• Install
  • Prerequisite
  • Forking
  • Cloning
  • Installing Dependencies
• Develop
  • Tech Stack
  • Project Structure and Files
  • Making Changes
  • Using Git
• Contribute
  • Making Pull Request
  • Contributors

---

Install

Prerequisite

Before we start, you need to have these installed in your computer:

• Git
• Node.js

Forking

1. Login to your GitHub account.
2. Click the "Fork" button at the top right of this repository.
   
   This should create a fork of the repository in your own account.
   The forked repository is usually located in https://github.com/<YOUR USERNAME>/wics-dvc.github.io.

Cloning

1. In your forked repository page, click the green "Clone" button at the top right of the page.
   
   
2. Copy the link that popped up.
   
   
3. Open a terminal (Mac) or command line (Windows).
   
4. Type git clone <THE COPIED URL> and press enter.
   (E.g.: git clone https://github.com/nadyafebi/wics-dvc.github.io.git)
   
5. If successful, there should be a new folder called wics-dvc.github.io in your computer.

Installing Dependencies

1. Open a terminal/command line in the project folder.
2. Type npm install and press enter.
   This will install all Node.js modules that we need to develop this project.
3. Type npm install gulpjs/gulp-cli -g and press enter.
   This will install Gulp (see the Tech Stack section below to learn more).

Now you're all set to develop the website!

Develop

Tech Stack

• Node.js
  Node.js is a JavaScript run-time environment that executes JavaScript code outside of a browser.
  We use it so we can work with Gulp and Panini in our project.
• Gulp
  Gulp is a toolkit for automating development workflow.
  When any of the HTML files changed, it calls Panini to process those files.
• Panini
  Panini is a simple HTML files generator.
  It will convert the templates in the src folder into HTML pages.
• Bootstrap
  Boostrap is a responsive front-end framework for designing websites.
  It makes our website looks pretty!

Project Structure and Files

• wics-dvc.github.io
  • All the HTML files inside this folder are the one being served to the website.
    (E.g.: https://wicsdvc.com/ points to index.html)
    Any changes to HTML files directly inside this folder will be overwritten by Panini.
    Instead, change the HTML files inside the src folder.
  • css/main.css
    This CSS files is the one we use to customize our website. It also overwrites Bootstrap components.
  • img
    Put any images inside this folder.
  • src
    • layouts/default.html
      This is the default layout. Any code here will be applied to all the pages. You can add/remove CSS files, JS files, and fonts here.
    • pages
      All the pages here will be converted by Panini to a full HTML files in the main folder.
      (E.g.: wics-dvc.github.io/src/pages/index.html => wics-dvc.github.io/index.html)
    • partials
      This folder store HTML components that can be reused in multiple pages.

Files and folders that are not mentioned in the above list should not be changed or removed.

Making Changes

You can use your favorite text editor to change any of the files.

Before starting:

1. Open a terminal/command line.
2. Type npm start and press enter.

This will run Gulp in the terminal. Do not close this terminal while you're developing.

To see the website you're developing, open the wics-dvc.github.io/index.html file. Every time you make any changes, you can just refresh the browser (as long as the Gulp terminal is open).

Using Git

Git is a version control system for tracking changes in computer files.

After you've finished changing the website:

1. Open a terminal/command line.
2. Type git add * and press enter.
3. Type git commit -m "<DESCRIBE YOUR CHANGES HERE>" and press enter.
   (E.g.: git commit -m "Add new pages")
4. Type git push and press enter.

This whole process will add and upload your changes to GitHub. You can see the new changes you made at the forked repository page.

If you want to finalize your changes to the actual website, check out the next section.

Contribute

Making Pull Request

1. Go to your forked repository page.
2. Click the 'Pull Requests' tab on top of the page.
3. Click the 'New Pull Request' button on the right.
4. Describe your changes in the form.
5. Click 'Create Pull Request' if you're done.

Congrats for making it this far! If we accept your pull request, the changes you made can be seen in our website and we will add your name to the list below.

Contributors

• Nadya Djojosantoso (@nadyafebi)