Deploying to a Traditional Web Server
Deploying your Hugo site to a traditional web server is no different than transferring web pages you’ve made by hand. You use Hugo to generate your site and copy the contents of the public directory to your server’s default web root.
Before you get started, you need the following information:
-
The host name or IP address of your server
-
The user account to use
-
The password for the user (unless you’ve set up public key authentication)
-
The path to the directory on the remote server where you want to store your files
-
The fully qualified domain name for your site
Your site should also have SFTP or shell access enabled. SFTP is a secure method of transferring files to remote servers. Shell access means you can log in to the remote server using the ssh command. If you have shell access, you can use the scp command, short for secure copy, to transfer your files, or the rsync program to synchronize the contents of your public directory to your web server.
If you’re working with a cloud server, VPS, or a local Linux or BSD-based server running Ubuntu, Debian, Red Hat Enterprise Linux, FreeBSD, or other Linux distributions, you most likely have shell access enabled. Some shared hosts provide shell access as well, although you may have to configure this or ask their support teams to enable it for you.
Once you have all of the information you need, you can do your first deployment. First, modify config.toml to specify the base URL for your site, changing it from example.org to your domain:
| » | baseURL = "https://yourdomain.com/" |
| | languageCode = "en-us" |
| | title = "Brian's Portfolio" |
Save the file, and prepare for its transfer. To transfer the files to your server, you can either use a graphical SFTP program like FileZilla[47] or some command-line tools.
With something like FileZilla, you’d plug your credentials into the app and then transfer the contents of your Hugo site’s public directory to the directory on your shared host.
Using the command-line interface on macOS or Linux machines, if the sftp command is available, and you wanted to transfer the public directory from your Hugo site to your web host’s public_html directory, you’d do it like this:
| | $ sftp -r username@hostname:public_html <<< 'put public/*' |
If you have shell access to your server, you can use the scp command to transfer your files securely. The following command transfers the contents of the public directory to the public_html directory on the remote server:
| | $ scp -r public/* username@hostname:public_html |
With scp, you first specify the source files, then the destination. The -r switch recursively copies files and directories.
You can also use the rsync command to transfer files to your server. With rsync, you can synchronize the contents of your local directory with another directory, and even compress the files so they’ll transfer faster. The following command uses rsync to connect to your remote server, copy the contents of the public directory to your server’s public_html directory, and remove any files on the server that aren’t in your local directory:
| | $ rsync -avz --delete public/ [email protected]:public_html |
The -a switch tells rsync to use “archive mode”, which recursively selects all files and makes a complete backup, preserving permissions and times. The -v switch shows verbose output, and the -z switch compresses the files.
If you’ve manually placed files on your server, the rsync command will delete those files if it doesn’t find them in your local public directory, so you should ensure that this command is the only way files get on your server.
In Using Webpack and npm with Hugo, you defined some tasks that made building your site easier. Modify your package.json file to include the rsync command to deploy your site, and then make a master deploy command that builds and uploads your files:
| | "scripts": { |
| | "build": "npm-run-all webpack hugo-build", |
| | "hugo-build": "hugo --cleanDestinationDir", |
| | "webpack": "node_modules/webpack/bin/webpack.js", |
| | "webpack-watch": "node_modules/webpack/bin/webpack.js --watch", |
| » | "upload": "rsync -avz --delete public/ [email protected]:public_html", |
| » | "deploy": "npm-run-all webpack hugo-build upload", |
| | "dev": "npm-run-all webpack --parallel webpack-watch hugo-server" |
| | }, |
Be sure to change the username, hostname, and remote path to match the values for your own site.
With these changes in place, you can run npm run deploy to build and upload your site to your server.
If you don’t have an existing web server, you can set one up yourself or use a shared hosting provider.
Shared hosting providers are low-cost platforms that give you some space on a server to host your web pages. You point your domain name to one of their servers and they serve up the pages. Shared hosting is one of the most common ways people host personal and small business sites. Dreamhost[48] is a well-known shared hosting provider that’s inexpensive and offers SFTP and shell access so you can automate your deployments.
On a shared host, you share resources with hundreds, or thousands, of other accounts, and you have very little control over how the web servers are configured. If you want more control, you can set up your own dedicated server, or use a cloud server provided by DigitalOcean,[49] Linode,[50] Amazon AWS,[51] Microsoft Azure,[52], or Google Cloud.[53] Unlike a shared host, you’re responsible for managing the operating system and the web server software. Each provider has documentation on how to set up and secure your web server.
The deployment process itself is identical whether you’re using a shared host or your own server.