Create your website on cloud

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.

Requirements

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

Steps

ssh login your server(assume the system of your server is Linux);
install Ruby, Jekyll, bundler, Git, Nginx; Here is a good ngnix video startup tutorial.

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.

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;
	}
}

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

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 http://127.0.0.1:4000.
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:
```
#!/bin/bash 
   
GIT_REPO=/srv/git/deploy_site.git
PUBLIC_WWW=/var/www/mysite
   
cd $PUBLIC_WWW  
unset GIT_DIR
git pull $GIT_REPO
exit
```

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

add

#!/bin/bash 
   
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).

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

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

make sure you VPS port 80&443 are opened;
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

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

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

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;
    }
}

Enable this specific configuration.

sudo ln -s /etc/nginx/sites-available/netdata /etc/nginx/sites-enabled/

Reload nginx configuration.
```
sudo systemctl reload nginx
```

Twitter Facebook LinkedIn

Dongda Li

Create your website on cloud

Create your website on Virtual Private Server(VPS)

Requirements

Steps

Build locally and deploy on remote

Remote development with git `post-receive`

Monitoring website by Netdata

Install Netdata

Host by Nginx

Comments

You May Also Enjoy

Transparent proxy with V2ray and clash

Pytorch distributed data parallel step by step

Docker container for machine learning environments

Set up file server on vps by nginx

Dongda Li

Create your website on Virtual Private Server(VPS)

Requirements

Steps

Build locally and deploy on remote

Remote development with git post-receive

Monitoring website by Netdata

Install Netdata

Host by Nginx

Comments

You May Also Enjoy

Transparent proxy with V2ray and clash

Pytorch distributed data parallel step by step

Docker container for machine learning environments

Set up file server on vps by nginx

Remote development with git `post-receive`