Write blog with Hexo

Posted on | In |

Abstract

hexo to write blog with Markdown syntax
github to host the source files
webhook to automaticlly update the blog in VPS
git submodule to manage the Hexo theme

Setup

Add a new github respository(name it : github-id.github.io).
On your PC:

1
2
3
4
5
6
7
8
9
10
11
12
mkdir blog
cd blog
npm install hexo-cli -g # Node.js required
hexo init
git init
# use branch 'hexo' to store the source files, branch 'master' to store the html files.
git checkout -b hexo
git remote add origin [email protected]:github-id/github-id.github.io.git
hexo new "my-first-post"
# write blog
hexo g # generate static html files
hexo s # preview the blog on your pc(default: http://localhost:4000)

Config the github repository in _config.yml :

1
2
3
4
deploy:
  type: git
  repo: [email protected]:github-id/github-id.github.io.git
  branch: master

Deploy the blog.

1
hexo d # push html files to the master branch.

Now open https://github-id.github.io, you can see your blog.

Webhook

  1. Add a webhook of your blog’s github respository(branch master).(url example : http://your-host/hook.php)

  2. Edit hook.php in your VPS as follows:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <?php
    error_reporting(1);

    $secret = 'blog'; # must be same as the secret you type on github
    $signature = $_SERVER['HTTP_X_HUB_SIGNATURE'];
    $json = json_decode(file_get_contents('php://input'), true);
    $cmd = "./deploy.sh";
    if($signature){
        $hash = "sha1=" . hash_hmac('sha1', $HTTP_RAW_POST_DATA, $secret);
        if (strcmp($signature, $hash) == 0 && array_key_exists('ref', $json)) {
            echo shell_exec($cmd);
            exit();
        }
    }
    header('X-PHP-Response-Code: 404', true, 404);
    ?>

  3. Edit deploy.sh

    1
    2
    3
    4
    5
    6
    7
    #!/bin/bash

    cd ../blog
    echo `date +%D\ %T`>> ../hook/hook.log
    git reset --hard origin/master
    git clean -f
    git pull origin master >> ../hook/hook.log 2>>../hook/hook.log

  4. Add deploy key(Read-only access is just fine) for the VPS in your respository:
    (The example shown below is for apache)

    1
    2
    3
    4
    mkdir /var/www/.ssh
    chown -R apache:apache /var/www/.ssh
    sudo -Hu apache ssh-keygen -t rsa
    cat /var/www/.ssh/id_rsa.pub

  5. Copy the public key to add it in github respository.

  6. Clone the repository on VPS folder blog:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    mkdir blog
    chown -R apache:apache blog
    /usr/bin/sudo -Hu apache git clone [email protected]:github-id/github-id.github.io.git blog
    ``` 
    7. Test webhook on your PC:  
    ```sh
    cd blog
    git checkout master
    git commit -m "hook test" --allow-empty
    git push

  7. Then check the hook.log on VPS or just open http://your-donmain-name to check the blog.

    Theme – submodule

    Fork the theme respository.(such as hexo-theme-next)
    On your PC:

    1
    2
    3
    cd blog
    git checkout hexo
    git submodule add [email protected]:github-id/hexo-theme-next.git theme/next

So you can manage your blog content and theme in two respository separately.

HTTPS

  1. Apply a SSL CA on freessl.org;
  2. Download the Certificate files(domain.crt, domain.ca.crt, private.key);

  3. Install necessary module:

    1
    yum install mod_ssl openssl

  4. Edit /etc/httpd/conf.d/ssl.conf:

    1
    2
    SSLCertificateFile /path-to/domain.ca.crt
    SSLCertificateKeyFile /path-to/private.key

  5. Force HTTPS on all pages(Optional)
    Config the <Derictory> tag in httpd.conf:

    1
    2
    3
    RewriteEngine on
    RewriteCond %{SERVER_PORT} !^443$
    RewriteRule ^(.*)?$ https://%{SERVER_NAME}/$1 [L,R]

  6. Restart apache:

    1
    service httpd restart

After you changed your PC :

1
2
3
4
5
6
7
git clone -b hexo [email protected]:github-id/github-id.github.io.git
cd github-id.github.io
git submodule init
git submodule update
npm install hexo-cli -g
npm install
hexo new "new-post-name"