Astro.js deployment: Media files not rendering - deployment

I've recently tried to deploy my 1st portfolio on github pages which is being built with Astro.js.
Everything looks as it should on dev mode, and the build doesn't start any errors, but when I access the page where my portfoli was deployed the images are not rendering. All the images are SVGs and I also have a video that plays on the backgroud which is in .mp4 format. For the HTML I'm using and tags for the images and the video respectively.
For deployment I followed Astro's documentation
And basicly coipied they're yaml file.
.github/workflows/main.yaml:
name: Deploy Astro to GitHub Pages
on:
# Trigger the workflow every time you push to the `main` branch
# Using a different branch name? Replace `main` with your branch’s name
push:
branches: [ main ]
# Allows you to run this workflow manually from the Actions tab on GitHub.
workflow_dispatch:
# Allow this job to clone the repo and create a page deployment
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout your repository using git
uses: actions/checkout#v2
- name: Install, build, and upload your site
uses: withastro/action#v0
with:
# path: . # The root location of your Astro project inside the repository. (optional)
# node-version: 16 # The specific version of Node that should be used to build your site. Defaults to 16. (optional)
package-manager: npm # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages#v1
For more detailed information you can find
the deployed page here
src code here
EDIT: clearly I didn't read the documents well enough as the error was solved by this warning warning

For a complete answer, and in addition to the base config that you mentioned in your question, as you're using github pages for deployment, it is important to add a .nojekyll file in your /public/ directory or ensure it is placed in your repo root or the static folder to be deployed by github
references :
base : https://docs.astro.build/en/reference/configuration-reference/#base
bypassing Jekyll on Github Pages : https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/

Related

Unable to deploy flutter project to Github Pages

I can't host flutter web application on github pages. The workflow file looks like this:
name: Build & Deploy weathunits_configurator
on:
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
jobs:
build-and-deploy:
name: 'Build & Deploy web app'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v3
- name: 'Install Flutter and Dart SDK'
uses: subosito/flutter-action#v2
with:
channel: stable
flutter-version: 3.3.9
cache: true
- name: 'Flutter enable Web'
run: flutter config --enable-web
- name: 'Get dependencies'
run: flutter pub get
working-directory: example/weathunits_configurator
- name: 'Build web app'
run: |
cd example/weathunits_configurator
flutter build web --web-renderer=canvaskit --base-href='/weathunits_configurator/' --release
- name: 'Deploy web app'
uses: peaceiris/actions-gh-pages#v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: example/weathunits_configurator/build/web
What I'm trying to do: my project lies in the example/weathunits_configurator folder, after building it will be in the example/weathunits_configurator/build/web folder.
The web project is placed in the gh-pages branch and looks like this link.
We open the application through the https://packruble.github.io/weather_animation/ (I'd like to see another path. Not /weather_animation/, but /weathunits_configurator/.) and see a blank screen. I see the following in the console brave:
What I tried:
Use JamesIves/github-pages-deploy-action#v4 instead of peaceiris/actions-gh-pages#v3
Use different `flutter build web' parameters
Changed the input and output folder in settings deploy action.
I think the problem is that because my project, which needs to be deployed, is in a subfolder, it cannot be built normally. Either there is a problem with the --base-href='/weathunits_configurator/' tag. Or the problem is somewhere else.
How to launch this project on Github Pages?
In the end, the problem was solved by using the --base-href='/weather_animation/' flag which specifies the repository name. It is the name of the github repository that should be specified in this flag and nothing else!
Recall that the file on the path web/index.html has the following line <base href="$FLUTTER_BASE_HREF">.
And yes, sometimes github pages are not lightning fast. You need to wait some time for the changes to take effect after your deploy.
Consider the error message:
Loading failed for the <script> with source
“https://packruble.github.io/weathunits_configurator/flutter.js”.
weather_animation:40:1
That means a base-href set to /weathunits_configurator/ cannot work because a project GitHub Page is based on the repository name.
Here, it is weather_animation, not weathunits_configurator.
The simplest option would be to rename the repository into weathunits_configurator, and remove the base-href, since a project site is hosted at http(s)://<username>.github.io/<repository>.
That seems easier than configuring a custom domain for your GitHub Pages site.
The OP Ruble confirms in the comments it is working, but keeping --base-href='/weather_animation/', using the name of the repository though.

Setup Github action to download a zip file

I have a Google Chrome and Mozilla Firefox extension in a same GitHub repository. They are separated in two branches and I am "exposing" the original URL to download the repository for each branch:
The approach to install a Firefox extension is quite long and messy since it needs to be unzipped and zipped again. So, someone recommended me using Github actions to create a release file from specific branches using this Github action: Zip Release.
According to their documentation I have tried to replicate the YAML file for my use case using the Github action creation wizard and naming that file firefox.yml that created a folder in the repository root: .github/workflows/firefox.yml:
name: Create Archive
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: my-user/the-repo#dev-firefox
- name: Create Firefox Release
uses: thedoctor0/zip-release#main
with:
type: 'zip'
filename: 'dev-firefox.zip'
path: './releases'
exclusions: '*.git* /*node_modules/* .editorconfig /*releases/*'
But after it starts it immediately fails with the following message:
Can't find 'action.yml', 'action.yaml' or 'Dockerfile' under '/home/runner/work/_actions/my-user/the-repo/dev-firefox'. Did you forget to run actions/checkout before running your local action?
I also tried adding - uses: actions/checkout#master just before the line - uses my-user/the-repo#dev-firefox but it won't work.
Not sure how to properly write the workflow YAML configuration. Any suggestions?
You're confusing uses with checking out a repository. uses indicates an action to use, with the part after the # specifying the version of the action. To check out a specific branch of your repo, you can use the checkout action with the ref parameter:
steps:
- uses: actions/checkout#v3.1.0
with:
ref: dev-firefox

Deployment with custom Github Actions workflow for jekyll site

I've tried to deploy a Jekyll blog site with my custom Github Actions workflow file. Build and deployment have succeeded so far.
But every time I push the sources to this git repository, the GitHub Pages bot action is executed as well. So two workflow files are executed after pushing.
I've switched the 'Build and Deployment' setting from 'deploy from branch' to 'Github Actions'. After I've done it, my custom GitHub Actions are executed only. But the changes have not been deployed to my github.io blog site.
My question is do I have to use the GitHub Pages bot action, if not,
Is there any solution to my workflow file?
name: build site with jekyll and deploy on github pages
on:
push:
branches:
- master
jobs:
jekyll:
runs-on: ubuntu-20.04
steps:
# checkout code
- uses: actions/checkout#v2
# Use ruby/setup-ruby to shorten build times
# https://github.com/ruby/setup-ruby
- uses: ruby/setup-ruby#v1
with:
ruby-version: 3.1 # Not needed with a .ruby-version file
bundler-cache: true # runs 'bundle install' and caches installed gems automatically
# use jekyll-action-ts to build
# https://github.com/limjh16/jekyll-action-ts
- uses: limjh16/jekyll-action-ts#v2
with:
enable_cache: true
# use actions-gh-pages to deploy
# https://github.com/peaceiris/actions-gh-pages
- name: Deploy
uses: peaceiris/actions-gh-pages#v3
with:
# GITHUB_TOKEN secret is set up automatically
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./_site

Do I need to upload build folder to branch in order to make upload-artifact CI/CD work?

I have been working on two separate branches
trunk
distribute
CI/CD pipelines are setup on distribute branch. When push is made to distribute branch, CI/CD workflow triggers and do the jobs listed in the main.yml file.
Here it is:
name: Build & upload to Firebase App Distribution
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
# This will checkout the current repo
- name: Checkout
uses: actions/checkout#v2.4.2
# This will upload artifact (.apk) from your workflow
- uses: actions/upload-artifact#v3
with:
name: release-apk
path: build/app/outputs/flutter-apk/app-release.apk
# Distribute to Testers using Firebase App Distribution service
- name: Firebase App Distribution
uses: wzieba/Firebase-Distribution-Github-Action#v1.3.3
with:
appId: ${{secrets.FIREBASE_APP_ID}}
token: ${{secrets.FIREBASE_TOKEN}
groups: Testers
file: build/app/outputs/flutter-apk/app-release.apk
We have added /build/ in .gitignore so build folder won't be pushed to distribute branch. The only thing it contains is the .github/workflow/main.yml that will trigger the CI/CD workflow.
Now the questions is,
Do I need to remove /build/ from .gitignore so my build folder will also be pushed to distribute branch where upload-artifact can pick the file from build/app/outputs/flutter-apk/app-release.apk declared in main.yml file?
Another question; Where does upload-artifact picks the file? Whether it picks from the current branch (in my case; build folder is not present there)? Or it picks from the current local project directory? (in my case; build folder is present)
This thing is confusing me too much :(
Thanks.
Here is the error:

React JS Deployment with GitHub Actions Workflow to Azure Web App build folder issue

I have a simple react app that I am trying to deploy to azure web app. Some key points.
Web App is already configured in Azure.
Publish Profile of the Web App is already included in the GitHub Repository
I am using the following GitHub workflow code.
on: push
env:
AZURE_WEBAPP_NAME: ReactJSRecipeAppGitHubActionsOct12020 # set this to your application's name
AZURE_WEBAPP_PACKAGE_PATH: '.' # set this to the path to your web app project, defaults to the repository root
NODE_VERSION: '10.x' # set this to the node version to use
jobs:
build-and-deploy:
name: Build and Deploy
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Use Node.js ${{ env.NODE_VERSION }}
uses: actions/setup-node#v1
with:
node-version: ${{ env.NODE_VERSION }}
- name: npm install, build, and test
run: |
# Build and test the project, then
# deploy to Azure Web App.
npm install
npm run build --if-present
npm run test --if-present
- name: 'Deploy to Azure WebApp'
uses: azure/webapps-deploy#v2
with:
app-name: ${{ env.AZURE_WEBAPP_NAME }}
publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
The entire workflow runs without any problems. everything is green. Both the code and the deploy job is public. You can see the whole thing here - https://github.com/Jay-study-nildana/APIServerDotNetCoreGitActionsCICD
Unfortunately, this does not work, because, the 'build' folder, which contains the actual website to be served does not get deployed at the root of the website.
in the current state, the entire root of the repository, gets deployed to the target web app, including the build folder. If I open the KUDU console, I can see the build folder and all the contents of the site.
So, the issue is, how do I get the above workflow, to put the contents of the 'build' folder, and not the whole repo?
Also, please, note the following.
I have tried the following different options for the AZURE_WEBAPP_PACKAGE_PATH variable, and none of them work.
'/build'
'./build/.'
/build'
'./build/'
You can achieve your requirement by using one of below formats:
build
./build
The build folder will be generated at the root of working directory after npm run build run successfully. So you need specify build or ./build as AZURE_WEBAPP_PACKAGE_PATH value to retrieve the build folder contents.
On top of the changes listed to send the build folder:
You can check that you have uploaded the files correctly by installing the vscode plugin and then logging in you will be able to see the files that are on the server.
This will confirm that the build file uploaded correctly.
Now, go back to portal.azure.com
Settings > General settings > Startup Command
add the following to serve the index.html from the build file.
pm2 serve /home/site/wwwroot/ --no-daemon --spa
link:
https://stackoverflow.com/a/61386411/5283424