Awesome Open Source
Awesome Open Source

Greenkeeper badge

Pug starter

Table of contents

Project file structure

.
 README.md
 package.json
 src
    _asset
       image
          become-a-web-developer-today.jpg
          logo.png
       js
           all.js
           game.js
    _component
       header
          header.pug
          header.scss
       footer
          footer.pug
          footer.scss
       smart-button
          smart-button.pug
          smart-button.scss
       project-list
          project-list.pug
          project-list.scss
       layout
           base.pug
           general.scss
    _data
       site.yml
       user.json
       menu.yaml
       article.json
    embed.scss
    favicon.ico
    index.pug <---------------- MAIN index
    style.scss <---------------- MAIN style
    contact
        index.pug
    portfolio
        index.pug
    about-me
        index.pug
    my-first-project
        index.pug
    how-i-got-to-work-with-big-companies
        index.pug
 yarn.lock

baseUrl

Note: inline attribute has been updated to embed

Old way:

if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` inline)

New way:

if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` embed)

add modularCss support. When enabled in the config of package.json it will convert all SCSS/SASS files to its correspondent CSS path.

add baseurl support which can be configured for GitHub.io and custom domain. Check package.json config section for

  • deployToGithubIo - (true|false) by default it is set to true and will affect the value of baseUrl when you want to deploy to GitHub.io; You want to set it to false if you want to use customUrl as the value of baseUrl
  • customUrl - if you want baseUrl to have a value like http://my-project.codetap.io or any other one;
  • githubUrl - if you want baseUrl to have a value like http://github.com/marianzburlea/pug-starter.git or any other one;

In the end you can use baseUrl to prefix your paths like:

link(rel="stylesheet", href=`${baseUrl}/style.css`)

or

a(
  title="Is it possible?"
  target="_blank"
  href=`${baseUrl}/article/nice-weather`
)

or

img(alt="Awesome dog" width="100" href=`${baseUrl}/image/cool-dog.jpg`)

YouTube video tutorials

I want to change those tutorials to new ones using the new techniques.

To help you out even more I've put together some YouTube tutorials:

  • Install nodejs, git and github

Install nodejs, git and github

  • How to make a website for free in 3 easy steps 2017

How to make a website for free in 3 easy steps 2017 - CodeTap

  • The nightmare is finally over! HTML5 tutorial on how to build a webpage layout 2017

The nightmare is finally over! HTML5 tutorial on how to build a webpage layout 2017 - CodeTap

  • Build HTML5 website pain free tutorial for beginners 2017

Build HTML5 website pain free tutorial for beginners 2017

Starter package for pug (former jade) template based projects.

Note: an boolean option config.render.sourceFileChange has been added to the package.json. The behaviour differs based on the value:

  1. true - it renders if the source file (pug file) has been changed; This has a much much greater speed when rendering compared to the other option however it's only relevant if you make change to the current file watched by PUG. If you make a change to a file that's extended and resides in a path that contains "_", like a layout one, the change won't be reflected.
  2. false - it renders if any pug file has been changed and compares the output with the destination file (the HTML generated now with the previous generated HTML). This can be slower when the number of files increases.

Live projects built with pug-starter

If you want your project to be listed here leave a message on CodeTap on FaceBook. You're project needs to be at least version one final (no beta / alpha or work in progress) will be accepted.

Prerequisites

The project requires NodeJS v.4+

To install NodeJS visit nodejs download page download the appropiate package for your operatin system, click on the downloaded file, open it and follow the installation procees. If you don't know much about it, just click ALL the NEXT and or INSTALL buttons and choose "I agree" when prompted and you should be fine.

Installation

BEFORE YOU INSTALL: please read the prerequisites

$ npm i

or

$ npm install

Note: if you run into an pngquant-bin error on Windows try running:

npm install [email protected] -D
npm install [email protected] -D

before you run npm start

Usage

To run the project in development mode and open a local server that synchronizes across multiple devices use:

npm start

or

npm run dev

To build the project for production use:

npm run prod

To automatically deploy your project to GitHub pages and make it available at https://[your-username].github.io/[your-project-name] use:

npm run deploy

Style

The project supports both embed and external style sheets. You can have none, one or the other, or both of them.

Single page application style

When you're building a single page app or website, there is no point in having the style sheets loaded from an external file and I'll explain why: the point of loading external style sheets is to allow the browser to cache those files and once you visit another web page of the same website, instead of making another request(s) for the style sheet file(s) to the server and having to download them, if there is no change, the browser will load them from the local drive. In a single page, there is no other page to go to therefore the external file technique doesn't apply.

Multi page application style

In this scenario you can have either both embed and external or just external. The most common scenario is to have only one external style sheet file to be loaded and most of the time that's just fine.

If you want to improve your SEO and user experience even further, I strongly recommend to use a combination of both embed and external. The embed style sheet should only contain the minimum amount of styles for the initial visible part of the page to render. The rest of the styles can be put in the external CSS file.

Auto reset git

If you run npm i, the git history will get reset.

To avoid resetting the git history run npm i --ignore-scripts


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,536,965
Html (431,649
Css (215,077
Scss (18,561
Json (11,360
Website (9,857
Js (9,757
Web (7,809
Sass (6,241
Web Development (2,097
Pug (1,520
Starter Kit (1,394
Starter (1,275
Starter Template (697
Development Environment (524
Bem (371
Starter Project (366
Development Tools (259
Development Workflow (57
Biolerplate (17
Related Projects