Search code examples
rustweb-deploymentgithub-pagesyew

Is it possible to create a multi-paged website using Github Pages and Yew?

I've just begun creating a portfolio website using Rust and Yew. I wasn't planning on doing any server-side logic so naturally I thought Github Pages fit my needs.

Here is my code for the Yew site.

#[derive(Debug, Clone, Copy, PartialEq, Routable)]
enum AppRoute {
    #[at("/")]
    Home,
    #[at("/about")]
    About,
    #[not_found]
    #[at("/404")]
    NotFound,
}

#[function_component]
fn App() -> Html {
    html! {
        <>
            <BrowserRouter>
                <Switch<AppRoute> render={
                    |route| match route {
                        AppRoute::Home => html! { <h1>{ "Hello, world!" }</h1> },
                        AppRoute::About => html! {
                            <>
                                <h1>{ "About" }</h1>
                                <p> { "This page was created using " }
                                    <a href="https://www.rust-lang.org/">{ "Rust" }</a> {", "}
                                    <a href="https://yew.rs/">{ "Yew" }</a> {" and "}
                                    <a href="https://trunkrs.dev/">{ "Trunk" }</a> 
                                    { "." }
                                </p>
                            </>
                        },
                        AppRoute::NotFound => html! { <h1>{ "404: Page not found." }</h1> },
                    }
                } />
            </BrowserRouter>
        </>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

I am using the yew-router crate for routing to different pages. For example changing the url to website.github.io/about would route me to the about page, defined in the AppRoute enum.

However when I do try and type this in the browser URL I get a Github 404 page not found. I assume this is because Github is trying to find a repository named about and cannot.

How would I be able to use multiple pages in the URL?

Solution

  • Based on the following Stack Overflow answers my theory is you need to use a HashRouter. Although these focus on React the essential issue is the same with Yew

    Caveat: I'm new to Yew and have no experience with GitHub Pages. I just came across this while looking into Yew routing recently. Here are some others more specific to Rust/Yew:

    Hope this helps.