├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .github └── workflows │ └── publishwebsite.yml ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── _common.njk ├── _skeleton.njk ├── index.njk ├── package-lock.json ├── package.json ├── src ├── index.js └── scss │ ├── _bootswatch.scss │ ├── _variables.scss │ └── index.scss └── style.scss /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | continuation_indent_size = 4 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true 5 | }, 6 | extends: [ 7 | 'plugin:react/recommended', 8 | 'standard' 9 | ], 10 | globals: { 11 | Atomics: 'readonly', 12 | SharedArrayBuffer: 'readonly' 13 | }, 14 | parserOptions: { 15 | ecmaFeatures: { 16 | jsx: true 17 | }, 18 | ecmaVersion: 2018, 19 | sourceType: 'module' 20 | }, 21 | plugins: [ 22 | 'react' 23 | ], 24 | rules: { 25 | }, 26 | settings: { 27 | react: { 28 | version: 'detect' 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /.github/workflows/publishwebsite.yml: -------------------------------------------------------------------------------- 1 | name: Publish Website 2 | 3 | on: 4 | push: 5 | branches: # triggers on any push to master 6 | - master 7 | 8 | jobs: 9 | build-deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v1 13 | - run: node --version 14 | - name: Cache node modules 15 | uses: actions/cache@v1 16 | with: 17 | path: ~/.npm 18 | key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }} 19 | restore-keys: | 20 | ${{ runner.os }}-npm- 21 | - name: Install dependencies 22 | run: npm ci 23 | - name: Test 24 | run: npm run test --if-present 25 | - name: Build 26 | run: npm run build --if-present 27 | - name: Deploy 28 | uses: peaceiris/actions-gh-pages@v3 29 | with: 30 | github_token: ${{ secrets.GITHUB_TOKEN }} 31 | publish_dir: ./dist 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | dist 3 | node_modules 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to this project 2 | 3 | * [Contributors Agreement](#user-content-contributors-agreement) 4 | * [Introduction](#Introduction) 5 | * [I don't want to read this whole thing I just have a question!!!](#user-content-i-dont-want-to-read-this-whole-thing-i-just-have-a-question) 6 | * [How Can I Contribute?](#user-content-how-can-i-contribute) 7 | * [Reporting Bugs](#user-content-reporting-bugs) 8 | * [Suggesting Enhancements](#user-content-suggesting-enhancements) 9 | * [Creating Pull Requests](#user-content-creating-pull-requests) 10 | 11 | ## Contributors Agreement 12 | 13 | By submitting patches to this project you agree to allow them to be redistributed under the project's license, according to the normal forms and usages of the open-source community. 14 | 15 | ## Introduction 16 | 17 | First off, thank you for considering contributing to this project. It's people like you that make it such a great tool. 18 | 19 | Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue, assessing changes, and helping you finalize your pull requests. 20 | 21 | This is an open source project and we love to receive contributions from our community — you! There are many ways to contribute, from writing tutorials or blog posts, improving the documentation, submitting bug reports and feature requests or writing code which can be incorporated into the main project itself. 22 | 23 | ### I don't want to read this whole thing I just have a question!!! 24 | 25 | We currently allow our users to use the issue tracker for support questions. But please be wary that maintaining an open source project can take a lot of time from the maintainers. If asking for a support question, state it clearly and take the time to explain your problem properly. Also, if your problem is not strictly related to this project we recommend you to use Stack Overlow instead. 26 | 27 | ## How Can I Contribute? 28 | 29 | ### Reporting Bugs 30 | 31 | Before creating bug reports, please check the existing bug reports as you might find out that you don't need to create one. When you are creating a bug report, please include as many details as possible. 32 | 33 | #### How Do I Submit A (Good) Bug Report? 34 | 35 | Bugs are tracked as [GitHub issues](https://guides.github.com/features/issues/). Create an issue on the project's repository and provide the following information. 36 | 37 | Explain the problem and include additional details to help maintainers reproduce the problem: 38 | 39 | * **Use a clear and descriptive title** for the issue to identify the problem. 40 | * **Describe the exact steps which reproduce the problem** in as many details as possible. For example, start by explaining how you used the project. When listing steps, **don't just say what you did, but explain how you did it**. 41 | * **Provide specific examples to demonstrate the steps**. It's always better to get more information. You can include links to files or GitHub projects, copy/pasteable snippets or even print screens or animated GIFS. If you're providing snippets in the issue, use [Markdown code blocks](https://help.github.com/articles/markdown-basics/#multiple-lines). 42 | * **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior. 43 | * **Explain which behavior you expected to see instead and why.** 44 | * **If the problem wasn't triggered by a specific action**, describe what you were doing before the problem happened and share more information using the guidelines below. 45 | 46 | Provide more context by answering these questions: 47 | 48 | * **Did the problem start happening recently** (e.g. after updating to a new version) or was this always a problem? 49 | * If the problem started happening recently, **can you reproduce the problem in an older version?** What's the most recent version in which the problem doesn't happen? 50 | * **Can you reliably reproduce the issue?** If not, provide details about how often the problem happens and under which conditions it normally happens. 51 | 52 | Include details about your configuration and environment: 53 | 54 | * **Which version of the project are you using?** 55 | * **What's the name and version of the OS you're using**? 56 | * **Any other information that could be useful about you environment** 57 | 58 | ### Suggesting Enhancements 59 | 60 | This section guides you through submitting an enhancement suggestion for this project, including completely new features and minor improvements to existing functionality. Following these guidelines helps maintainers and the community understand your suggestion and find related suggestions. 61 | 62 | Before creating enhancement suggestions, please check the list of enhancements suggestions in the issue tracker as you might find out that you don't need to create one. When you are creating an enhancement suggestion, please include as many details as possible. 63 | 64 | #### How Do I Submit A (Good) Enhancement Suggestion? 65 | 66 | Enhancement suggestions are tracked as [GitHub issues](https://guides.github.com/features/issues/). Create an issue on the project's repository and provide the following information: 67 | 68 | * **Use a clear and descriptive title** for the issue to identify the suggestion. 69 | * **Provide a step-by-step description of the suggested enhancement** in as many details as possible. 70 | * **Provide specific examples to demonstrate the steps**. It's always better to get more information. You can include links to files or GitHub projects, copy/pasteable snippets or even print screens or animated GIFS. If you're providing snippets in the issue, use [Markdown code blocks](https://help.github.com/articles/markdown-basics/#multiple-lines). 71 | * **Describe the current behavior** and **explain which behavior you expected to see instead** and why. 72 | * **List some other similar projects where this enhancement exists.** 73 | * **Specify which version of the project you're using.** 74 | * **Specify the current environment you're using.** if this is a useful information. 75 | 76 | ### Creating Pull Requests 77 | 78 | #### How Do I Submit A (Good) Pull Request? 79 | 80 | * **Be warned that the contributors agreement displayed on top of this document is applicable as soon as you create a pull request**. 81 | * **Use a clear and descriptive title** for the pull request to state the improvement you made to the code or the bug you solved. 82 | * **Provide a link to the related issue** if the pull request is a follow up of an existing bug report or enhancement suggestion. 83 | * **Comment why this pull request represents an enhancement** and give a rationale explaining why you did it that way and not another way. 84 | * **Use the same coding style than the one used in this project**. 85 | * **Welcome suggestions from the maintainers to improve your pull request**. 86 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Nicolas Vanhoren 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Parcel Github Pages Boilerplate 3 | 4 | [![Publish Website](https://github.com/nicolas-van/parcel-github-pages-boilerplate/workflows/Publish%20Website/badge.svg)](https://github.com/nicolas-van/parcel-github-pages-boilerplate/actions?query=workflow%3A%22Publish+Website%22) 5 | 6 | A Parcel boilerplate to automatically deploy on Github Pages using Github Actions. 7 | 8 | [Demonstration website deployed here.](https://nicolas-van.github.io/parcel-github-pages-boilerplate/) 9 | 10 | ## Included tools and libraries 11 | 12 | * [Parcel](https://parceljs.org/): The zero configuration web application bundler 13 | * [Babel](https://babeljs.io/): The Javascript compiler. It's used implicitly by Parcel. Already contains a configuration for [React](https://reactjs.org/). 14 | * [Sass](https://sass-lang.com/): The CSS pre-compiler. 15 | * [Bootstrap 4](https://getbootstrap.com/): The CSS framework, its SCSS files are compiled by Parcel which allows to override the theme. (The provided theme is [Cerulean from Bootswatch](https://bootswatch.com/cerulean/).) 16 | * [Eslint](https://eslint.org/) with the [standard](https://standardjs.com/) configuration: Because everyone should use a linter nowadays. 17 | * [Nunjucks](https://mozilla.github.io/nunjucks/): The best Javascript template engine available. Useful to have multiple different pages on your website. 18 | * [Font Awesome](https://fontawesome.com/): Everyone needs icons right ? The provided version does not use a CDN, they are automatically bundled during the build. 19 | 20 | ## How to use it 21 | 22 | * Fork this repository and publish it in a new Github repository. 23 | * Go in the settings of your repository and under `Github Pages` confirm that you want your Github Pages website to be built from the `gh-pages` branch. The settings page should then indicate you the URL of your deployed website, which should be `https://.github.io//` in most cases. 24 | * Change something in your website to trigger a build and deployment (as example changing the text in `index.njk`). 25 | 26 | Any following push to the `master` branch will automatically trigger the Github Actions workflow that will build and deploy your website to Github Pages. 27 | 28 | ### Commands 29 | 30 | To install the requirements: 31 | 32 | ``` 33 | npm install 34 | ``` 35 | 36 | To start the project in development mode (automatically re-compiles the code): 37 | 38 | ``` 39 | npm start 40 | ``` 41 | 42 | To check the code with eslint (the CI will fail if this step doesn't pass): 43 | 44 | ``` 45 | npm run lint 46 | ``` 47 | 48 | To automatically fix the lint problems: 49 | 50 | ``` 51 | npm run lint:fix 52 | ``` 53 | 54 | ## Contribution 55 | 56 | [See the contribution guide.](./CONTRIBUTION.md) 57 | 58 | ## License 59 | 60 | [See the license.](./LICENSE.md) 61 | 62 | ## Other Github Pages related projects 63 | 64 | I'm a fan of Github Pages for the possibilities it offers to anyone to publish a website for free. I have multiple projects that could be of interest if that's your case too: 65 | 66 | * [Easy Markdown to Github Pages](https://nicolas-van.github.io/easy-markdown-to-github-pages/) 67 | * [Bootstrap 4 Github Pages](https://nicolas-van.github.io/bootstrap-4-github-pages/) 68 | -------------------------------------------------------------------------------- /_common.njk: -------------------------------------------------------------------------------- 1 | {# The common template for all the pages #} 2 | 3 | {% extends "_skeleton.njk" %} 4 | 5 | {% block body %} 6 |
7 |

Parcel Github Pages Boilerplate

8 |
9 |
10 | {% block content %} 11 | {% endblock %} 12 |
13 |
14 |
15 |

16 | 17 | Powered by Parcel Github Pages Boilerplate 18 | 19 |

20 |
21 |
22 | {% endblock %} 23 | -------------------------------------------------------------------------------- /_skeleton.njk: -------------------------------------------------------------------------------- 1 | {# The basic HTML skeleton for the whole application #} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Parcel Github Pages Boilerplate 10 | 11 | 12 | 13 | 14 | 15 | 16 | {% block body %} 17 | {% endblock %} 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /index.njk: -------------------------------------------------------------------------------- 1 | {# The main page of the application #} 2 | 3 | {% extends "_common.njk" %} 4 | 5 | {% block content %} 6 |

7 | Hello. 8 |

9 |

10 | This is the demonstration website of the Parcel Github Pages Boilerplate. 11 |

12 |

13 | 14 | See the Github project here for documentation. 15 | 16 |

17 | {% endblock %} 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "parcel-github-pages-boilerplate", 3 | "version": "1.0.0", 4 | "description": "A Parcel boilerplate to deploy on Github Pages using Github Actions.", 5 | "scripts": { 6 | "start": "rm -rf .cache dist && parcel index.njk", 7 | "build": "rm -rf .cache dist && parcel build index.njk --public-url ./", 8 | "lint": "eslint \".*.js\" \"src/**/*.js\"", 9 | "lint:fix": "npm run lint -- --fix", 10 | "test": "npm run lint" 11 | }, 12 | "author": "", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "@babel/core": "^7.8.4", 16 | "@babel/preset-env": "^7.8.4", 17 | "@babel/preset-react": "^7.8.3", 18 | "eslint": "^6.8.0", 19 | "eslint-config-standard": "^14.1.0", 20 | "eslint-plugin-import": "^2.20.1", 21 | "eslint-plugin-node": "^11.0.0", 22 | "eslint-plugin-promise": "^4.2.1", 23 | "eslint-plugin-react": "^7.18.3", 24 | "eslint-plugin-standard": "^4.0.1", 25 | "marked": "^0.8.0", 26 | "nunjucks": "^3.2.0", 27 | "parcel-bundler": "^1.12.4", 28 | "parcel-plugin-nunjucks": "^2.2.0", 29 | "sass": "^1.25.0" 30 | }, 31 | "dependencies": { 32 | "@fortawesome/fontawesome-free": "^5.12.1", 33 | "bootstrap": "^4.4.1", 34 | "core-js": "^3.6.4", 35 | "jquery": "^3.5.0", 36 | "popper.js": "^1.16.1", 37 | "react": "^16.12.0", 38 | "react-dom": "^16.12.0", 39 | "regenerator-runtime": "^0.13.3" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 2 | // import some polyfill to ensure everything works OK 3 | import 'core-js/stable' 4 | import 'regenerator-runtime/runtime' 5 | 6 | // import bootstrap's javascript part 7 | import 'bootstrap' 8 | 9 | // import font awesome fonts 10 | import '@fortawesome/fontawesome-free/css/all.css' 11 | 12 | /* 13 | Put the JavaScript code you want below. 14 | */ 15 | 16 | console.log('Hey look in your browser console. It works!') 17 | -------------------------------------------------------------------------------- /src/scss/_bootswatch.scss: -------------------------------------------------------------------------------- 1 | // Cerulean 4.3.1 2 | // Bootswatch 3 | 4 | 5 | @mixin btn-shadow($color){ 6 | @include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%)); 7 | } 8 | 9 | $text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) !default; 10 | 11 | // Navbar ====================================================================== 12 | 13 | .bg-primary { 14 | @include btn-shadow($primary); 15 | } 16 | 17 | .bg-dark { 18 | @include btn-shadow($blue); 19 | } 20 | 21 | .bg-light { 22 | @include gradient-y-three-colors(lighten($gray-200, 8%), $gray-200, 60%, darken($gray-200, 2%)); 23 | } 24 | 25 | .navbar-brand, 26 | .nav-link { 27 | text-shadow: $text-shadow 28 | } 29 | 30 | // Buttons ===================================================================== 31 | 32 | .btn { 33 | text-shadow: $text-shadow 34 | } 35 | 36 | .btn-primary { 37 | @include btn-shadow($primary); 38 | } 39 | 40 | .btn-secondary { 41 | @include btn-shadow($secondary); 42 | color: $gray-700; 43 | } 44 | 45 | .btn-success { 46 | @include btn-shadow($success); 47 | } 48 | 49 | .btn-info { 50 | @include btn-shadow($info); 51 | } 52 | 53 | .btn-warning { 54 | @include btn-shadow($warning); 55 | } 56 | 57 | .btn-danger { 58 | @include btn-shadow($danger); 59 | } 60 | 61 | .btn-light { 62 | @include btn-shadow($light); 63 | } 64 | 65 | .btn-dark { 66 | @include btn-shadow($dark); 67 | } 68 | 69 | 70 | // Typography ================================================================== 71 | 72 | .text-secondary { 73 | color: $gray-500 !important; 74 | } 75 | 76 | .bg-primary, 77 | .bg-success, 78 | .bg-info, 79 | .bg-warning, 80 | .bg-danger, 81 | .bg-dark { 82 | h1, h2, h3, h4, h5, h6 { 83 | color: $white; 84 | } 85 | } 86 | 87 | // Tables ====================================================================== 88 | 89 | // Forms ======================================================================= 90 | 91 | // Navs ======================================================================== 92 | 93 | .dropdown-menu { 94 | .dropdown-header { 95 | color: $gray-600; 96 | } 97 | } 98 | 99 | // Indicators ================================================================== 100 | 101 | // Progress bars =============================================================== 102 | 103 | // Containers ================================================================== 104 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Cerulean 4.3.1 2 | // Bootswatch 3 | 4 | // 5 | // Color system 6 | // 7 | 8 | $white: #fff !default; 9 | $gray-100: #f8f9fa !default; 10 | $gray-200: #e9ecef !default; 11 | $gray-300: #dee2e6 !default; 12 | $gray-400: #ced4da !default; 13 | $gray-500: #adb5bd !default; 14 | $gray-600: #868e96 !default; 15 | $gray-700: #495057 !default; 16 | $gray-800: #343a40 !default; 17 | $gray-900: #212529 !default; 18 | $black: #000 !default; 19 | 20 | $blue: #033C73 !default; 21 | $indigo: #6610f2 !default; 22 | $purple: #6f42c1 !default; 23 | $pink: #e83e8c !default; 24 | $red: #C71C22 !default; 25 | $orange: #fd7e14 !default; 26 | $yellow: #DD5600 !default; 27 | $green: #73A839 !default; 28 | $teal: #20c997 !default; 29 | $cyan: #2FA4E7 !default; 30 | 31 | $primary: $cyan !default; 32 | $secondary: $gray-200 !default; 33 | $success: $green !default; 34 | $info: $blue !default; 35 | $warning: $yellow !default; 36 | $danger: $red !default; 37 | $light: $gray-100 !default; 38 | $dark: $gray-800 !default; 39 | 40 | // Body 41 | 42 | $body-color: $gray-700 !default; 43 | 44 | // Fonts 45 | 46 | $headings-color: $cyan !default; 47 | 48 | // Dropdowns 49 | 50 | $dropdown-link-color: $body-color !default; 51 | $dropdown-link-hover-color: $white !default; 52 | $dropdown-link-hover-bg: $primary !default; 53 | 54 | // Navbar 55 | 56 | $navbar-dark-color: rgba($white,.8) !default; 57 | $navbar-dark-hover-color: $white !default; 58 | -------------------------------------------------------------------------------- /src/scss/index.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "./variables.scss"; 3 | @import "~bootstrap/scss/bootstrap.scss"; 4 | @import "./bootswatch.scss"; 5 | -------------------------------------------------------------------------------- /style.scss: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | Import the common theme. 4 | */ 5 | @import "./_shared/scss/theme.scss"; 6 | 7 | /* 8 | If you need some CSS for any reason you can put it here. 9 | */ 10 | 11 | --------------------------------------------------------------------------------