Personal Hexo Blog Tutorial // Part 3 Github and CircleCI

This is the third in a set of three turtorials on how to setup a Hexo blog site.

In this tutorial we will be going over how to keep our code stored on github and how to have our site deployed each time we push our code to github using a service called CircleCI. As usual lets breakdown some of terms.

Github is an online service that allows you to store your code online, including multiple versions of it. This is one of the latest wrappers around the git version control system, with the other being Gitlab. What is great about these is that as long as you have an internet connection you can pull down any of your code no matter where you are or what machine you are using. The second great thing is that you can attach other services to be notified when you push your code and have them perform tasks, this is where CircleCI comes in.

CircleCI helps with the process of you guessed it Continuous Integration. Continuous Integration is the continued testing and building of code as it is being changed on each commit. A commit is the chunk of code changes that you have sumbitted to github since you last committed, pushed up your code.

To signup for Github which you will need for the tutorial please go to the following link. Pick out a sweet username and get started. Once you have that done you can go about pushing your code up to your first repository. On your user page at ‘https://github.com/user-name' look for the plus in the top right near your avatar and select new repository. From there you can name your repo/project and choose whether it is going to be public or private. Eventually if you are working on some projects you will probably want to get a paid account so that you can have private repos. Then proceed to the next page which will direct you on how to push up your code. I would suggest that you do the following though since you already have a project directory. Go into that project directory and then issue the following commands:

1
2
3
git init
git remote add origin git@github.com:<username>/<repo-name>.git
git push -u origin master

At this point you can go to the repo page and you should see all of the code in your project directory shown.

Now it’s time to get an account setup on CircleCI, click this link and signup. From there you can go to their integrations page and see how to attach it to build your project on github after each build. You will need to add a circle.yml file to the root of your project directory of your hexo site. Here is a sample below for your circly.yml file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
## Customize the test machine
machine:

  timezone:
    America/Los_Angeles # Set the timezone

## Customize dependencies
dependencies:
  override:
    - npm install
    # - npm install -g hexo
    - npm install -g hexo-cli

## Customize test commands
test:
 override:
   - echo "testing"

## Customize deployment commands
deployment:
  prod:
    branch: master
    commands:
      - hexo clean
      - hexo generate
      - aws s3 sync public/ <s3://your-s3-bucket.com/>

What is great about this is that once you have it configured each time you push your code to github you can have it automatically be deployed to your site so that it stays updated as you push out new content.

We are now concluded with this tutorial series on how to host a static hexo site on s3 with circleci integration. You have learned how to use the basics of hexo, how to host a static site via s3 and how to have your site deployed automatically after each change is pushed. Thanks for reading and best of luck in your creating.