https://github.com/csi-lk/website-starter
ES6 / SCSS / Live Reload / CI Based / S3 Deployment Web Starter
https://github.com/csi-lk/website-starter
ci circleci es6 livereload s3 s3-website scss starter
Last synced: 3 months ago
JSON representation
ES6 / SCSS / Live Reload / CI Based / S3 Deployment Web Starter
- Host: GitHub
- URL: https://github.com/csi-lk/website-starter
- Owner: csi-lk
- License: mit
- Created: 2017-04-05T22:08:02.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-06T08:32:32.000Z (almost 9 years ago)
- Last Synced: 2025-04-01T06:13:31.268Z (10 months ago)
- Topics: ci, circleci, es6, livereload, s3, s3-website, scss, starter
- Language: CSS
- Homepage:
- Size: 12.7 KB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @Si1kIfY's Website Starter
[](https://circleci.com/gh/Si1kIfY/website-starter) [](https://scrutinizer-ci.com/g/Si1kIfY/website-starter/) [](https://snyk.io/test/github/si1kify/website-starter) [](https://raw.githubusercontent.com/Si1kIfY/website-starter/master/LICENSE) [](https://twitter.com/intent/tweet?text=For%20some%20reason%20I%20hit%20the%20tweet%20button%20on%20%40Si1kIfY%27s%20%23Website%20Starter%20readme.md%20-%20&url=https%3A%2F%2Fgithub.com%2FSi1kIfY%2Fwebsite-starter)
*ES6 / SCSS / Live Reload / CI Based / S3 Deployment Web Starter*
I got tired of running the same setup process over and over again so I thought I would put it in a repo and open source it.
This is meant as a starter for me, this is how I like to code my static sites feel free to fork and change things 👍
## Requirements
* [Node.js](https://nodejs.org/en/)
* [Yarn package manager](https://yarnpkg.com) or [Node package manager](https://www.npmjs.com/)
* You can use them interchangeably
## Install
1. `git clone https://github.com/Si1kIfY/website-starter `
2. `yarn install` to install dependencies
## Build
1. `yarn build` builds all files from source to the `./build` dir
## Dev
I like to separate all my build steps into different terminal windows, here's a handy table of what they are and what they do:
|Step|Description|
|---|---|
|`lint-js`|runs eslint as per `.eslintrc`|
|`lint-html`|runs htmlhint|
|`test`|runs js and html linter above|
|`serve`|runs a auto reloading local web server on port `8008`|
|`watch-static`|watch & build changes to html / image files|
|`build-static`|build html / image files|
|`watch-css`|watch & build (scss -> css) changes to sass css files|
|`build-css`|build (scss -> css) files|
|`watch-js`|watch & build (incl. es6 -> es5 transpile) changes to js files|
|`build-js`|build (incl. es6 -> es5 transpile) js files|
|`start`|If you are running MacOS + Iterm2 this will auto spawn all above windows in new tabs|
## Deploy
First we'll create a S3 bucket and `s3-website` config by running:
```
./node_modules/.bin/s3-website create -i index.html -u build
```
I'd then suggest setting up the CloudFront disto for the bucket and enable the HTTPS cert.
Now every time you commit+push circleCI will deploy the changes to the bucket for you
Check out [s3-website](https://github.com/klaemo/s3-website) for more CLI options (like reigon for eg.)
If you use CloudFront you will need to remember to manually invalidate the cache on deploy.
*Note: I might look at simplifying this in future, just don't have the time at the moment*
### Deploy manually
You can run `yarn deploy` whenver you like or just copy paste files from the `./build` dir to your s3 bucket.