Deploying static sites with GitHub Actions and Netlify

...and a hack to turn that PHP site into a static one

Background

For the last few months, we have been in a rebranding process here at 56k.cloud, that included a brand-new website developed by the awesome team at Twotwentytwo. The finished product that we have received from them was a site developed in Php with some Node.js built assets. But internally we decided that we really want a static site and to keep using Netlify as everyone has been very happy with it

The solution

Because the website’s code was already hosted on GitHub, GitHub’s new Actions feature seemed like the best fit for our CI / CD needs: it supports all types of steps that are required and it is already baked into GitHub, we just needed to enable the feature.

The steps

After enabling actions on the website’s GitHub repo, we could get to work at defining our workflow, in GitHub’s lingo. What other solutions would call a pipeline. The first step was to create a .github/workflows/main.yml that would hold this deploy-to-Netlify workflow.

• The workflow .yml needs to have a starting header that will define things like its name, what environment to run on (ubuntu-latest) or on which actions it should trigger. A decision has been made to trigger this only on pushes to the master branch:

on:
  push:
    branches:
    - master

jobs:
  build-deploy:
    name: Build and deploy the 56k.cloud website
    runs-on: ubuntu-latest

steps:

• Now we can start the workflow by checking out the Git repository and installing the tools that we need, in this case Php and Node.js:

steps:
  - name: Checkout
    uses: actions/checkout@v1
  - name: Setup Node
    uses: actions/setup-node@v1
    with:
        node-version: '11.x'

  - name: Setup PHP
    uses: shivammathur/setup-php@v1
    with:
      php-version: '7.4'

• The next step is to install the NPM modules required to generate the static assets and actually generate them

- name: Install the site dependencies
  run: npm install
- name: Build the site static assets
  run: npm run build

• Here comes the hackish part where we turn this site into a static one. This is achieved by running a Php development web server in the pipeline, in the background that serves the Php code plus the static assets generated the previous step. Then we use the classic and always useful wget to crawl this website and save locally the HTML content

- name: Start the PHP dev server in the background
  run: nohup php -S 0.0.0.0:8080 > /dev/null 2>&1 &
- name: Crawl the website to get our nice HTML files
  run: mkdir output && cd output && wget -k -K -E -r -p -N -F -nH -q

• Now we need to copy the previously built static assets in the output directory and do a bit of cleanup because wget will save some of those HTML files with links containing /. We want to remove that reference to localhost and leave all the links relative, so the HTML files can be hosted anywhere:

- name: Copy the right static files
  run: |
    cp -r ./dist/* ./output/dist/
    cp -r ./static/* ./output/static/
- name: Find all artifacts from Wget and clean them up
  run: cd output && find ./ -type f -exec sed -i 's/http\:\/\/localhost\:8080//g' {} \;

• At this point in the workflow we have an output directory that contains a static, cleaned up, website. We just need to deploy it to Netlify! This step can be easily achieved using by using Netlify’s CLI. Before defining this step, you need to make sure you have defined a new site in Netlify’s Web UI from where you can get your site ID that you need here and you have generated an Auth token for your user (the steps can be found in Netlify’s CLI documentation).

- name: Install the Netlify CLI
  run: npm install netlify-cli -g
- name: Deploy the website
  run: netlify deploy --prod --dir ./output/ --site= --auth= --timeout=600 --message "Deployed on $(date)"

That’s it! Save the workflow file .yml file, push and commit it to GitHub and it should trigger a GitHub action that will do all the work for you from now on and regenerate and redeploy the website at every commit to the master branch. You are reading this blog post as a result of this process :)

GitHub Action Marketplace

We have now included this Action in the GitHub Action Marketplace - https://github.com/marketplace/actions/deploy-to-netlfiy

Find out more about 56K.Cloud

We love Cloud, Containers, DevOps, and Infrastructure as Code. If you are interested in chatting connect with us on Twitter or drop us an email: info@56K.Cloud We hope you found this article helpful. If there is anything you would like to contribute or you have questions, please let us know!