Skip to main content

Netlify

We support deploying your blog to Netlify. When we say, it basically means there is a GitHub Action that can be used to deploy your static site to that particular site.

Before you begin#

In order for this action to work, you'll need to have a Netlify Site setup. That can be done by the following steps:

  1. Go to Netlify create site page
  2. Select GitHub and pick the template repo you created in the Getting Started step.
  3. Finally click on the Deploy site button.
  4. Once done, you'll see a Deploying site text inside the Getting started container. Click on that link and click on Cancel Deploy. We don't need Netlify to deploy it since GitHub Actions will do that!

Action Used#

For deploying to Netlify, the Netlify Actions action is used since it looks like the best solution available at the time of writing this!

It's fairly simple to use it, just a Netlify token is needed.

Requirements#

Netlify Token#

You'll need your Netlify Personal Access Token in order to allow the GitHub Action to run a deployment for your site.

As stated in the docs, the token can be generated here. Once generated, you'll need to add the token as a GitHub secret so it can be hidden from other users.

Go to your repository Settings on GitHub and save the token as NETLIFY_TOKEN.

important

Even though it's not suggested, if you have a private repo, you can add the token directly to your action file in the below code. However, keep in mind, this is not suggested!

Netlify Site ID#

The action also requires the Netlify site ID since it needs to tell Netlify which site to update when the build is run. In order to get the site ID

  • Go to the Site on Netlify
  • Click on Site Settings
  • Find your API_ID from there.

The Site ID also needs to be added as a GitHub Secret so that it's hidden from other users.

Go to your repository Settings on GitHub and save the token as NETLIFY_SITE_ID.

Deployment code#

Now that we have the required environment variables ready, we need to pass them on the action file.

Below is the deploy.yml file that you need to add in the .github/workflows directory on your repository.

warning

If there is already a deploy.yml file in that repo, replace it with the below one!

name: 'Emanates Deploy'
on:  issues:    types: [opened, edited, deleted]
jobs:  # Deploy to Netlify  deploy:    name: 'Deploy to Netlify'    runs-on: ubuntu-latest
    steps:      - name: Checkout the repo        uses: actions/checkout@v2      - name: Install dependencies        run: npm install      - name: Set the repo env variable        run: echo "REPO=$(echo $GITHUB_REPOSITORY)" >> $GITHUB_ENV      - name: Build the static page        run: npm run generate        env:          EMANATES_TOKEN: ${{ secrets.EMANATES_TOKEN }}      - name: Deploy to Netlify        uses: nwtgck/actions-[email protected]        with:          publish-dir: './dist'          production-branch: master          github-token: ${{ secrets.EMANATES_TOKEN }}          deploy-message: "Deploy from GitHub Actions"          enable-pull-request-comment: false          enable-commit-comment: false          overwrites-pull-request-comment: false        env:          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_TOKEN }}          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}        timeout-minutes: 1

Once you save the above file, it's time to create a new blog post.

Go to your issues tab and create a new issue. Once you click on the issue create button, this action file will be invoked by GitHub and your site will start building.

If everything goes well (which it should), you'll be able to see your site on your Netlify site address.