Learn how to build and deploy a Nuxt.js blog website to Firebase. ๐
Note you'll need to install firebase:
npm i -g firebase-tools@latest
You'll need to be authenticated to your firebase project.
firebase login
If you don't have a project yet, run the following and follow the steps:
firebase projects:create
To initialize your blog run:
firebase init hosting
The options below will allow your code to deploy automatically to your firebase hosting everytime you push to your main branch.
- ? What do you want to use as your public directory?
dist
- ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
N
- ? Set up automatic builds and deploys with GitHub?
y
- ? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) (/nuxt-content-tutorial)
- ? Set up the workflow to run a build script before every deploy? (y/N)
y
- ? What script should be run before every deploy? (npm ci && npm run build)
npm run test && npm run generate
- ? Set up automatic deployment to your site's live channel when a PR is merged? (Y/n)
Y
- ? What is the name of the GitHub branch associated with your site's live channel?
main
Check the .github/workflows
directory after this command. Make sure only merge option exists and correct build script is listed.
.github/workflows/firebase-hosting-merge.yml
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on merge
'on':
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install dependencies
run: yarn
- name: Generate
run: yarn generate
- name: Deploy
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_KAIZEN_CODES_BLOG }}'
channelId: live
projectId: kaizen-codes-blog