Easy webpage deployment

Easy webpage deployment with git & ssh

Lukas Oppermann
Design & Technology

--

SSH access

You need to have ssh access enabled ion your server for this to work. You should get the ssh username and the ssh password from your provider.

Accessing a server via ssh looks something like this:

# -p defines the port, if you use 22 you can omit this.
ssh -p 1234 user@host.com

Afterwards you should be asked for your password. Congratulations, if you entered your password correctly, you are now on your server via ssh.

To leave the server, simply type “exit” and hit return.

exit

Since entering this can get annoying I suggest you add an alias to your .bash_profile.

alias sh="ssh -p 1234 user@host.com"

Now you can reload your .bash_profile and try the new alias.

#the . sources the file, meaning reloads it
. .bash_profile

Upload via ssh

Since you are in the terminal anyway, it would be quite handy if you had an easy command at your disposal to just upload a file to the server. The command you are looking for is scp, it works pretty similar to ssh in that you have to provide the port (mind the capital -P) if it is not 22 and the user@host.

scp -P 22 local/path/file.txt user@host.com:~/folder

The first path after the port is your local path (starting from your current directory in the terminal), after the user@host follows a colon and the path to where the file should be copied to. If you name the file you can rename it.

scp local/file.txt user@host.com:~/folder/newFile.txt

You will be asked to confirm by providing your password. The file should now be on your server.

Stop ssh asking for your password

Having to enter your password every time you log into the server or even copy something onto the server feels pretty stupid, wouldn’t it be nice if you could simply store the password?
To bad, you can’t (shouldn’t) but we have an even better thing, ssh-keygen.

In your terminal type the following.

# generate public and private keys
# (you can leave the passphrase empty)
ssh-keygen

Now copy the public key to the remote server.

scp ~/.ssh/id_rsa.pub user@host:~/

Login to your server using the alias or the full ssh command.

Now create a new directory and save the content of the public key file to the authorized_keys file.

# create the .ssh directory in the root directory
mkdir .ssh
# append key to authorized_keys file
cat id_rsa.pub >> ~/.ssh/authorized_keys

You should now delete the id_rsa.pub file.

# delete the public key file
rm -f id_rsa.pub

Leave the server using exit and verify it worked by loggin in without providing your password.

# leaving server
exit
# login using the alias
sh

Copy alias

If you often copy files to your server it makes sense to create an function for copying. Add the following to your .bash_profile

function sshcp {
scp $1 user@host:~/$2
}

Now you can copy files like this, much easier, isn’t it?

# copy file.txt to login root
sshcp file.txt
# copy file to /folder on the server
sshcp file.txt /folder

Deploying via git

On the server we need to create the folder for our project, lets call it mysite and a bare git repo mysite.git. A bare repository means it contains no working source files, but only the version control. By convention bare repositories are have the project name and .git as extension.

# create the project folder and move into it
mkdir mysite && cd mysite
# create the .git folder and move into it
mkdir mysite.git && cd mysite.git
# do a bare init
git init —bare

The Hook

Like in many programming languages git has hooks, special scripts that are executed at a specific time in the process. You can read more about hooks in the git documentary. The hook we are interested in is the post-receive hook.

To create it simply run the cat command, type the two lines and once you are done press ctrl+d to save it to the file.

cat > hooks/post-receive#!/bin/sh
GIT_WORK_TREE=../ git checkout -f

After saving with ctrl+d you need to set the correct permissions

chmod +x hooks/post-receive

We are done here, so back to the local machine.

Adding the remote

In your local repo add a remote.

git remote add server user@host.com:~/mysite/mysite.git

Now you can just push to server and your site will be deployed.

# initial push
git push —set-upstream server master
# subsequent push
git push sever

Dev environment

Servers are often different from your local development environment. This makes it helpful to test a site on your server before deployment. An idea would be to add another repo like

~/mysite/dev/mysite_dev.git 
git remote add dev user@host.com:~/mysite/dev/mysite_dev.git

Now you can push to dev and test your project before deploying it to server.

--

--

Lukas Oppermann
Design & Technology

Product designer with a love for complex problems & data. I post about Figma, design tokens, design systems & design related topics. https://lukasoppermann.com