A server-less blog with Hugo and Firebase
I love Firebase. Nothing new about it, I already talked about Firebase in my previous posts. For example, I used Firebase to build a simple website that list possible ideas for ethical friendly gifts. However, recently I started to thing about the possibility of using Firebase to host a blog. Of course I am not thinking about the usual Wordpress blog, but I wanted something that can be easily managed from a command line. In this post, I wanna tell you my experience with storing a markdown based blog, based on Hugo, and stored on Firebase.
What is Firebase?
Firebase is a mobile and web application development platform created by Google. It offers a suite of tools and services that help developers build, test, and deploy applications quickly and easily. Firebase includes a variety of features and functionalities, such as real-time databases, authentication, hosting, cloud storage, and cloud functions. One of the key benefits of Firebase is its ability to provide a serverless architecture, which allows developers to build and deploy applications without having to manage servers or infrastructure. Firebase also provides powerful tools for app analytics, user engagement, and monetization, making it a comprehensive platform for building and scaling mobile and web applications. With its ease of use, robust feature set, and strong community support, Firebase has become a popular choice for developers looking to build modern, scalable applications.
What is Hugo?
Hugo is a popular open-source static site generator that allows developers to create websites quickly and easily. Unlike traditional CMS platforms, Hugo generates static HTML pages that can be served directly to visitors, without the need for a separate server-side scripting language or database. This results in faster page load times and reduced server costs. Hugo is written in Go and is designed to be fast, flexible, and easy to use. It includes a range of features such as templating, content management, and multilingual support, making it a powerful tool for creating blogs, portfolios, and other types of websites. Hugo is also highly customizable, with a large selection of themes and plugins available to extend its functionality. Its simplicity, speed, and flexibility have made Hugo a popular choice for developers who want to create fast and scalable websites without the need for complex infrastructure or server-side scripting.
GitHub actions for the sync
Firebase provides a reliable and secure hosting service for web applications, and it can be seamlessly integrated with GitHub via a simple set of steps. By using GitHub Actions, developers can automate the deployment of their applications to Firebase hosting on each commit. This allows for a fast and efficient deployment process, as well as ensuring that the hosted application is always up to date with the latest code changes.
The plan
At this stage, I already had some experience with Firebase, practically no experience with GitHub actions for Firebase, and no experience at all with Hugo. The idea is having a Hugo project on my laptop that I can automatically update to Firebase via Git.
Let’s get started
I am working on a Linux machine, so the steps may be slightly different for you. The first step is to install Hugo and git on your machine. For Hugo, you can find the instructions for installation here. For Git, I am using GitKraken, a GUI software to manage Git repositories both locally and on different servers, including Github. I have already talked about GitKraken here. If you wanna give it a try, check this link! If you sign up with my referral you may win a $100 Amazon Gift Card! Once you have both Git and Hugo, is time to create a new website.
Open Gitkraken, and initialize a new repository on Github. I usually prefer to initialize the repository from the web page, and then clone it using Github. I have wrote a short tutorial that you can find here.
Open a terminal, navigate to the repository folder, and then use the following:
hugo new site quickstart #this create a new website in the repository folder
#if this fails try adding --force
cd mywebsite #change to the website directory
#next let's add a theme
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
#add the theme to the config file
echo "theme = 'ananke'" >> config.tomlThat’s it! if you know start a server you should be able to see your Hugo template ready to be used.
#initialize a server and serve the website on localhost:1313
hugo serve -D Now it’s time to add Firebase. First you need to install the Firebase cli. You can find a detailed explanation here. After installation, login with your Google account and you are ready to proceed.
Go to https://console.firebase.google.com, and create a new project. Give ti a name and hit continue. Then enable analytics, and connect it to a new analytics project. Select a location for the storage, and you are done. Your project is created.
Now, in the directory of the project, use the following command to initialize Firebase.
firebase initMake sure to select at least both the Hosting options (File storage and Github Actions). Hit Enter, select use an existing project and look for your firebase project. Set the folder to use as Public (the default option), say no to the configuration as a single page app, and say yes to automatic deployment with GitHub. Login to to Github in the pop-up page, then enter your username and repository name in the terminal. This will create a service account that automatically publish the content of the “public” folder to Firebase hosting. You can use the default options for the subsequent options. Once you see the message below you are good to go.
✔ Firebase initialization complete!Time to create a post
It’s now time to create a post. You can do so by writing in a terminal:
hugo new posts/test.mdNow navigate to content/posts/ and you should be able to find the newly created test.md file. Edit it with your favorite tool. This is what mine looks like for this test. Make sure to set draft to false.
---
title: "Test"
date: 2023-05-02T17:54:51+02:00
draft: false
---
Lorem Ipsum dolor sit amet
Now, save the file, and go back to the root of your project. Build the website using:
hugoIf everything is good, you should see a table with the generated files:
| EN
-------------------+-----
Pages | 10
Paginator pages | 0
Non-page files | 0
Static files | 1
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0
Total in 54 msReady to commit
Head back to GitKraken (or your favorite way to deploy to git). Stage your changes, add a commit name, and push. Now, if you head to your github repository /actions page, you should see that your worker is pushing the changes to Firebase
Once the action has completed, you can visit yourprojectname.web.app and you should see your blog and post. Here’s mine: https://test-4e18d.web.app/
To sum up
In today’s post, we have seen how easy it is to create a serverless blog using Hugo and Firebase. By taking advantage of Firebase’s powerful suite of tools and services, and the speed and flexibility of Hugo, developers can create a high-performance website with ease. Hosting your website with Firebase allows for fast, reliable, and secure serving of your content, while the serverless architecture enables you to focus on building your website without the burden of managing servers or infrastructure. Additionally, automating the deployment process through GitHub Actions ensures that your website is always up-to-date with the latest code changes. By following the steps outlined in this post, you can create a serverless blog that is fast, secure, and scalable, and focus on creating great content for your readers.
If you’d like to see my personal implementation of a Firebase+Hugo post, check out hydroponicsexplained.com. In this project I am attempting to use LLMs, and especially ChatGPT to create blog and social media content. I have a wrote a blog post about the first 30 days of the project here.
