Share:

How to Export and deploy blog on firebase


1. Export Project.

  • Stop the local server (if running)
    Open terminal and press ctrl + C to stop the server.
    nextjs-simple-blog-template
  • Run npm run out
    In the terminal run npm run out.
    nextjs-simple-blog-template
    nextjs-simple-blog-template
  • After the export is successful. You will see a new folder created named out in you project directory .
    nextjs-simple-blog-template
    This out is the folder you need to deploy on your hosting service.

2. Basic firebase deployment tutorial.

  • Goto firebase console
    If you have a gmail account, goto firebase https://firebase.google.com/ and goto firebase console.
  • Create a project
    nextjs-simple-blog-template
    Enter project name and Select Conitnue with analytics and enter the contry. and click create project.
  • Firebase Dashboard
    Click on Hosting inside Build
    nextjs-simple-blog-template
    nextjs-simple-blog-template
  • Install firebase
    Open terminal in your project folder or VS Code and run npm install -g firebase-tools
  • Firebase Login
    Type firebase login in terminal and hit enter.
    Follow the login steps and login into your firebase(google) account
  • Init Firebase and Deploy
    Run firebase init in terminal, move the selection to hosting using arrow keys and select Hosting by hitting space, and then press enter.
    nextjs-simple-blog-template

    Select Use an Existing Project

    After you select Use an Existing Project you will see list of all projects in your firebase account, including the one we created now.
    nextjs-simple-blog-template
    it will ask the following:
    • What do you want to use as your public directory? here write out
      nextjs-simple-blog-template
    • Configure as a single-page app (rewrite all urls to /index.html) here enter N (decline it)
    • Set up automatic builds and deploys with GitHub? here enter N (decline it)
    • File out/index.html already exists. Overwrite? (y/N) here enter N (decline it)
    nextjs-simple-blog-template

    Firebase Setup Complete

    Finally run firebase deploy and your peoject will be deployed on your firebase hosting.
    nextjs-simple-blog-template

    Firebase Deploy

  • * note
    This setup is only to be done once for each project. next time when you create any new article file just run npm run out and after successful export run firebase deploy to deploy updated and new files/articles to hosting.
For any any queries related to this project / template feel free to connect with us at webexpe13@gmail.com. You can also post any comments on our github discussions.

Copyright © 2023 Next Js Blog Template

Privacy PolicyTerms and Conditions