5 minute read

Create your website on Virtual Private Server(VPS)

We host our website on cloud VPS, our website based on Jekyll, so we can simply write our pages by Markdown. For the convenience of updating our site, we build Git server on VPS to auto publish it.


  • a VPS (e.g. google cloud VM instance)
  • a domain name (e.g. dongdongbh.tech)


  1. ssh login your server(assume the system of your server is Linux);

  2. install Ruby, Jekyll, bundler, Git, Nginx; Here is a good ngnix video startup tutorial.

  3. cd /etc/nginx/sites-available/
    sudo rm default
    sudo touch /etc/nginx/sites-available/mysite.conf
    sudo ln -s /etc/nginx/sites-available/mysite.conf /etc/nginx/sites-enabled/mysite.conf

    why using sites-available and sites-enabled? ii is useful when you want stop a site but not delete the config file, you just delete the soft link in sites-enabled.

  4. setup Nginx in /etc/nginx/sites-available/mysite.conf, write: (note that paste to vim directly will cause align problem, so set vim as paste mode and then paste to avoid the problem–:set paste, to paste, and then ::set nopaste). here is a good nginx configuration tutorial.

    # You should look at the following URL's in order to grasp a solid understanding
    # of Nginx configuration files in order to fully unleash the power of Nginx.
    # http://wiki.nginx.org/Pitfalls
    # http://wiki.nginx.org/QuickStart
    # http://wiki.nginx.org/Configuration
    # Generally, you will want to move this file somewhere, and start with a clean
    # file but keep this around for reference. Or just disable in sites-enabled.
    # Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
    # Default server configuration
    server {
    	listen 80;
    	listen [::]:80;
    	# your domain name
    	server_name dongdongbh.tech www.dongdongbh.tech;
    	rewrite ^(.*)$  https://$host$1 permanent;  
    server {
    	# listen 80;
    	# listen [::]:80;
    	# SSL configuration for https
    	listen 443 ssl default_server;
    	listen [::]:443 ssl default_server;
    	# put your ssl certificate file under /etc/nginx/cert directory and set here
    	# or you can follow the ssl vendor's instruction
    	# ssl on;	
    	ssl_certificate   cert/xxxxxxxxxxxx.pem;
        ssl_certificate_key  cert/xxxxxxxxxxxx.key;
       	ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
    	# Self signed certs generated by the ssl-cert package
    	# Don't use them in a production server!
    	#include snippets/snakeoil.conf;
    	# your site location
    	root /var/www/mysite;
    	# Add index.php to the list if you are using PHP
    	index index.html index.htm index.nginx-debian.html;
    	# your domain name
    	server_name dongdongbh.tech www.dongdongbh.tech;
    	location / {
    		# First attempt to serve request as file, then
    		# as directory, then fall back to displaying a 404.
    		try_files $uri $uri/ =404;
  5. For https SSL Encrypt, you can use a free SSL provider Let’s Encrypt or Certbot to do it. if you use certbot, it will automatically add ssl_certificate to nginx config file, so just remove that two line in config file and let certbot add it.

Build locally and deploy on remote

  1. With Jekyll, Rubygems and bundler, you can set up a local development environment.

    Refer this post for setup ruby, gem and bundler.

    then build the site on local machine with

    JEKYLL_ENV=production bundle exec jekyll build

    upload the files in $PUBLIC_WWW to host machine /var/www/mysite which nginx pointing.

    You can check your site by

    bundle exec jekyll serve

    then visit it on

  2. Setup remote git repository

    On host machine, setup your git server repository for your site. e.g. deploy_site.git. For details, ref Setting Up Git Server

    find(or create) file hooks/post-receive' and fill following lines:

    cd $PUBLIC_WWW  
    unset GIT_DIR
    git pull $GIT_REPO
  3. Setup CI flow

    On local machine

    cd _site
    git init 
    git add .
    git commit -m 'nil'
    git remote add origin user_name@dongdongbh.tech:/srv/git/deploy_site.git
    git push origin master

    set pre-push git hook to automatically deploy to host by

    cd .git/hooks
    vim pre-push


    JEKYLL_ENV=production bundle exec jekyll build
    cd _site
    git add .
    git add .
    git commit -m 'nil'
    git push origin master
    cd ..

    then every time push the updates to github with git push origin, the script run before it, which build and deploy the site to host.

Remote development with git post-receive

Another way is push all your develop files to remote and build on it. In this method, you must install all ruby gem bundle on your remote machine (not recommended).

  1. setup your git server repository for your site. e.g. /srv/git/website.git. For details, ref Setting Up Git Server

    sudo chgrp -R $(whoami) /srv/git(the dir)
    sudo chmod -R g+rw /srv/git(the dir)
    cd /srv/git/website.git
    git init --bare
  2. find(or create) file post-receive' and fill following lines:

    git clone $GIT_REPO $TMP_GIT_CLONE
    JEKYLL_ENV=production bundle exec jekyll build -s $TMP_GIT_CLONE -d $PUBLIC_WWW
    rm -Rf $TMP_GIT_CLONE
    sudo chmod 755 post-receive
    sudo chgrp $(whoami) post-receive
    sudo chown $(whoami) post-receive

    Note: You must not install your ruby, gem and bundle to your $home path, otherwise the post-receive will not find bundle command, I’m not sure why this happened, it seems the script can not source .bashrc file, even I change #!/bin/bash to #!/bin/bash -l, anyone can tell why this happened please leave a comment, thanks.

    and run

    sudo mkdir /var/www/mysite
    sudo chown -R $(whoami) /var/www/mysite
  3. make sure you VPS port 80&443 are opened;

  4. In site directory on your local computer:

    git remote add server user_name@dongdongbh.tech:/srv/git/website.git

    then you can use git to update your website, when push your local updates to your server, your site will automatically update.

Monitoring website by Netdata

Netdata is an open source tool designed to collect real-time metrics, such as CPU usage, disk activity, bandwidth usage, website visits, etc., and then display them in live, easy-to-interpret charts.

Install Netdata

bash <(curl -Ss https://my-netdata.io/kickstart.sh)

Host by Nginx

  1. Configure Netdata application to listen only on localhost instead of every interface.

    sudo sed -i -e "s/# bind to = \*/bind to =" /etc/netdata/netdata.conf
    sudo systemctl restart netdata
  2. Generate credentials for basic access authentication,(net-user username, net-pass password).

    echo "net-user:$(openssl passwd -crypt net-pass)" | sudo tee /etc/nginx/passwd
  3. create a new web host config file /etc/nginx/sites-available/netdata.conf

    upstream backend {
        keepalive 64;
    server {
      listen [::]:443 ssl; # managed by Certbot
      listen 443 ssl; # managed by Certbot
      ssl_certificate   cert/xxxxxxxxxxxx.pem;
      ssl_certificate_key  cert/xxxxxxxxxxxx.key;
      ssl_session_timeout 5m;
      auth_basic "Protected";
      auth_basic_user_file /etc/nginx/passwd;
      # the virtual host name of this 
      server_name netdata.example.com;
       location / {
            # proxy_set_header X-Forwarded-Proto https;
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Server $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://backend;
            proxy_http_version 1.1;
            proxy_pass_request_headers on;
            proxy_set_header Connection "keep-alive";
            proxy_store off;
  4. Enable this specific configuration.

    sudo ln -s /etc/nginx/sites-available/netdata /etc/nginx/sites-enabled/
  5. Reload nginx configuration.

    sudo systemctl reload nginx