Moving My Site to a Digital Ocean VPS
June 17, 2017
I just moved my site to a Digital Ocean virtual private server (VPS) (referral link). I had been wanting to do it for a long time but it seemed complicated, and using Github Pages to host my site was both easy and convenient. In the end, my desire to learn how to operate a VPS won over the convenience of Github, and I decided to take the plunge.
First, I created a simple Hello World! HTML page and, after some trial and error, was able to deploy it to a VPS using a domain name that I had lying around. Since that worked, the next logical step was to try to move my site. Moving my site was slightly more complicated because I'm using a static site generator, which adds a few more steps and nuances to the process.
In the end, it took some concentration, three or four hours of uninterrupted time, and heavy use of Google and Stack Overflow, but the move was successful and my site now resides in its own Digital Ocean virtual private server (or "droplet", as DO likes to call their VPS's).
Below are the series of steps I took:
Setting Up the VPS
- Create a new Digital Ocean VPS.
- SSH into the VPS and create a new user.
- Give the new user superuser privileges, and set up SSH keys for the new user so that I won't have to log in as root.
- Disable root login (for extra security). This article shows how to do 2, 3, and 4.
- Configure my domain name. I did it slightly differently than the article explains: I didn't point the domain name servers to Digital Ocean since I wanted to keep using Godaddy's email forwarding feature (which would have been disabled if I had moved my DNS to DO). Instead, I just created an A record pointing @ to the I.P. of my VPS, and a CNAME pointing www to @. I then went to Godaddy and did exactly the same thing.
- Install a NGINX web server. Pretty straight forward.
- Create server blocks and configure one for my site. Server blocks let you host multiple sites on the same server. I also did this part slightly differently than explained in the article: I left the default server location intact, so that when I type the I.P. of my VPS in the browser's address bar it still shows the standard NGINX welcome message. Basically, this means that I set up my site like the test.com example site in the article.
Updating my site
- Open my site's folder in my local computer and make some changes.
npm startin the command line, open the browser and navigate to
localhost:8082to see the site.
- If everything looks good, it's time to git commit the changes and push them to the site's remote repository in Github. This is easy:
git add .to add the files to the staging area,
git commit -m "short message"to commit the changes, and
git push origin masterto upload the changes to the remote repository.
Uploading my site to the VPS
- If I haven't done it already, run
npm startto generate the static site, which will load to folder
- Move the files in
./publicto the VPS's
/var/www/mariosanchez.org/html, which is the folder within the VPS where the website files will be hosted. For this, I created a bash file, located in the root directory of my project, that I named
deploy.sh. This bash file syncs the contents of the
./publicfolder with the contents of the
/var/www/mariosanchez.org/htmlfolder (thanks to Parimal Satyal for this tip!):
#!/bin/sh rsync -av -e ssh public/* email@example.com:/var/www/mariosanchez.org/html
Obviously, myusername and my.ip.address need to be replaced by my actual VPS information. To run the bash script I just type
./deploy.sh, which is the name of the bash script.
- Go to
mariosanchez.organd see the changes live!