A Simple Boilerplate for Pug and Semantic UI

hello-pug-semantic-ui

This repository contains a boilerplate for start using Pug and Semantic UI to build a clean website consisted of static HTML/CSS/JavaScript files.

Prerequisite

  • Windows, macOS, Linux, all OK!
  • Install Node.js as well as Gulp (npm install -g gulp-cli) before typing the commands below.

How to build this website

  1. Simply fork/clone the repo
  2. npm install
  3. gulp
  4. Done!

These simple steps would build the entire Semantic UI framework as well as pug files in the pug directory.

After you edit pug files, you probably want to only compile them (not the Semantic UI framework) — type gulp pug for that. Read the gulpfile.js to find out why that would not compile the framework.

Next step?

You might want to check out browser-sync for auto-reloading the web browser whenever the source code is edited, gulp-htmlhint for syntax-checking the produced HTML files, gulp-purifycss for removing unused CSS code from the huge Semantic UI CSS file.

Good luck!

For an example of more advanced gulpfile.js, see junkato.jp/gulpfile.js at master used to build junkato.jp.

package.json content

{
  "name": "hello-pug-semantic-ui",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/arcatdmz/hello-pug-semantic-ui.git"
  },
  "author": "Jun Kato",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/arcatdmz/hello-pug-semantic-ui/issues"
  },
  "homepage": "https://github.com/arcatdmz/hello-pug-semantic-ui#readme",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-pug": "^3.3.0",
    "semantic-ui": "^2.2.13"
  }
}