by Aravind Putrevu
Hugo + Firebase: How to create your own static website for free in minutes
Ever thought of having your own website for putting up your project portfolio or resume or a blog for yourself. By the end of this article, you will be able to create one.
To put up a website, you need to have a “space” (aka hosting) where all your files will be uploaded. Whenever someone types your website and clicks enter, these are the files that are served/presented to the user on the browser.
Let’s get started with what you need to have/know:
I believe you might already have a Gmail account, which is enough. If not create one.
Download it from here.
Firebase is a mobile and web application platform, acquired by Google a few years ago. Firebase offers hosting as one of its features. However, many mobile developers use it for Analytics, Notifications, Crash Reporting of apps. We are going to use it for hosting our website.
Step 1: Install Hugo on your machine
Windows: You will get a simple portable executable file. You can place it anywhere and run via command line. You can add it to your path variable in Windows environment variables to get it referenced anywhere.
Mac: You can install it using Homebrew. If you don’t have brew installed on your mac, you can download the tarball from here.
Either way, make sure you are able to access Hugo by giving below command.
Step 2: Create a template site
Head over to the location where you have decided to create your website and enter the command below:
$ hugo new site <path_to_folder>
At the given location you can see a folder structure as shown in below image.
These folders are just placeholders for your content. All the text content of your site goes to content folder.
You can run below commands to add new files.
$ hugo new about.md
If you want to add a blog post create a folder named “blog” in “content” folder and start adding your files. These files have an extension of “.md” which are Markdown files.
Markdown is a plain text formatting markup language. It is pretty and easy. There are umpteen guides on how to approach Markdown, here is one.
Step 3: Set a theme for the site
Hugo has a great community. Their themes site is enriched with different categories of website themes. Head over to it and select a theme, that suits your requirement.
Each theme will have its own way of setting things up. This particular theme doesn’t have many steps. Just clone or download the zip to the themes folder. Copy the config.toml file to the root folder of your website.
Step 4: Set up your preferences
Open the config.toml file and start editing it. Give your name and other details you wish to show up on the website. Some themes support Google Analytics so that you can track the user visit count etc. You can give your GA Id to gather data.
Step 5: Set up a Firebase Hosting Project
As I mentioned earlier, Firebase is a beautiful mobile platform with a ton of features. I used Firebase hosting to host my static website generated via Hugo.
To use Firebase services use your Google account and login to Firebase website.
Click on “Go to console.” Create a project by giving it a name. You will be shown an overview page in which you should select “getting started on Hosting.”
Step 6: Set up Firebase tools on your machine
Open your terminal/command line interface on your machine and type command below.
$ npm install -g firebase-tools
The above command installs the Firebase-tools package. You need to execute a few more commands to be able to deploy your website directly.
$ firebase login
This command connects your machine to the Firebase project. It enables you to list and select the project to which you want to push your changes.
$ firebase list
You can run above command to see the project which you have created. One final touch to the entire workflow, we need to initialize the root folder of your website as Firebase project root.
$ firebase init
It will ask you some questions like
- Which Firebase CLI features do you want to setup? Answer: Hosting.
- Select a default Firebase project for this directory Answer: Select Firebase project you have created in Step 5.
- Do you want to use as your public directory? Answer: Yes.
- Configure as a single-page app? Answer: Yes.
To avoid confusion, I have detailed screenshots taken at each step for your reference. It can be downloaded here.
Finally! Firebase initialization is complete.
Step 7: Verify your website locally
Run below command to check your site locally on your machine.
$ hugo server -w
Hugo comes with a light-weight high-performance web server, where you can check all your changes. Make sure that all your images are put up in static/img folder. In an iterative process, change your config.toml and verify those on browser. Below is the port on which your server will be running.
Step 8: Deploy your website
Type in below command to generate your site and push it to corresponding Firebase project which you have configured in Step 5.
$ hugo && firebase deploy
Step 9: Connect it to your domain (optional)
Firebase provides an option to connect your domain to Firebase app. Click on connect domain and give your domain and add the TXT records to verify your domain ownership.
For this log on to your domain registrar portal.
Step 10: Create a blog post
Creating a blog post is pretty simple. Hugo understands markdown files. Just head over to content->blog folder (folder location depends on the theme). Create a markdown file. Repeat the Step 8 to see the results.
If you have any queries or doubts, you can DM me on twitter !
Always Happy to help!