yew-template-for-github-io
yew-template-for-github-io copied to clipboard
Template of yew project, using tailwind and webpack for css, trunk for build and serve, deployable as is for github.io
Yew Template for Github.io
Yew template that deployable as is for github.io (or as a normal yew template with css/scss stuffs without github.io), with tailwind.css and webpack with your css/scss and trunk for build.
main branch
├── index.html
│
├── css # css/scss
│ ├── index.css
│ ├── index.scss
│ ├── main.scss
│ └── tailwind
│ └── tailwind_base.css
│
├── src # yew here
│ └── main.rs
│
├── static
│ └── 404.html
│
├── README.md
├── Cargo.lock
├── Cargo.toml
├── Trunk.toml
├── package.json
├── tailwind.config.js
└── webpack.config.js
gh-pages branch
├── index.html
├── 404.html
├── index-7823f64dca35d01f.js
├── index-7823f64dca35d01f_bg.wasm
└── main-baa4389a63fdea1b.css
Things that you need to do
Go Setting > Code and automation > Pages > Github Pages > Source and change branch from main to gh-pages. if not exists, create new branch named gh-pages.
github action is cofigured. just push your codes to the main branch, and then outputs of trunk build --release
will automatically deployed.
While running trunk serve
, trunk will watch static and css folder, and do compile for all codes include css/scss in css folder when they had any changes like rust codes in src.
For {username}.github.io page
you need to modify this line
and this line to 0
also check ./src/main.rs
For {username}.github.io/{project_name} page
you need to modify this line
and this line to 1
also check ./src/main.rs
To serve the project on your machine correctly, run trunk serve --public-url=/{project_name}/
As a normal template(not for github.io)
To use without github.io, open Trunk.toml
and remove public_url
field.
Also remove 404.html
in static folder and this line in index.html
.
Lastly remove .github/workflow
folder.
Using Custom Domain
go to ./.github/workflows/publish_gh_pages.yml
and add your domain in cname field.
Routing
Using static/404.html
. for more information, checkout https://github.com/rafgraph/spa-github-pages.