I am embarking on this new journey to use Static Site Generator.

So far, I have managed to setup:

I have a shared hosting service (for many years now) so I want to use that to host my site. This added some (small) challenges in my journey. I will share my experience, so far and in future, in this post. One thing that I really like is how natural I find this. After all I am a Programmer.

How can you use my work?

You can fork my repository (link above) and follow the simple instruction on the README.md to start using. I will use my own repository for instructions here.

Before you start, get these softwares and setup correctly

I use autoenv to manager per-project shell environment. It executes .env file in the directory when you cd into it. This is optional but very useful.

Clone and Change

git clone git@github.com:yogendra/yogendra.me.git
cd yogendra.me
git submodule update --init --recursive

Here are some changes that you should consider:

  • You should probably delete site/content/* and site/static/* (or not).
  • You should change information in config.toml, consider changing:
    • googleAnalytics
    • baseUrl
    • title
    • author
    • description
    • githubUsername
    • [menu.icon] links

Run and Test

You can run development server using following command

hugo server -s site -wDEF -b http://localhost:1313 --navigateToChanged --cleanDestinationDir -d dev

What the hell! Read instruction in hugo server --help to understand what each of those switches mean. We are asking hugo to:

  • -w : watch for changes
  • -D : build draft
  • -E : build expired pages
  • -F : build future date page,
  • -b : set base url to http://localhost:1313
  • –navigateToChanged : navigate browser to updated file
  • –cleanDestinationDir: Delete all the files that might be there in destination dir
  • -d : Destination dir to store files into

You can add your own content using command like

cd site
hugo new post/<post-name.md>

When you want to prepare actual deployment, you can use following command

hugo -s site -d public

Configure Firebase

I recommend using Firebase. Read the hosting guide and get familiar with the concept and commands.

First, login to firebase from cli. This needs to be done only once. If you have already done this for any other prohect, you can skip this step

$ firebase login

Now you need to initialize firebase setting for the project. This will run as a wizard. Follow onscreen instructions.

$ firebase init hosting

You may test your firebase configuration by deploying changes directly from your machine

$ firebase deploy

Important: Choose “N” for “Configure as a single-page app (rewrite all urls to /index.html)?”. Also, don’t overwrite files under public/

Configure Travis CI

Based on Travis CI - Firebase Deployment

Create a new project on Travis CI website website. Login to Travis CI via travis command.

$ travis login

Get a deployment token from firebase, for using in travis ci build environment.

$ firebase login:ci

This should generate a string that looks like 1/AD7sdasdasdKJA824OvEFc1c89Xz2ilBlaBlaBla.
Use following command to encrypt this string and use in .travis.yml.

$ travis encrypt "1/AD7sdasdasdKJA824OvEFc1c89Xz2ilBlaBlaBla" --add

Replace deploy key in .travis.yml with folowing text. Remember to change SUPER-SECRET-ENCRYPTED-VALUE with text from last command output

provider: firebase
branch: master

That’s it! Don’t forget to checkin your changes.