Guide to setup your first blog with Continuous Deployments pipeline 
Tags: devops, tutorial, opensource, github
Published: 2020-06-14 11:12:39

## 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:

```bash
goku:~$ npm install hexo-cli -g
```

You can refer the documentation [https://hexo.io/docs/](https://hexo.io/docs)

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

```bash
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.

![localhost](https://www.gokulakrishna.com/img/blog-1/cd-1.png)

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

```bash
goku:~/continuous-deployment-basics$ git init
goku:~/continuous-deployment-basics$ git remote add origin git@github.com:<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.

```bash
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.

![Manual deployment](https://www.gokulakrishna.com/img/blog-1/cd-2.png)

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.

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

Once that is done do a commit.

```bash
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.

```bash
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/.](https://gokula-krishna-dev.github.io/continuous-deployment-basics)

![Deployed to web](https://www.gokulakrishna.com/img/blog-1/cd-3.png)

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.

![Travis CI permission](https://www.gokulakrishna.com/img/blog-1/cd-4.png)

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

![GitHub permissions](https://www.gokulakrishna.com/img/blog-1/cd-5.png)

```yaml
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.