1. Home
  2. Docs
  3. Simply Static
  4. Deployment

Deployment

All static hosting providers require a GitHub repository for their deployment. So make sure you followed the documentation about the GitHub Integration here and that you already have generated a static version of your website.

Cloudflare Pages

Create an account for Cloudflare Pages here.

Set up a page

Login to your account and navigate to “Menu” and then “Sites”:

Deployment 1

Click on “Create new project.

Cloudflare will ask you to connect your GitHub account to get your created repositories automatically. Click the button and connect your profile. After that you get a list of your repositories, choose the one created by Simply Static Pro (in my case patrickposner.de as I created a static version of my german website), then click on “Begin Setup”.

Deployment 2

You will now see an additional step called “Set up builds and deployments”. Usually, you don’t want to change something here, so click on “Save and deploy”.

Deployment 3

The last page is called “Building and deploying”. You don’t have to do anything here, Cloudflare Pages will set up the page and you can follow the progress in the progress window. Wait for Cloudflare to finish the deployment.

Deployment 4

You can follow the log to see if there are any problems with your deployment. It will end with “Successfully deployed” if everything was ok. Then you can click “Continue to project”.

Deployment 5

Preview the result

Cloudflare Pages creates a temporary URL for you that you can use to work and view the site. Here is a short example of my static created website:

Deployment 6

Anytime you make changes to your website and update create a new static version (full export, via builds, or by creating a single export within a post/page) Simply Static Pro will automatically commit your changes to GitHub and your static website gets notified to update the static version of your website.

Add custom domain

If you like you can now add a custom domain to your project. Take a look at the menu tab called “Custom Domains”:

Deployment 7

Click on “Set up custom domain” and enter your domain name. You get a CNAME record you have to add to the DNS configuration of your domain provider. If you are using Cloudflare to manage your DNS this could not be easier as it can be added automatically with a single click of a button.

Deployment 8

GitHub Pages

You can learn about GitHub Pages here. You don’t need an additional account as you should already have an GitHub account created for Simply Static.

Create gh-pages branch

The first step is changing the branch name in Simply Static -> Settings -> GitHub to “gh-pages” and run a new static export to push your static files to the new branch of your repository. Make sure, that the “Visibility of your repository” is set to public as it’s required to host on GitHub Pages for free.

Deployment 9

Create the GitHub page

Now log in to your account on GitHub and visit the link of the repository. You find a direct link directly in Simply Static -> Settings -> GitHub. From here go to Settings->Pages.

Deployment 10

Configuration

You will see a couple of settings here. The first thing is the temporary URL to your static site. Then you can define a source for your static site, this can make sense when you have more files in your repository and your static website is in a subdirectory. You don’t need the theme settings as it’s only for Jekyll.

Deployment 11

Custom domain and path

You will notice that there are several path issues when visiting your GitHub Page without a custom domain, as GitHub always provides a subdirectory instead of working with temporary subdomains (as Cloudflare Pages do).

So to really check that it’s working correctly we should add a custom domain to our static website. Add your custom domain like so:

Deployment 12

I assume you have not configured the necessary DNS changes before you clicked the “Save” button, well I haven’t.

Deployment 13

Here you can see what you have to do. In my case, I have to define a CNAME record for static.patrickposner.de to patrickposner.github.io. to make that work. Add the DNS record and click “Check again” if the DNS update is done you get a short message “Validation Successful” and the result should look like that:

Deployment 14

SFTP

To deploy to an SFTP server you need to setup an action. Read here how to set up an action in GitHub.

To deploy to an SFTP server I highly recommend the following action: FTP Deploy Action. To make things a bit easier I created a simple main.yaml file with a subdirectory as this will be the most used case for that deployment method:

on: push
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
    - name: 🚚 Get latest code
      uses: actions/[email protected]
    
    - name: 📂 Sync files
      uses: SamKirkland/[email protected]
      with:
        server: sftp.yourserver.com
        username: youruser
        password: ${{ secrets.ftp_password }}
        server-dir: public_html/www/mysubdirectory

AWS S3

To deploy to an AWS S3 bucket you need to setup an action. Read here how to set up an action in GitHub.

To deploy to AWS S3 I highly recommend the following action: S3 Deploy. To make things a bit easier I created a simple main.yaml from the documentation that you can copy to begin with:

name: Example workflow for S3 Deploy
on: [push]
jobs:
  run:
    runs-on: ubuntu-latest
    env:
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    steps:
        - uses: actions/[email protected]

        - name: Deploy
          uses: reggionick/[email protected]
          with:
            folder: build
            bucket: ${{ secrets.S3_BUCKET }}
            bucket-region: ${{ secrets.S3_BUCKET_REGION }}
            dist-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
            invalidation: /
            delete-removed: true
            no-cache: true
            private: true

One thing to note here is the invalidation argument. It’s the CloudFront Distribution path(s) to invalidate your cache after a new version was released.

Other Providers

A lot of providers already have a GitHub action to automate the deployment. Here is a selection of GitHub actions for other providers that I have not covered in detail before:

BunnyCDN: https://github.com/marketplace/actions/bunnycdn-storage-deployer

Digital Ocean Spaces: https://github.com/marketplace/actions/digitalocean-spaces-upload-action