title: Website publishing workflow

excerpt: Publishing a website is an integral part of the webdesign process. There are many ways to publish websites, but one of the most common methods is via SFTP (Secure File Transfer Protocol). In this post, we will discuss how you can automate the “deployment” workflow (not sure if it is even called deployment for websites^^) with GitHub actions and SFTP. So that you never have to manually upload new website versions again, but just hit “git push”. coverImageInfo: Self created date: "2023-04-09T16:45Z" source: https://adriankast.notion.site/Website-Publishing-Workflow-a5e1a32ad1d1444fa667806e28b901f8

Publishing a website is an integral part of the webdesign process. There are many ways to publish websites, but one of the most common methods is via SFTP (Secure File Transfer Protocol). In this post, we will discuss how you can automate the “deployment” workflow (not sure if it is even called deployment for websites^^) with GitHub actions and SFTP. So that you never have to manually upload new website versions again, but just hit “git push”.

Setup with Next.JS, GitHub & Strato

I assume you’re already having your website sources checked in some git repository, in this blog post we will assume the sources are on GitHub. This post is also demonstrating the deployment of a Next.JS website, by using the static build feature of Next.JS (which has some limitations), but it works the same for every framework/source files that result in some static files (HTML & CSS & JS & assets like images and fonts) that simply have to be uploaded on a webserver for hosting. Strato is a web hosting provider that offers various hosting services such as domain registration, website hosting, and cloud hosting. I use Strato as an example here, since it is my hosting provider, the process should be exactly the same with your hosting provider, just make sure you have static file hosting and can setup SFTP accounts.

Setting up SFTP

Before we can start deploying our website, we need to set up an SFTP account with Strato. The process of setting up an SFTP account may vary depending on the web hosting provider, but the basic steps are as follows:

  1. Log in to your Strato account and navigate to the FTP section.
  2. Create a new FTP user account and set a password.
  3. Grant the new FTP user account the necessary permissions to access your website's root directory. If you host multiple websites in your webspace I would recommenend setting up separate users for each website that can only access that specific directory.
  4. Recommended: Make sure “Allow only SFTP connections” option is set, since the normal FTP protocol does not provide privacy (comparable to http).

Once the SFTP account is set up, you can check that it works by uploading you website (in static files) using an FTP client such as FileZilla.

Scripting the SFTP deployment

After the SFTP credentials are created you should make sure that it is also possible to connect to your webspace via the CLI (Command Line Interface). Especially if you plan to use other commands than shown in the GitHub actions workflow, e.g., because you want to exclude certain directories. Since the feedback loop is much shorter I recommend testing these commands from your local terminal first.

To test that the programmatic access works in general: From a terminal (or PowerShell/WSL if you’re on windows) make sure you have the sftp command installed and try to connect to the SFTP login you just created. For Strato the necessary command should look like this: sftp "sftp_user_name@[email protected]" . It will then ask for your password and once you’ve entered it, you should be connected to your webspace, and be able to execute SFTP commands like pwd.

After finding the commands that have the publishing behavior you want to achieve, let’s automate the workflow with GitHub actions.

Setting up GitHub actions workflow