Make it so

After some prep, it took three simple commands:

firebase init   ## do this once (or in my case twice)
firebase serve   ## with a variation to preview on the phone 
firebase deploy   ## first deploy takes longer

First, the yaml.

When I decided to publish my Quarto blog using Firebase (aka Google Firebase?) I noticed that my yaml (in the _quarto.yml file) was already specifying the ‘public’ folder as the output folder. I must have done this before!

 project:
   type: website
   output-dir: public

Specify a folder named ‘public’ and it will be the default folder name for a site in Firebase. So, when you set up your _quarto.yml file, add this output-dir specification.

Then, once I got the Firebase CLI (command line interface) downloaded and updated to the current version (not really necessary, since – no surprise – it was the same version I had downloaded moments before) it took these three easy command-line steps to push to Firebase.

I had decided not to use Github as an intermediary step, but just to go direct.

Prep.

I read these instructions: https://firebase.google.com/docs/hosting on how to download the firebase CLI.

First I set up a firebase project, answering various questions (like, project name, new analytics account name, and which Google account).

I got the firebase version with ‘firebase --version’, and then updated it with ‘curl -sL https://firebase.tools | upgrade=true bash’. As previously mentioned, this did not change the version. But it’s not a bad way to keep up to date on your local version of the firebase tools.

Then, as simple as this:

firebase init
firebase serve
firebase deploy

Here’s how I made it take longer:

firebase init

At first, I misunderstood where in my folder tree to type this command.

I opened a terminal in the ‘public’ directory, and typed it there. But in fact, it should have been the ‘public’ folder’s parent. ‘public’ was my output folder for the Quarto blog.

“Your public directory is the folder (relative to your project directory) that

will contain Hosting assets to be uploaded with firebase deploy. If you

have a build process for your assets, use your build’s output directory.”

In other words, I should have made my project folder the same folder as contained the _quarto.yml file.

After I did that, ‘firebase init’ worked great.

Then it was …

firebase serve

The command line ‘firebase serve’ worked great. I was able to look at the site on my own computer. But before deploying, I also wanted to see how it looked on a phone. I knew how to get the IP address of my laptop by doing ‘option-click’ on the WiFi settings button, and then to use that IP address locally in the phone’s web browser. But for some reason I could not see it this time.

The answer was to do this:

firebase serve --host 0.0.0.0

Now, I was able to type my little local server’s IP address and port – which looked something like this: http://192.168.134.123:5005 – into the phone’s web browser, and see how it would look before running ‘firebase deploy’

firebase deploy

After running ‘firebase deploy’ I looked at the site.

One of the images was missing. Oh noes! Was it the long file name on the image file or was it the way-too-large-for-the-web humongous image size? I cut the image down to size and at the same time made the filename shorter. The image appeared in all its blown-out pixellated web-sized glory.

--- title: "How to put your Quarto blog on Firebase" author: "George Girton" editor: visual date: "2022-09-24" categories: [Quarto] image: RedShovelWaveReflection02343.png --- # Make it so After some prep, it took three simple commands: firebase init ## do this once (or in my case twice) firebase serve ## with a variation to preview on the phone firebase deploy ## first deploy takes longer First, the yaml. When I decided to publish my Quarto blog using Firebase (aka Google Firebase?) I noticed that my yaml (in the \_quarto.yml file) was already specifying the 'public' folder as the output folder. I must have done this before! ``` yaml project: type: website output-dir: public ``` Specify a folder named 'public' and it will be the default folder name for a site in Firebase. So, when you set up your \_quarto.yml file, add this output-dir specification. Then, once I got the Firebase CLI (command line interface) downloaded and updated to the current version (not really necessary, since -- no surprise -- it was the same version I had downloaded moments before) it took these three easy command-line steps to push to Firebase. I had decided not to use Github as an intermediary step, but just to go direct. ## Prep. I read these instructions: https://firebase.google.com/docs/hosting on how to download the firebase CLI. First I set up a firebase project, answering various questions (like, project name, new analytics account name, and which Google account). I got the firebase version with 'firebase \--version', and then updated it with 'curl -sL https://firebase.tools \| upgrade=true bash'. As previously mentioned, this did not change the version. But it's not a bad way to keep up to date on your local version of the firebase tools. Then, as simple as this: firebase init firebase serve firebase deploy Here's how I made it take longer: ## firebase init At first, I misunderstood where in my folder tree to type this command. I opened a terminal in the 'public' directory, and typed it there. But in fact, it should have been the 'public' folder's parent. 'public' was my output folder for the Quarto blog. > "Your public directory is the folder (relative to your project directory) that > > will contain Hosting assets to be uploaded with firebase deploy. If you > > have a build process for your assets, use your build's output directory." In other words, I should have made my project folder the same folder as contained the \_quarto.yml file. After I did that, 'firebase init' worked great. Then it was ... ## firebase serve The command line 'firebase serve' worked great. I was able to look at the site on my own computer. But before deploying, I also wanted to see how it looked on a phone. I knew how to get the IP address of my laptop by doing 'option-click' on the WiFi settings button, and then to use that IP address locally in the phone's web browser. But for some reason I could not see it this time. The answer was to do this: ``` bash firebase serve --host 0.0.0.0 ``` Now, I was able to type my little local server's IP address and port -- which looked something like this: http://192.168.134.123:5005 -- into the phone's web browser, and see how it would look before running 'firebase deploy' ## firebase deploy After running 'firebase deploy' I looked at the site. One of the images was missing. Oh noes! Was it the long file name on the image file or was it the way-too-large-for-the-web humongous image size? I cut the image down to size and at the same time made the filename shorter. The image appeared in all its blown-out pixellated web-sized glory. ![Beach campfire](ThreeDogNight.png)