Hugo + Firebase + Circle CI Blog building

repost of articles previously hosted on hugo

---

author: "@tkitsunai" date: 2018-04-15 next: /tutorials/github-pages-blog prev: /tutorials/automated-deployments title: Hugo + Firebase + Circle CI Blog building tags: ["golang","hugo","firebase"] categories : ["blog"]

description : How to created this posts

Hugo + Firebase + Circle CI Blog building

Hi all, If you to start blogging, you do not need a web server.

You need is a Github account, a Google account, and challenging mind.

Static Site Generator

Dynamic sites are wonderful, but often bothering their heads.

I like programming, but blog is "simple is the best", and I think that display speed should be done more quickly. For that, I decided to use a static site generator.

Why Hugo?

Hexo and jekyll is often mentioned as a tool for static site generator, but I like golang. Mr.Gopher is cute. For gopher(you) like that, Hugo is recommended.

• Hugo

I Chose a simple theme for this blog. Design Theme => "hestia-pure"

Custom Theme

The this theme has favicon/author static image was fixed in the theme. so, was necessary to modify the layout file.

If you use from the theme list instead of the original your theme you should confirm that you can realize.

Theme is in GitHub, you can contribute with pull-request or fork it. I chose to clone and customize.

Working with Hugo

Install Hugo

If mac, you can install via homebrew.

$ brew install hugo

Hugo Commands

For the detailed explanation it is better to look at the Commands.

Most of the commands I use are as follows.

• $ hugo new postdir/article_name
  • Create new content page
• $ hugo
  • Generate static files (output dir is "public" folder default)
• $ hugo server
  • Preview in your localhost

Hugo has many features, but I think that it would be more happy to see the official website if necessary.

Hosting

This blog is hosted by hosting service firebase.

Why Firebase?

If you are intelligent you should know. Firebase is a competent hosting service and "Fastly" is used for CDN for asset delivery. (Of course I do not need a web server)

The features used in firebase.

• Web site hosting.
  • Obviously...
• Can be Custom domain connect.
  • If you want to use a custom domain, you can connect easily. (Consult with the DNS provider.)
• Free SSL
  • You do not have to worry about SSL. firebase will do it automatically.
• Easy deployment
  • If the site is ready, just run the deploy command.

Firebase provided cli tool. It can be easily installed via npm.

$ npm install -g firebase-tools

Deployment with Firebase-cli

The steps are simple, (if manual)

1. Install firebase-cli.
2. Log in to your Google Account with $ firebase login.
3. Select the directory to be Public. (this is just a $ firebase init in the project directory)
4. Let's $ firebase deploy, ...done!

Deployment with CircleCI

CircleCI is using it for blog post deployment.

When source code is pushed, it will be deployed to firebase.

I do not give detailed explanation on CircleCI.

example CircleCI's config.yml file.

version: 2
jobs:
  build:
    working_directory: ~/89tech
    machine: true
    steps:
      - checkout
      - run:
          name: install hugo
          command: go get -v github.com/gohugoio/hugo
      - run:
          name: run hugo
          command: hugo
      - run:
          name: Print the Current Time
          command: date
      - save_cache:
          key: buildend-{{ epoch }}
          paths:
            - ~/89tech

  deploy:
    working_directory: ~/89tech
    machine: true
    steps:
      - restore_cache:
          keys:
            - buildend
      - run:
          name: install firebase
          command: npm install -g firebase-tools
      - run:
          name: firebase deploy
          command: firebase --project "$FIREBASE_PROJECTID" deploy --token "$FIREBASE_TOKEN"

workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: master

To execute firebase deploy with circle ci, you need to issue api token with

[~/89tech] (master) $ firebase login:ci

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?xxxxxxxxxx <- Google OAuth Link

Waiting for authentication...

✔  Success! Use this token to login on a CI server:

XYZxxxxxxxxxxxxxxxxx <- this is a firebase token

Example: firebase deploy --token "$FIREBASE_TOKEN"

$ firebase deploy --token XYZxxxxxxxxxxxxxxxxx

If firebase init is already completed, it is written in .firebaserc,

{
    "projects": {
        "default": "PROJECT_ID"
    }
}

Please set this PROJECT_ID and FIREBASE_TOKEN to Environment Variables of Circle CI.

circleci

Future improvement points

In the above config.yml are using Circle CI's VM.

machine: true

In the setting above, since building time is long Because it is installing hugo every time it builds it is not a good practice.

Since version:2 of Circle CI can use docker image. I will change to config.yml.

See ya.