Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.
GPL-3.0 License
If you're looking to start a career as a Web Developer, become hireable and access top highest paying jobs on the market, visit WoW Job
.
├── 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
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
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`)
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:
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:
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.
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.
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
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
The project supports both embed and external style sheets. You can have none, one or the other, or both of them.
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.
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.
If you run npm i
, the git history will get reset.
To avoid resetting the git history run npm i --ignore-scripts