Creating a blog for ConstruInspector - How to create a free blog using Firebase and Hugo (Part 1)
After a long journey with a lot of learnings at ConstruInspector, we decided to start a blog, where we’d like to share with our customers information that can help them to grow, but also we wanted to share our experience during our own process, hoping that this would help anyone that is following a path similar to ours.
Even though we have a lots of things to write about, we decided to start this blog showing the process of its creation, as this is a topic that we can blog about while we are in the middle of it.
We are still not sure about our content strategy, so this post series is going to be focused specially about the technical aspects of this blog.
If this was a dev blog, probably the name of this post would be How to create a free blog using Firebase y Hugo?, what will be exactly what we’ll do in this post.
The first question that you will ask would be: Why this tech stack? There are so many blogging platforms: WordPress, Ghost, Known, but we had a restriction to develop this blog, and it was that it had to be developed really fast, and with a really low development cost.
Because we are already using Firebase for ConstruInspector, it made sense to continue using it for the blog, because we didn’t want to increase our stack for the blog, so PHP based platforms like WordPress, weren’t an option. On the other hand Ghost required a Docker installation or on a Virtual Machine, configuring it with a DB, but we didn’t want to have the overhead of maintaining that service, because we want to focus on the develipment of our app, not our blog.
After a short research, we discovered Hugo, a tool that was an ideal match for what we needed. Its content is just about Markdown files, and when you publish it, it will generate a bunch of HTML files, it doesn’t require anything more than a static web server, so it was a fit for out cost and development time requirement.
Firebase hosting allows us to host Hugo’s static content for free, so it was the best solution for us.
On the other hand, Hugo has a huge advantage against other kind of blog CMS, and is that as being a static content generator, it’s fast, the only process that it runs is a quick transpilation, and its ready for publishing. Unlike other CMS, there is not runtime execution when a user visits the blog, so there is no need to configure any type of cache, which makes it ideal for content that rarely changes, like a blog.
Blog configuration
Without further ado, to start the first thing that we need to do is to install hugo and firebase. I won’t go deep abour this topic, because the installation is really simple and its well documented.
Once you hace installed both tools, the first thing that you need to do is to create a new project:
$ hugo new site construinspector-blog
This command will create a new directory with the whole blog, but it still needs to be configured. The first and more important step is to pick a theme. There are several themes for Hugo. We went for tranquilpeak, which will allow us to later customize it the way we want it.
$ cd construinspector-blog/themes
$ git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git
The next step is really important, I forgot to do it, and it took me a while to find the error. You have to copy the configuration file from the theme to the blog:
$ cd ..
$ cp themes/hugo-tranquilpeak-theme/exampleSite/config.toml .
Now it’s necessary to change some small things in the configuration file, in order to tell Hugo what will be the title and URL of our blog. We can configure another fields, like the blog’s author:
baseURL = 'https://construinspector.blog/'
title = 'ConstruInspector blog'
[author]
name = "ConstruInspector"
Writing content
Now that we have set up our blog, it’s time to see how it looks. For that, we run the command
hugo server -D
which will allow us to update our blog in real time while we perform some changes. The default URL is http://localhost:1313/, where we can see our blog:
Great! Now that we have our blog working, now we have to create our first blog post:
hugo new posts/first-post/index.md
Once our blog is created, it’s time to add some content:
content/first-post/index.md
---
title: "First Post"
date: 2022-07-12T18:30:20-05:00
draft: true
---
¡Hola Mundo!
The generated file has some metadata at the top for the title, date and a flag to see if the post is a draft. The page will update automatically and you will be able to see the new post!
Configuring Firebase
This is when we publish our blog using firebase. For this we will create a new Firebase project. Go to the firebase console, and create a new project:
Give it a name:
And then finish the new project wizard. If you want, you can enable Google Analytics. Once you are done creating the project, it’s time to configure it in your blog. Go to the blog project directory and run:
$ firebase init
When you run this command, there will be a wizard to configure the blog with Firebase. To navigate in this assistant, use the arrows, spacebar for selecting and enter for confirming.
In the first step you should choose ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/path/to/your/blog
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to tog
gle all, <i> to invert selection, and <enter> to proceed)
◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
◯ Firestore: Configure security rules and indexes files for Firestore
◯ Functions: Configure a Cloud Functions directory and its files
❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
◯ Hosting: Set up GitHub Action deploys
◯ Storage: Configure a security rules file for Cloud Storage
◯ Emulators: Set up local emulators for Firebase products
In the second step, we’re going to choose ❯ Use an existing project.
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
Then select the project you just created:
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory:
construinspector-blog (Construinspector Blog)
Now it will ask for the blog public directory. By default Hugo uses the public directory for generated files, so you can use the default value.
=== Hosting Setup
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.
? What do you want to use as your public directory? (public)
Now it will ask if you want to configure it as a Single Page App. Thanks but no thanks.
=== Hosting Setup
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.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
Then it’ll ask if you’d like to publish the blog automatically everytime with GitHub. In our particular case our CI/CD is not configured with GitHub, so we’ll answer no.
=== Hosting Setup
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.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔ Wrote public/404.html
✔ Wrote public/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
i Writing gitignore file to .gitignore...
✔ Firebase initialization complete!
Time to publish our blog!
Once we finish with the wizard, we are ready to publish! In order to publish, the first thing that we want to do is transpile our blog. For that we run the hugo command:
$ hugo
Start building sites …
hugo v0.101.0+extended darwin/amd64 BuildDate=unknown
| EN
-------------------+-----
Pages | 3
Paginator pages | 0
Non-page files | 0
Static files | 0
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 18 ms
By running this command, Hugo will generate the files int he public directory, and they’ll be ready to upload them to Firebase, for that we’ll run this command:
$ firebase deploy
=== Deploying to 'construinspector-blog'...
i deploying hosting
i hosting[construinspector-blog]: beginning deploy...
i hosting[construinspector-blog]: found 6 files in public
✔ hosting[construinspector-blog]: file upload complete
i hosting[construinspector-blog]: finalizing version...
✔ hosting[construinspector-blog]: version finalized
i hosting[construinspector-blog]: releasing new version...
✔ hosting[construinspector-blog]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/construinspector-blog/overview
Hosting URL: https://construinspector-blog.web.app
Now you can visit https://construinspector-blog.web.app and you’ll find the blog!
Using your own domain for the blog
Houston, we have a problem! The blog doesn’t look good!
If you remember, we had configured our blog with the URL https://construinspector.blog:
baseURL = 'https://construinspector.blog/'
If you want, you can just use the URL that Firebase gives us, but in our case we want to use our own domain, so we need to take a couple of additional steps. For that, we are going to go to the Hosting section at the Firebase console.
Once we are there, we’re going to click on Add custom domain and we’ll fill the field with the blog’s domain.
In the second step, Firebase will ask you to validate the ownership of the domain:
For that, you are will need to add a DNS record. There are several ways of doing this, but they will depend of the DNS provider that you have for your domain. We use CloudFlare, so we are going to add it in its dashboard:
Now that you added the record, you’ll have to add another record to your DNS configuration, to finish configuring the domain with Firebase:
Once this step is done, you can go to the blog’s URL, and it will be available. It’s not longer necessary to go to the Firebase provided URL.
Conclusions
Creating a blog with Hugo and Firebase is really simple, and the best of it is that it’s free! Probably Hugo is not going to work for everyone, but if you reached this point of this post, is proably because you are comfortable configuring the blog by yourself, so Hugo might be a viable option for you. For us it is a very good option, as we are a tech startup, we have the experience to configure it, and it fits our requirements.
Pros
- Its free! (If you are within the free tier of Firebase)
- You don’t have to manage any infrastructure for the blog, so our team can focusing in more important tasks.
- You can publish it with only one command.
- Due of the way that is developed, a blog using Hugo is really fast.
Cons
- Its not for everyone, requires some technical knowledge to have some functionality that already exist in other CMS.
- It requires Markdown knowledge to write content, however, there are frontends that allow to use WYSIWYG editors. Personally I prefer Typora to write Markdown.
Stay tuned! In our next post, we’ll configure our blog so it can be multilanguage,
