Skip to content

Template of yew project, using tailwind and webpack for css, trunk for build and serve, deployable as is for github.io

Notifications You must be signed in to change notification settings

Ja-sonYun/yew-template-for-github-io

Repository files navigation

gh-pages-publish

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.

About github.io

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.