Create your website on cloud

4 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.

Requirements

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

Steps

  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.

  6. 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
    
  7. find(or create) file post-receive' and fill following lines:

    #!/bin/bash 
       
    GIT_REPO=/srv/git/website.git
    TMP_GIT_CLONE=/tmp/mysite
    PUBLIC_WWW=/var/www/mysite
       
    git clone $GIT_REPO $TMP_GIT_CLONE
    cd $TMP_GIT_CLONE
    JEKYLL_ENV=production bundle exec jekyll build -s $TMP_GIT_CLONE -d $PUBLIC_WWW
    rm -Rf $TMP_GIT_CLONE
    exit
    
    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
    
  8. make sure you VPS port 80&443 are opened;

  9. 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 = 127.0.0.1/" /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 {
        server 127.0.0.1:19999;
        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
    

Comments