Guide to setup your first blog with Continuous Deployments pipeline

What is Hexo?

Hexo is one of the simplest blogging platforms. This blog powered by Hexo. It allows you to create your blog with a very minimal setup. Hexo is developed using the NodeJS environment. It has a lot of plugins and themes to make your blogging simpler.

What is Continuous Delivery?

Continuous delivery is a concept where a Website or an App's content is updated instantly without any manual intervention. In this tutorial, I'll cover how that automation works and how you can expand on top of this.

Prerequisites

You should be familiar with working on the terminal, NodeJS, and git.

Project setup

Let's start to use Hexo, it is as simple as:

goku:~$ npm install hexo-cli -g

You can refer the documentation https://hexo.io/docs/

Once that is done, let's set up an Hexo project.

goku:~$ hexo init continuous-deployment-basics/
goku:~$ cd continuous-deployment-basics/
goku:~/continuous-deployment-basics$ hexo serve -p 8080

Explanation

1. Initialize an Hexo project on that new folder.
2. Makes this new project's folder as the current directory.
3. Start Hexo in development mode.

In your browser, you can check http://localhost:8080 and see your blog.

Once confirmed, create a new repository (mine is gokula-krishna-dev/continuous-deployment-basics ) and initialize a git repository in local.

goku:~/continuous-deployment-basics$ git init
goku:~/continuous-deployment-basics$ git remote add origin [e-mail]:<Your user ID>/<Your repo ID>.git
goku:~/continuous-deployment-basics$ git pull origin master
goku:~/continuous-deployment-basics$ git add .
goku:~/continuous-deployment-basics$ git commit -am "Hexo init"
goku:~/continuous-deployment-basics$ git push --set-upstream origin master

Explanation

1. Initialize a new git repository.
2. Link the current repository to your GitHub. I use SSH to communicate with my repo. You can also use HTTPS communication.
3. Download remote contents from git to the local folder.
4. Add Hexo files to the git watch list.
5. Commit all files to the repo.
6. Upload all contents from the local folder to Github.

Local Deployment

Before we do an automated deployment we have to understand the Hexo tool and do a manual deployment. It can be done using the following commands.

goku:~/continuous-deployment-basics$ hexo generate
goku:~/continuous-deployment-basics$ cd public/
goku:~/continuous-deployment-basics$ open index.html

Explanation

1. Generate HTML files for the project.
2. Switch the directory to public.
3. Open index.html.

But where did the theme and layout go?

Hexo expects us to run it on a webserver. Either you can copy the contents of the public and host it using Nginx or apache or run hexo serve to view the full site locally.

Manual deployment:

To develop an effective Continuous deployment pipeline, you must understand how manual deployment works. Let us host our first blog.

Open the file continuous-deployment-basics/_config.yml and modify the following line.

url: https://gokula-krishna-dev.github.io/continuous-deployment-basics
root: /continuous-deployment-basics/

Once that is done do a commit.

goku:~/continuous-deployment-basics$ git commit -am "Update website config"
goku:~/continuous-deployment-basics$ git push origin master

Hosting using gh-pages

gh-pages is a branch that is used to host free sites.

Open file continuous-deployment-basics/.gitignore and remove the following line.

public/

Let's deploy to gh-pages.

goku:~/continuous-deployment-basics$ hexo generate
goku:~/continuous-deployment-basics$ git stash
goku:~/continuous-deployment-basics$ git stash branch gh-pages stash@{0}
goku:~/continuous-deployment-basics$ rm -rf !("public"|".git")
goku:~/continuous-deployment-basics$ mv public/* .
goku:~/continuous-deployment-basics$ rm -rf public/
goku:~/continuous-deployment-basics$ git add .
goku:~/continuous-deployment-basics$ git commit -am "My site"
goku:~/continuous-deployment-basics$ git push origin gh-pages

Explanation

1. Generate our site again.
2. Copy all the contents from the public folder to a temporary store in git.
3. Create a gh-pages branch from the temporary store.
4. Copy site contents to root folder.
5. Remove files that cause issues with gh-pages templates.
6. Add all files to track.
7. Commit the changes.
8. Push it to Github.

As you can see it is quite a bit of heavy lifting to deploy the resource. This process has to be generated whenever you have to publish it to your blog. But luckily with the help of CI/CD tools like Travis CI and Circle CI we can now publish our blog quite often. It is very simple to set up. The idea is to set up a reliable system when we don't have to worry about doing these manual steps every time. This is achieved when is a new content merged to our git we automatically publish the changes without worrying.

Once that is done you can access your blog using the following format. It may take some to for the changes to reflect.

https://<github username>.github.io/continuous-deployment-basics

In my case the URL is https://gokula-krishna-dev.github.io/continuous-deployment-basics/.

Congrats! You have launched your first blog.

Continuous deployments

Now we have set up a site with manual deployment. The next step is to do the process automatically with a trigger. The trigger's usual trigger is when the PR is merged.

Register with Travis CI using your GitHub account.

Goto the following URL https://travis-ci.org/account/repositories

Activate CI for your project.

Go to https://github.com/settings/tokens and generate a token with the following access.

language: node_js
node_js:
  - 8
before_install:
  - npm install -g hexo-cli
script:
  - hexo generate
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  local_dir: public/
  keep_history: true
  on:
    branch: master

Explanation

1. language lets Travis CI know that we are using NodeJS app.
2. node_js specifies NodeJS version.
3. before_install makes sure that we have hexo installed before building.
4. script builds the project.
5. deploy will deploy the generated files to gh-pages.

Now every time you update and push the code to Github contents will be updated to your site immediately without any manual intervention.