https://github.com/bemit/create-page-starter
⚛️ Page starter for static pages which may use typescript React, all in one build handling, 1-click deployment with netlify cms and styled with @formanta/sass.
https://github.com/bemit/create-page-starter
frontmatter netlify netlify-cms static-site-boilerplate static-site-generator twig
Last synced: about 1 year ago
JSON representation
⚛️ Page starter for static pages which may use typescript React, all in one build handling, 1-click deployment with netlify cms and styled with @formanta/sass.
- Host: GitHub
- URL: https://github.com/bemit/create-page-starter
- Owner: bemit
- License: mit
- Created: 2021-05-15T12:22:23.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-09T20:11:13.000Z (almost 4 years ago)
- Last Synced: 2025-02-15T00:32:58.992Z (over 1 year ago)
- Topics: frontmatter, netlify, netlify-cms, static-site-boilerplate, static-site-generator, twig
- Language: JavaScript
- Homepage:
- Size: 2.88 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Create Page Starter ⚛️
[](https://app.netlify.com/sites/create-page-starter/deploys)
[](http://makeapullrequest.com)
Starting point for static pages generated with [create-amp-page](https://github.com/bemit/create-amp-page) and using [@formanta/sass](https://formanta.bemit.codes) for styling - but **for PWA enhanced web pages** and **not** AMP. Directly deploy with [netlify cms](https://www.netlifycms.org/) as git managed static site generator!
[](https://app.netlify.com/start/deploy?repository=https://github.com/bemit/create-page-starter) [](https://codesandbox.io/s/github/bemit/create-page-starter)
npm i
npm start
# or
npm run build
npm run tasks
npm run clean
npm run test
# test driven UI development (with cypress):
npm run tdd-ui
# test driven JS development (with jest):
npm run tdd-js
Open [localhost:4489/defaultPage](http://localhost:4489/defaultPage) for your local page preview and change something in `src/*`!
[](#features)
[](#default-file-structure)
[](#netlify-cms)
[](#amp-component-library)
[](#license)
## Features
Provides a basic file structure and uses the gulp build tasks of [create-amp-page](https://github.com/bemit/create-amp-page), with additionally: markdown and netlify cms.
Has the same basic features as create-amp-page, [check the list there](https://github.com/bemit/create-amp-page-starter#features).
Additionally, this starter has babel and webpack configured for Typescript and React.
**Universal Twig functions**, used within templates, are included in `create-amp-page`, check out the [function docs](https://github.com/bemit/create-amp-page#twig-functions)
## Default File Structure
- `.env` for configuration of env vars
- need to be prefixed with either `REACT_APP_` or `WEB_APP_` to be available in javascript
- `build` dist folder after running `npm run build` or while `npm run start`
- each page will be saved in a folder, standard: `build/defaultPage`
- media files are saved in `build/media`
- `public` with general files in root like `manifest.json`
- `public/admin` config and setup files for netlify cms
- `src/api` may be used as mock api
- `src/data` contains the page frontmatter and data
- `src/html` is the base for all twig templates
- `src/html/pages` will be build to individual HTML pages
- `src/media` may contain images
- `src/styles/main.scss` is the style sheet
- `twigLogic/*` extra twig functions, reloaded on every build
## Files to Adjust
- `Gulpfile.js` needs e.g. domain of production environment and a bit of other stuff
- `.env` just needs to exist, take a look at [.env.example](.env.example) for available env vars
- `public/` needs all icons, like favicon etc.
- `public/manifest.json` needs some proper namings and colors
- `public/offline.html` needs some proper namings and email address
- `src/js/sw.js` maybe needs a new cache key and "pages to cache" configuration
## Netlify CMS
Uses the same setup as create-amp-page, [check the Netlify CMS docs there](https://github.com/bemit/create-amp-page-starter#netlify-cms).
### Twig Embed Image
Displays an `img` or `amp-img` tag using `ampEnabled`, `layout` defaults to 'responsive'. Set's width and height using `getImage` fn, adds sha1 cachebuster.
> todo: srcset and image resizing support
```twig
{% embed 'blocks/image.twig' with {
src: '/media/img-01.png',
alt: 'A blog hero image',
classes: 'mb2',
layout: 'responsive',
} %}
{% endembed %}
```
### React Static
Render your React directly at the build process, clean and rich HTML for SEO and client side speedup!
> very very alpha: it works, but features need optimizing / coworking-with-twig, like: resizing used images
>
> template structure must be adjusted before using snap, as every dynamic thing must be rendered with react and not through twig
> or react-snap uses a different twig template for each page (seems to be hard)
Uses [react-snap](https://github.com/stereobooster/react-snap) for "server side react rendering" and fixing [react-snap#493](https://github.com/stereobooster/react-snap/issues/493) through the custom `/copy.js`, adding the HTML cleaning and optimizing tasks again.
First install `react-snap`: `npm i --save react-snap`
Commands:
# use `snap-build` now instead of `build`
npm run snap-build
## License
This project is free software distributed under the **MIT License**.
See: [LICENSE](LICENSE).
### Contributors
By committing your code/creating a pull request to this repository you agree to release the code under the MIT License attached to the repository.
## Copyright
2022 | [Michael Becker](https://mlbr.xyz), [bemit UG (haftungsbeschränkt)](https://bemit.codes)