https://github.com/pierrickgt/pcgb
PCGB: a simple PostCSS boilerplate to kickstart your static website project
https://github.com/pierrickgt/pcgb
boilerplate gulpfile postcss
Last synced: 4 months ago
JSON representation
PCGB: a simple PostCSS boilerplate to kickstart your static website project
- Host: GitHub
- URL: https://github.com/pierrickgt/pcgb
- Owner: PierrickGT
- Created: 2016-06-17T09:27:12.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-02-08T11:41:09.000Z (over 9 years ago)
- Last Synced: 2025-04-02T07:04:01.114Z (about 1 year ago)
- Topics: boilerplate, gulpfile, postcss
- Language: JavaScript
- Size: 6.84 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
PCGB: a simple PostCSS boilerplate to kickstart your static website project
## Prerequisite
You need to have the following softwares installed in order to run this project.
Git: https://git-scm.com/downloads
Node.js: https://nodejs.org/en/
## Installation
First, you need to clone the project on your computer by typing the following command in your terminal
```
git clone git@github.com:PierrickGT/PCGB.git
```
Then, you need to install the dependencies with this command
```
npm install
```
## Build
To build the project, run this command
```
npm run build
```
Your rendered site is then available in the public folder.
## Launch
You can then launch your local server with the command
```
npm start
```
## Deployment
To deploy your static site on Github pages, you first need to write the Github URL of your project at the line 54 of gulpfile.js in order to change the base url of PostCSS Assets.
```
baseUrl: '', // Write your Github URL here
```
Read the doc for further informations: https://github.com/assetsjs/postcss-assets#base-url
Then, you have to write the name of your Github repository at the line 100 of gulpfile.js to add the path of your Github project to each href.
```
.pipe($.replace('href="/', 'href="/name-of-your-repository/')) // Write your Github repository name here
```
In order to deploy on Github Pages, you need to have a gh-pages branch that you can create by typing the following commands:
```
git checkout --orphan gh-pages
git rm -rf .
touch README.md
git add README.md
git commit -m "Init gh-pages"
git push --set-upstream origin gh-pages
git checkout master
```
Finally, you can deploy your static site on Github Pages with the command
```
npm run deploy
```
## Structure
```
├── public/
│ ├── assets/
│ │ ├── favicon/
│ │ ├── fonts/
│ │ ├── images/
│ │ ├── js/
│ │ ├── stylesheets/
│ ├── index.html
├── source/
│ ├── css/
│ ├── favicon/
│ ├── fonts/
│ ├── html/
│ ├── images/
│ ├── js/
│ ├── index.html
├── gulpfile.js
├── package.json
```
## Dependencies
The following dependencies have been used.
### HTML
#### Gulp HTML Tag Include
https://github.com/zaharin/gulp-html-tag-include
### PostCSS
#### Autoprefixer
https://github.com/postcss/autoprefixer
#### CSS Nano
http://cssnano.co
#### CSS Next
http://cssnext.io
#### PreCSS
https://github.com/jonathantneal/precss
#### PostCSS Assets
https://github.com/assetsjs/postcss-assets
#### Sourcemaps
https://github.com/floridoo/gulp-sourcemaps
### Javascript
#### Concatenation
https://github.com/contra/gulp-concat
#### Minification
https://github.com/terinjokes/gulp-uglify
#### Sourcemaps
https://github.com/floridoo/gulp-sourcemaps
### Images
#### Minification
https://github.com/sindresorhus/gulp-imagemin
#### Cache
https://github.com/jgable/gulp-cache
### Static server
#### Browsersync
https://www.browsersync.io/docs/gulp/