Search code examples
fluttergithubdeploymenthttp-status-code-404github-pages

Flutter Deployment Not Working With GitHub Pages


I tried to deploy my portfolio to GitHub pages. But no images appear. I tried using both relative and absolute paths. But nothing seems to work. I am getting a 404 error for all the images. I will be really kind if the deployment process is explained a bit.


Solution

  • One Line Answer - Press F12, check for errors (404 errors). If images are not there at the location then manually add them there.

    Detailed process -

    So, Let me take this opportunity for explaining the complete process. Run the following commands from root directory -

    flutter channel

    if channel is not "stable" then -

    flutter channel stable

    After this -flutter upgrade

    Then - flutter clean

    Then - flutter build web

    Now make a new repo in GitHub (let us call it 'Web'). Clone it to a suitable location. Copy files from root_directory/build/web to this newly cloned repo.

    Now go open 'index.html' in a code editor and comment out the href base line.

    Now push the changes to the repo 'Web'. Go to settings -> select master branch and click on save.

    Open the website. If images don't appear then -

    Press F12, check for errors (404 errors). If images are not there at the location then manually add them there.

    Another Way -

    instead of loading images from assets use site like 'imgur', CORS also has no problem here.