rayelliott
/
victor-hugo
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #52 from atomtigerzoo/readme-updates 

Improved readability and formatting, added links
This commit is contained in:
Brian Douglas 2017-10-10 13:21:28 -07:00 committed by GitHub
parent feadf57a42 fd2b1adec0
commit 3a831986de
1 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
README.md
View File

@ -1,34 +1,59 @@
# Victor Hugo # Victor Hugo
**A [Hugo](https://gohugo.io/) boilerplate for creating truly epic websites** **A Hugo boilerplate for creating truly epic websites**
This is a boilerplate for using Hugo as a static site generator and Gulp + Webpack as your This is a boilerplate for using [Hugo](https://gohugo.io/) as a static site generator and [Gulp](https://gulpjs.com/) + [Webpack](https://webpack.js.org/) as your asset pipeline.
asset pipeline.
It's setup to use post-css and babel for CSS and JavaScript. Victor Hugo setup to use [PostCSS](http://postcss.org/) and [Babel](https://babeljs.io/) for CSS and JavaScript compiling/transpiling.
This project is released under the [MIT license](LICENSE). Please make sure you understand its implications and guarantees. This project is released under the [MIT license](LICENSE). Please make sure you understand its implications and guarantees.
## Usage ## Usage
Be sure that you have the latest node and npm installed. ### Prerequisites
Next, clone this repository and run: You need to have the latest/LTS [node](https://nodejs.org/en/download/) and [npm](https://www.npmjs.com/get-npm) versions installed in order to use Victor Hugo.
Next step, clone this repository and run:
```bash ```bash
npm install npm install
```
This will take some time and will install all packages necessary to run Victor Hugo and it's tasks.
### Development
While developing your website, use:
```bash
npm start npm start
``` ```
Then visit http://localhost:3000/ - BrowserSync will automatically reload CSS or or
refresh the page when stylesheets or content changes.
To build your static output to the `/dist` folder, use: ```bash
gulp server
```
Then visit http://localhost:3000/ *- or a new browser windows popped-up already -* to preview your new website. BrowserSync will automatically reload the CSS or refresh the whole page, when stylesheets or content changes.
### Static build
To build a static version of the website inside the `/dist` folder, run:
```bash ```bash
npm run build npm run build
``` ```
To get a preview of posts or articles not yet published, run:
```bash
npm run build-preview
```
See [package.json](https://github.com/atomtigerzoo/victor-hugo/blob/readme-updates/package.json#L7) or the included gulp file for all tasks.
## Structure ## Structure
``` ```
@ -62,36 +87,31 @@ will end up being available as `/favicon.ico` and so on...
The `src/js/app.js` file is the entrypoint for webpack and will be built to `/dist/app.js`. The `src/js/app.js` file is the entrypoint for webpack and will be built to `/dist/app.js`.
You can use ES6 and use both relative imports or import libraries from npm. You can use **ES6** and use both relative imports or import libraries from npm.
Any CSS file directly under the `src/css/` folder will get compiled with [PostCSS Next](http://cssnext.io/) Any CSS file directly under the `src/css/` folder will get compiled with [PostCSS Next](http://cssnext.io/)
to `/dist/css/{filename}.css`. Import statements will be resolved as part of the build to `/dist/css/{filename}.css`. Import statements will be resolved as part of the build
## Environment variables ## Environment variables
To seperate the development and production *- aka build -* stages, all gulp tasks run with a node environment variable named either `development` or `production`.
To seperate the development and production *- aka build -* stages, all gulp tasks run with a node environment variable named either `development` or You can access the environment variable inside the theme files with `getenv "NODE_ENV"`. See the following example for a conditional statement:
`production`.
You can access the environment variable inside the theme files with
`getenv "NODE_ENV"`. See the following example for a conditional statement:
{{ if eq (getenv "NODE_ENV") "development" }}You're in development!{{ end }} {{ if eq (getenv "NODE_ENV") "development" }}You're in development!{{ end }}
All tasks starting with *build* set the environment variable to `production` - All tasks starting with *build* set the environment variable to `production` - the other will set it to `development`.
the other will set it to `development`.
## Deploying to netlify ## Deploying to Netlify
- Push your clone to your own GitHub repository. - Push your clone to your own GitHub repository.
- [Create a new site on Netlify](https://app.netlify.com/start) and link the repository. - [Create a new site on Netlify](https://app.netlify.com/start) and link the repository.
Now netlify will build and deploy your site whenever you push to git. Now Netlify will build and deploy your site whenever you push to git.
You can also click this button: You can also click this button:
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/victor-hugo) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/victor-hugo)
## Enjoy!! 😸
## Enjoy!!