Quite a cliche first blog post for a programming blog. But I’ve started this blog as a way to share the things I learn and this is my most recent learning!
In this post I will be showing you how I’ve set up this very blog you are reading right now.
I’ve opted to use Hugo as the underlying software because I can easily export markdown files from Notion.so (where I do most of my note taking) and Hugo will create web pages out of it. I can also change the theme later without having to edit all the pages again.
As the hosting platform I’ve chosen Firebase mostly because it’s free. And in the past year I’ve gotten very familiar with the Google Cloud Platform but haven’t really used all of the Firebase features. This way I can experiment some more with it.
Installing Hugo
In my case, I use Manjaro Linux so I can open up a command line (shortcut ctrl + alt + t) and run: sudo pacman -S hugo
In case you are using another operating system, I’d like to refer you to the Hugo documentation at https://gohugo.io/getting-started/installing/. If running the hugo version command in a command line returns a version number you are ready to go!
Creating Your Blog
Once Hugo is installed you can start creating a website with the following command:
hugo new site my-blog-site
Theme
Next step is to select a theme, Hugo doesn’t include a default theme but you can go look at https://themes.gohugo.io/ to get a starters theme. I would advise a simple one like Newsroom or Ghostwriter. You can always customize them later.
To install the theme you have 2 options, you can git clone the repository as a sub-module. This way it stays linked to the original version and you can always pull the latest changes. The other way, which I recommend if you plan on customizing your theme, is to download it and paste the content of folder in your /themes/theme-name folder.
Settings
Time to set up your blog for you. In your theme you will find an exampleSite folder. Copy the contents of the themes/[THEME_FOLDER]/exampleSite/config.toml to your /config.toml file and fill it in with your site’s name and your preferred settings.
Blog Posts
Next up is the content of your blog. You can go back again to the exampleSite folder and copy the contents of the content folder to the /content folder at your project root. These files will form the template of your blogposts. You can edit them or delete them, just don’t delete them all so you have one for reference.
Firebase
I’ve chosen to host my blog on Firebase because I’ve been working with the Google Cloud Platform recently. They also have a generous free tier called Spark
Create A New Firebase Project
To create a project on Firebase go to the Firebase Console, you will need a Google Account for this. Then walk trough the following steps:
- Click on add project
- Give your project a name
- Choose if you want to include Google Analytics to your project. I would recommend to do it so you can get data like how many viewers you have on your blog.
- Add or create a new Google Analytics account if you don’t have on yet.
- Your project will now be created.
Adding Firebase To Your Hugo Blog
First register your app in Firebase. You can choose the web app option (</>). Give it a name and tick the “Set up Firebase Hosting” checkbox.
Next it will ask you to add the Firebase SDK to your blog. Copy the code snippet and go to the /themes/[THEME_NAME]/layouts/_default/_baseof.html file in your code. Here you can paste the code snippet just before the </body> tag at the end of the file.
Install The Firebase CLI Tool
For this step you will need NodeJS since the Firebase tool is written in NodeJS. To install node I’d like to refer you to the Node Website (https://nodejs.org/en/download/). If you have a linux distribution I would recommend you to follow the Installing Node with a Package Manager link. Next up, run the command: npm install -g firebase-tools (You might need sudo permissions to install it globally on your system). If you can run firebase --version without problems, you are good to go to the next step.
Deploying Your Blog
Everything is setup and it’s time to deploy your app to Firebase. We will just need a couple more commands.
firebase login– If it is your first time using Firebase you will have to login from the command line to your Google Account.firebase init– This will start a Firebase set up script:- Select Features – We only need the Hosting feature.
- Project Setup – Use an existing project > [Your Firebase Project Name]
- Public Directory – This is the directory you will host. By default Hugo also uses public so just press enter here.
- Single Page Web App – Type
N, Hugo splits your site over multiple files not just the single index.html. - Automatic Builds – Type
N, we will not cover this in this guide.
hugo– This will build and optimize your Hugo blog. You will see that Hugo created a /public folder with the whole website in. Just as we configured in Firebase.firebase deploy– Deploys your public folder to Firebase.
