HKOSCon 2016 Website

This site is generated by node.js gulp routine. To change anything, please follow the workflow.

---

Preparation

To start working, please start by installing nodejs and npm in your environment. Please make sure that the command node is callable before move on.

for Fedora, CentOS, RHEL

Most of the package manager is using to old version of nodejs, it is recommended to download from https://nodejs.org and install.

su
tar xvf node-<VERSION>-linux-*.tar.xz -C /usr/local --strip-components=1
npm install -g npm

for Ubuntu, Debian

Most of the package manager is using to old version of nodejs, it is recommended to download from https://nodejs.org and install.

sudo tar xvf node-<VERSION>-linux-*.tar.xz -C /usr/local --strip-components=1
sudo npm install -g npm

In Ubuntu, please follow these commands to install with apt-get :

sudo apt-get install nodejs
sudo ln -s /usr/bin/nodejs /usr/local/bin/node

for Mac OS

It is recommended to use Homebrew to install nodejs.

Open your terminal then type these commands:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node

After installing node and npm

You'd need to install node packages for the repository. Go into the folder that contain this file. Run this command:

npm install

---

Development

Folder Structure

The repository contains these files and folders:

gulpfile.js   - gulp automation files, like Makefile in nodejs
package.json  - node js configurations
README.MD     - this file
configs/      - config files for the generation process
public/       - all files in this folder is generated from src
                should serve this folder as document root for production
src/          - a folder to contain all source codes
  css/        - all scss / css files
    lib/      - css libraries downloaded (e.g. bootstrap)
  data/       - contains data json of topics, speakers, tags and etc
  images/     - image files
  layouts/    - HTML layout files (SWIG template)
  pages/      - HTML page files (SWIG template)
  scripts/    - all javascripts
    vendors/  - javascripts to be used directly (instead of webpack bundle)

Workflow

To start working:

1. Clone this repository
2. Open your terminal the folder containing this README
3. Type the command npm run dev
4. Your browser should be opened itself. If not, open your browser and go to: http://localhost:3000
5. Modifying files should reload the browser. If not, just manually reload it.
6. When you're happy with the result, commit the changes and push to the origin repository.

HTML

The site HTML is generated by SWIG (a Javascript template engine). The syntax is similar to normal HTML. It should be easy to read and work with.

It supports layout, include and many nice feature to work with.

Please read their documentation for more details.

Most pages are extending the default.html, except the root index file is extending front.html.

Javascript

To change any javascript, you can modify src/scripts/client.js.

Webpack will bundle it (and its dependencies, if any) into the assets/bundle.js.

CSS

CSS file assets/style.css is generated from src/css/style.scss.

As the extension hinted, it is a SCSS file. SCSS is a superset of CSS. That means you can do ordinary CSS in there. The bootstrap css file is bundled into assets/style.css by gulp-sass.

For more information about SCSS, please read the documentation.

---

Production

There are 2 ways to host the site in production environment:

Method 1: Build the Site statically

1. Build the site by command: npm run build.
2. Host the output folder.

Method 2: Reverse Proxy with nodejs

1. Export the parameter PORT to specify the port number which nodejs can bind to (e.g. export PORT=8080).
2. Run npm run start
3. Reverse proxy the port with your favorite web server (e.g. Apache, Nginx).