Records10 minutes read (About 1522 words)  0 visits

Deploy Nginx and Hexo on Ubuntu Server with SSL

Looking at this article, you must have a technical basis to build your own blog website. So, in this article, basic content will be omitted, and I’ll focus on some relatively complex problems I’ve met. This article may not be entirely suitable for totally new readers.

Virtual Private Server (VPS)

VPS does not need too many introductions. The funny thing is that I used to think AlibabaCloud is quite suitable for building websites. But now I find out that the CPU frequency of its starter server, which is 2.4GHz, is too slow to have an excellent performance. On the other side, Vultr, on which I used to look down, is really impressive. It’s High-Frequency Server is equipped with CPU with 3.8GHz. So it is. I choose to build my blog on Vultr.

  • BTW, you can get $100 on your Vultr account if you register and make a payment by clicking my referral link. my referral link
    • Clarification: I can get $25 on my account if you do this.

Node.js

For Node.js, I recommend you to install new versions. You may want to check this page for help. https://github.com/nodesource/distributions

Hexo

Demo

Official website of Hexo

  1. Install Hexo npm install hexo-cli -g
  2. Switch to your desired directory and init hexo init <Name>
  3. Switch into new directory and install dependencies npm install
  4. You can run the demo now hexo s，OR hexo s -p 80 to use particular port
  5. You can use screen to keep it running Screen -R hexo

Worth a word: Hexo, based on Node.js, is basically a web program. So its package management, running, and migration have no difference to regular Node.js applications.

Configuration

Configure your blog based on the official tutorial. https://hexo.io/docs/configuration

Theme

The default theme is way simple and crude, so let’s select a good-looking theme! https://hexo.io/themes/

My blog uses Icarus. The tutorial can be found in its demo site.

Some key points

Here are some difficulties I met.

  • If you cannot find SVG images, you can go to Unsplash or something to download your favorite photos. And then convert them to SVG format on some websites like SVGCreator. For the avatar image, you can compress it on TinyPNG.

  • ShareThis module. You can go to register on ShareThis, turn on the Image Share Buttons, click the Get The Code and then paste the link within src to the configuration file.

Nginx

The command Hexo s mentioned before uses Node.js in-build web-server to run your blog. It’s hard to enable Https and some other special features by using Node.js web-server. So we usually don’t do this way.

Instead, we usually use Nginx to dispatch or reserve proxy requests.

You can simply use apt install Nginx on Ubuntu. The configuration files are in the /etc/nginx. The main file is /etc/nginx/nginx.conf and the sites related configuration file is located in sites-enabled directory. Usually, we only need to edit the last one, that is /etc/nginx/sites-enabled/default

  • sites-enabled actually contains the symbol links of files in sites-available

Nginx to be the Server

Because Hexo is a static blog, we only need to set the root in /etc/nginx/sites-enabled/default to be where your blog directory is placed. This method can sharply reduce the average loading time of your blog, which I highly recommend.

1
2
3
4
5
6
7
8
server {
	listen 	80;	
	listen 	[::]:80;
	
	server_name blog.zifan.wang;	# YOUR DOMAIN
	root	/www/hexo/blog/public;	# YOUR DIRECTORY/public
	index	index.html;
}

You can visit your blog after restarting Nginx. service nginx restart

Nginx Reverse proxy Node.js

This method needs both Nginx and Node.js running, which takes up more than 100 MB of memory and costs much more time to load.

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
	listen 	80;	
	listen 	[::]:80;
	
	location / {
		add_header Cache-Control no-cache;
		proxy_set_header Host blog.zifan.wang;		# YOUR DOMAIN
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_pass http://127.0.0.1:4000;			# Default URL of Hexo server
		proxy_connect_timeout 30s;
	}	
}

You can visit your blog after restarting Nginx. service nginx restart

SSL

It’s 2020 now; almost all websites support Https, should your blog.

To enable Https, you need an SSL certificate. You can get a free SSL certificate, or you can buy a more stable one. So in terms of your blog, I recommend you buy a cheap one. That’s enough.

This blog uses positive SSL certificate of NameCheap, which is cheap and good.

Now, you need three more steps to activate Https finally.

  1. Generate a pair of keys on your server
  2. Verify your domain on where you buy the certificate
  3. Add configure on Nginx

Generating Keys

Switch to your blog directory and paste codes below. Files server.key and server.csr are the output files.

openssl req -new -newkey rsa:2048 -nodes -keyout server.key -out server.csr

Some points

  • Common Name: fill with your domain for verification
  • A challenge password: you can set a easy-remembering password

Verifying your domain

Paste the content of .csr to the given text box and choose one of these three methods.

  • Email. If you have domain email, this is the recommended method
  • DNS. Add a particular record of your domain.
  • Http. Upload a given file to your website and make sure they can visit it. If you don’t have domain email and activation time of new DNS records, this might be the best method.

Some points

If you choose method one, directly using Nginx as the server, you need to upload the file to the given path and then change the content of /etc/nginx/sites-enabled/default to:

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
	listen 	80;	
	listen 	[::]:80;
	
	server_name blog.zifan.wang;	# YOUR DOMAIN
	root	/www/hexo/blog/public;	# YOUR DIRECTORY/public
	index	index.html;
	
	# New Content
	location /.well-known {
		allow all;
	}
}

If you choose method two, you need to upload the file to the given path and then change the content of /etc/nginx/sites-enabled/default to:：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
server {
	listen 	80;	
	listen 	[::]:80;
	
	server_name blog.zifan.wang;	# YOUR DOMAIN
	
	location / {
		add_header Cache-Control no-cache;
		proxy_set_header Host blog.zifan.wang;		# YOUR DOMAIN
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_pass http://127.0.0.1:4000;			# Default URL of Hexo server
		proxy_connect_timeout 30s;
	}
	
	# New Content
	location /.well-known {
        proxy_pass http://127.0.0.1:4000/.well-known;
    }
}

加载SSL

Now you can download your certificate and then upload .crt file to your blog directory。After that we can add configuration of Nginx.

If you choose method one, you need to change the content of /etc/nginx/sites-enabled/default to:

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
server {
	listen 	80;	
	listen 	[::]:80;
	
	# Enable next line to refirect all request to Https
	# return	301		https://$host$request_uri;
	
	# Move next three lines to next server block to refirect all request to Https
	server_name blog.zifan.wang;	# YOUR DOMAIN
	root	/www/hexo/blog/public;	# YOUR PATH/public
	index	index.html;
	
	# Move next three lines to next server block to refirect all request to Https
	location /.well-known {
		allow all;
	}
}

# New content
server {
	listen 	443 ssl;
	listen 	[::]:443 ssl;

	ssl_certificate		/www/hexo/blog_zifan_wang.crt;	# YOUR FILE PATH
	ssl_certificate_key	/www/hexo/blog_zifan_wang.key;	# YOUR FILE PATH
}

If you choose method two, you need to change the content of /etc/nginx/sites-enabled/default to:

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
27
28
29
30
31
32
server {
	listen 	80;	
	listen 	[::]:80;
	
	# Enable next line to refirect all request to Https
	# return	301		https://$host$request_uri;
	
	# Move next serveral lines to next server block to refirect all request to Https
	server_name blog.zifan.wang;	# YOUR DOMAIN
	location / {
		add_header Cache-Control no-cache;
		proxy_set_header Host blog.zifan.wang;		# YOUR DOMAIN
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_pass http://127.0.0.1:4000;			# Default URL of Hexo server
		proxy_connect_timeout 30s;
	}
	
	# Move next three lines to next server block to refirect all request to Https
	location /.well-known {
        proxy_pass http://127.0.0.1:4000/.well-known;
    }
}

# New content
server {
	listen 			443 ssl;
	listen 			[::]:443 ssl;

	ssl_certificate		/www/hexo/blog_zifan_wang.crt;	# YOUR FILE PATH
	ssl_certificate_key	/www/hexo/blog_zifan_wang.key;	# YOUR FILE PATH
}

Redirect all requests to Https is highly recommended

You can find the green lock when visiting your blog after restart Nginx: service nginx restart

Other

Main content is over. Let’s talk about some other things.

Migration

I migrated my demo blog from AlibabaCloud to Vultr and found it really simple, just like normal Node.js programs.

  • Install Node.js and Hexo
  • Pack up and transfer you blog directory to new VPS
  • Install Nginx and edit configuration

And success! Thanks to Node.js!

Multi-language

https://tstrs.me/en/1448.html

#

Comments

×