Migration Mania

calendar Jul 20, 2017 · 3 min read · web blog cd/ci git  ·
Share on: linkedin copy

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

type-icon-right

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

1git clone git@github.com:yogendra/yogendra.me.git
2cd yogendra.me
3git 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

1hugo 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

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

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

1hugo -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

1$ firebase login

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

1$ firebase init hosting

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

1$ 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.

1$ travis login

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

1$ 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.

1$ travis encrypt "1/AD7sdasdasdKJA824OvEFc1c89Xz2ilBlaBlaBla" --add
2SUPER-SECRET-ENCRYPTED-VALUE

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

1deploy:
2  provider: firebase
3  token:
4    secure: "SUPER-SECRET-ENCRYPTED-VALUE"
5  on:
6    branch: master

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

comments powered by Disqus