The cloud computing platform

Deploying static sites with GitHub Actions and Netlify

Dan Achim

February 2020

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

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
    	http://localhost:8080/
    
  • 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 http://localhost:8080/. 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 :)

← Back to blog

56K.Cloud GmbH is a Technology company focusing on Automation, Cloud, Containers, and DevOps

56K.Cloud GmbH
Bleicherweg 10,
8002 Zürich
Switzerland


Design by Voila