How to Upload Website Files to Nginx Server
How to Host a Static Website with Nginx
Static site generators are a fantastic fashion to manage a website. Static sites are faster and safer than dynamic sites. They can be easily generated by a broad diversity of static site generators. My favorite is Hugo. Nginx is an ideal spider web server for serving these static files. In this tutorial we volition prepare a server and optimize it for serving our static site.
This server is going to be optimized for static sites. I recommend keeping your static websites and your dynamic websites on separate systems. In the long run, this separation will save time and frustration, VPSs are super inexpensive. I recommend Linode and I practice so without an chapter code.
This guide assumes that you already accept a properly configured remote server. If you need aid setting up a basic server, check out Setting Upward a Bones Server with Ubuntu 16.04. This guide is intended for and has been tested on Ubuntu 16.04.
Install
Install Nginx spider web server.
sudo apt-get install nginx Controlling Nginx
The post-obit commands will help y'all command Nginx.
This will start Nginx
sudo systemctl start nginx To cease Nginx
sudo systemctl end nginx To restart Nginx
sudo systemctl restart nginx To reload Nginx configurations.
sudo systemctl reload nginx Firewall
Your server should be running a firewall. I recommend the Unproblematic Firewall (UFW). If you need assist with UFW, cheque out, A Guide to the Uncomplicated Firewall (UFW) for Linux. The following control will allow HTTP and HTTPs traffic.
sudo ufw allow 'Nginx Full' Then we need to reload the firewall rules.
sudo ufw reload If you lot are using another firewall and don't know how to permit HTTP or HTTPS traffic, then you lot should consider switching to UFW. Firewalls are too import to be convoluted. UFW allows mere mortals to create firewall rules.
Verify
At this indicate, we should verify that the server is operational. Visit your servers IP address in a web browser. You lot should be greeted past a generic Nginx info screen from the default site. If that does not happen so something when wrong.
Make a Dummy Site
I want to serve files from a directory within my home directory. This directory will be called www.
cd ~
mkdir www In this new directory we will brand a dummy index.html folio.
nano ~/world wide web/index.html Within merely put anything. Nosotros don't need actual html, simply something kinda unique.
Welcome to test.jasonrigden.com. This is the dummy index folio. At present we demand to change the world wide web directory permissions. This volition allow Nginx to admission the files.
chmod 0755 ~/world wide web Nginx Configuration Directory
Let'southward enter the directory containing the Nginx configuration files.
cd /etc/nginx ls this directory to have a look around. In this tutorial we only care about a couple files and directories. The file nginx.conf is the central configuration file for our Nginx case. The sites-available and sites-enabled directories contain the site specific configuration files.
nginx.conf
Information technology is a good practice to make backups of configuration files earlier editing them. Make a fill-in of of nginx.conf.
sudo cp nginx.conf Onetime.nginx.conf Now open the primary Nginx configuration file and take look around.
sudo nano nginx.conf Start of all, lines starting with a # are comments and are ignored by Nginx. Directives need to finish with a semicolon ;. Configuration is organized into blocks such as http, server, location. Nginx configuration files can also include other files. If l yous wait near the bottom of the http cake you should encounter a line, include /etc/nginx/sites-enabled/*;. The configuration files in the sites-enabled will exist included as role of the Nginx configuration. The sites-enabled will be where our website specific settings files will exist. The nginx.conf will be where the server broad settings will be.
sites-available
Enter the sites-bachelor directory.
cd sites-available Generally speaking, the sites-bachelor directory contains configuration files for private websites. Let's take a look at the default configuration file.
sudo nano default In this file you lot should see more blocks. Look for the server and location blocks. Go out nano and so copy this default file. Permit'south make a new configuration file for a new website. I would proper noun the new file for the domain you will be using. In my case that is jasonrigden.com.
sudo nano exam.jasonrigden.com This will be the site specific configuration file for the website at test.jasonrigden.com. Edit the file and modify the values every bit advisable.
server {
listen lxxx;
server_name test.jasonrigden.com;
root /dwelling/jason/www;
alphabetize index.html;
} Nginx needs to know a few things before it can really get-go serving upwards web pages. Notice that our settings will alive in a server block. We tell Nginx to mind for connections on port eighty. That this server cake is for the domain test.jasonrigden.com. That the files to server are located at /home/jason/www.
Remember earlier when nosotros talked about included configuration files? Configuration files in the sites-enabled directory will be included in our Nginx instance. Create a symbolic link for the configuration files we desire to enable.
sudo ln -due south /etc/nginx/sites-available/exam.jasonrigden.com /etc/nginx/sites-enabled/ Then restart the Nginx server.
sudo systemctl restart nginx Bank check to see if the sites is up.
curl examination.jasonrigden.com Which should return the contents of the alphabetize.html that we made earlier.
Welcome to examination.jasonrigden.com. This is the dummy index page. It works
At this point nosotros have a working website. All y'all need now is to have your static site generator output to /home/jason/www. Anything in that folder will exist served by the Nginx. The next few sections volition cover diverse optional features and optimizations that y'all can cull.
Logs
Writing web logs takes resource. If you want to save these resources, disable logging. Open up upward the main Nginx configuration file.
sudo nano /etc/nginx/nginx.conf Find the logging section.
##
# Logging Settings
## access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
Comment out the access_log and the error_log.
##
# Logging Settings
## #access_log /var/log/nginx/access.log;
#error_log /var/log/nginx/error.log;
Customer Side Caching
Telling our clients to enshroud resource like js, css, and images files can significantly improve performance. I like to use the a shortened version of the rules from H5BP's server-configs-nginx.
# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|mp4|ogg|ogv|webm|htc)$ {
access_log off;
add_header Cache-Command "max-age=2592000";
}
# CSS and Javascript
location ~* \.(?:css|js)$ {
add_header Cache-Control "max-age=31536000";
access_log off;
}
These rules can be added to your site configuration file.
sudo nano /etc/nginx/sites-available/test.jasonrigden.com Is should look something similar to this.
server {
mind fourscore;
server_name test.jasonrigden.com;
root /habitation/jason/www;
index index.html;
} Add the caching rules to the end of the block.
server {
listen fourscore;
server_name test.jasonrigden.com;
root /home/jason/www;
index alphabetize.html;# Media: images, icons, video, sound, HTC
# CSS and Javascript
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|mp4|ogg|ogv|webm|htc)$ {
access_log off;
add_header Cache-Control "max-historic period=2592000";
}
location ~* \.(?:css|js)$ {
add_header Enshroud-Control "max-age=31536000";
access_log off;
}
}
Pre-pinch
Compression should be already be activated by default on your server. We can salve server resources and get higher pinch levels with by pre-compressing our files. We volition enable pre-compressed files by editing the main Nginx configuration file.
sudo nano /etc/nginx/nginx.conf Find the department:
##
# Gzip Settings
## gzip on;
And merely add together gzip_static on;.
##
# Gzip Settings
##
gzip_static on;
gzip on; Then restart the Nginx server.
sudo systemctl restart Our example index.html from earlier volition not actually do good from pinch. But, we will do it anyway for the sake of the sit-in.
gzip -v -k -f --best index.html -5 is for verbose, -thousand is for keeping the original file, -f is to overwrite whatsoever older zipped file with the same name, and — all-time is for the best pinch. Your static site generator will probably have an choice for pre-compression. Check the documentation.
HTTPS
Properly enabling encryption in your web server used to exist terrible. Signed certificates were expensive and the setup was complicated. Our friends at the EFF and Let'southward Encrypt fixed that. We are no longer beholden to the decadent and frequently incompetent certificate authority cartel. Signed certificates are at present bachelor free from Let'south Encrypt. And the certbot plan sets up the server for us.
Install certbot.
sudo apt-get install software-backdrop-common
sudo add together-apt-repository ppa:certbot/certbot
sudo apt-become update
sudo apt-get install python-certbot-nginx Run certbot.
sudo certbot --nginx This should bring upwards a dialog.
Which names would y'all like to actuate HTTPS for?
-------------------------------------------------------------------------------
1: jasonrigden.com
2: cryotek.jasonrigden.com
iii: test.jasonrigden.com
-------------------------------------------------------------------------------
Select the appropriate numbers separated past commas and/or spaces, or go out input
blank to select all options shown (Enter 'c' to abolish): On my server I accept a couple of sites. Select the site y'all would similar to activate HTTPS for. Later on making your selection, certbot will do some work and and then ask if y'all would like to redirect traffic to HTTPS.
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP admission.
-------------------------------------------------------------------------------
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Cull this for
new sites, or if you're confident your site works on HTTPS. You can disengage this
change by editing your web server'due south configuration.
-------------------------------------------------------------------------------
Select the appropriate number [ane-2] so [enter] (press 'c' to cancel): I would choose to redirect. If all goes well, you will see a congratulations message.
And so restart the Nginx server.
sudo systemctl restart nginx Visit the site with your browser. If you chose to redirect you will automatically be sent to the HTTPS version of the site.
Certificates must exist renewed or the will expire. The post-obit control volition do this. Add it to your crontab to run regularly.
sudo certbot renew Enable HTTP/2
HTTP/2 is a major improvement for the spider web. Information technology can give you lot a large improvement in client performance. You lot will demand to have enabled HTTS for HTTP/2. Open up the configuration file for test.jasonrigden.com.
sudo nano /etc/nginx/sites-available/test.jasonrigden.com You will see certbot has done some editing. Notice the listen line.
listen 443 ssl; change that to:
listen 443 ssl http2; And so restart the Nginx server.
sudo systemctl restart nginx Decision
You at present have an spider web server optimized for serving static conten
Source: https://medium.com/@jasonrigden/how-to-host-a-static-website-with-nginx-8b2dd0c5b301
0 Response to "How to Upload Website Files to Nginx Server"
Post a Comment