--- title: "Effectively Manage GitHub Actions Artifacts to Deploy Releases" description: "Learn how to use GitHub Actions Artifacts for DevOps to utilize and deploy releases in this tutorial from ATA Learning!" canonical: "https://adamtheautomator.com/github-actions-artifacts-2/" --- # Effectively Manage GitHub Actions Artifacts to Deploy Releases > Learn how to use GitHub Actions Artifacts for DevOps to utilize and deploy releases in this tutorial from ATA Learning! Source: https://adamtheautomator.com/github-actions-artifacts-2/ --- ATA Learning Tap to hide [ ATA Learning ](/) * [Home](/) * [Tutorials](/tutorials/) * [Instructors](/author/) * [Advertising](/advertising/) * [Recommended Resources](/resources/) * [About Adam](/about-adam/) Search for: * [](https://twitter.com/adbertram) * [](https://github.com/Adam-the-Automator) * [](https://www.linkedin.com/company/adam-the-automator-llc) * [](/feed/) ![Effectively Manage GitHub Actions Artifacts to Deploy Releases](https://adamtheautomator.com/wp-content/uploads/2022/09/Effectively-Manage-GitHub-Actions-Artifacts-to-Deploy-Releases.jpg) # Effectively Manage GitHub Actions Artifacts to Deploy Releases [![](https://secure.gravatar.com/avatar/d05ab46ae71ee2393867f96cfec69e3a779ade5f81d9a519fc4d4fab1b177298?s=192&d=mm&r=g)Goodness Chris-Ugari](https://adamtheautomator.com/author/goodness-chris-ugari/)21 September 20228 min. read Categories: [DevOps](/category/devops/) Tags:[GitHub](/tag/github/)[GitHub Actions](/tag/github-actions/) Table of Contents * [Prerequisites](#prerequisites) * [Building a CI/CD Workflow](#building-a-cicd-workflow) * [Configuring a Custom Artifact Retention Period](#configuring-a-custom-artifact-retention-period) * [Importing a Project from Git Repository to Netlify](#importing-a-project-from-git-repository-to-netlify) * [Creating a Personal Access Token](#creating-a-personal-access-token) * [Securing Site ID and Access Token by Creating Secrets](#securing-site-id-and-access-token-by-creating-secrets) * [Downloading and Deploying Artifact to Netlify](#downloading-and-deploying-artifact-to-netlify) * [Deleting Unused Artifacts to Save Space](#deleting-unused-artifacts-to-save-space) * [Conclusion](#conclusion) Has your team invested a lot of effort in manually packaging code? If so, it’s about time you use GitHub Actions Artifacts, so your team can automate this procedure. At the same time, you reduce release variability and save time to work on other crucial tasks. GitHub Actions Artifacts lets you effectively transfer data from one active job to another, eliminating the repetitious and time-consuming tasks involved in deployment. In this tutorial, you’ll learn how to use and manage artifacts for deploying a React application to Netlify. Read on and start creating consistent deployments! ## Prerequisites This tutorial will be a hands-on demonstration. If you’d like to follow along, be sure you have a simple React application and a GitHub repository. This tutorial uses a [React Counter App repository](https://github.com/Goodiec/React-Counter-App). ## Building a CI/CD Workflow When a job in a GitHub Actions workflow ends, so does the data they process and generate. Data called artifacts can be retained on the repository page after jobs have been completed and can be uploaded using the upload-artifact action. But before using GitHub Actions artifacts for your deploy releases, you need to first build a [CI/CD](https://adamtheautomator.com/jenkins-ci-cd/) workflow for your application: Related:[How to Create a Jenkins CI CD Pipeline](https://adamtheautomator.com/jenkins-ci-cd/) 1\. Create a _.github_ folder in the root directory of your application and create a sub-folder called _workflows_. 2\. Next, create the workflow file (a .yml file) in the _workflows_ folder. You can name the file as you like. But for this tutorial, the file is named _ci.yml_. Your file workflow resource structure should look like the one below. ![Verifying workflow resource structure](https://adamtheautomator.com/wp-content/uploads/2022/09/image-440.png) Verifying workflow resource structure 3\. Add the following code into the _ci.yml_ file and save the changes. The code below creates a workflow called CI with a build job for the application. ```yaml name: CI on: push: branches: [ "main" ] pull_request: branches: [ "main" ] # The workflow will be triggered on a push or pull event on the main branch jobs: build: name: Build runs-on: ubuntu-latest # Operating System to run on strategy: matrix: node-version: [12.x, 14.x, 16.x] steps: - uses: actions/checkout@v3 # Get code from the repository - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} - name: Install dependencies run: npm ci - name: Build app run: npm run build - name: Run tests run: npm run test ``` 4\. Now, add and commit the changes, and push them to your remote GitHub repository. If the push were successful, you’d see the commit with an amber-colored circle, as shown below, indicating that the workflow is running. ![Verifying successful commit and push to the remote repository](https://adamtheautomator.com/wp-content/uploads/2022/09/image-441.png) Verifying successful commit and push to the remote repository 5\. Click on the Actions tab to view the workflow. ![Viewing the workflow](https://adamtheautomator.com/wp-content/uploads/2022/09/image-442.png) Viewing the workflow 6\. Click on any build jobs on the left-hand side and expand the Build app job. You’ll see the build job’s data (static files) generated. These are the files you need for deployment. These generated files are lost when the server running the job is disposed of (or when the job ends). Since you’ll need these files for deployment, you’ll implement a step to take these files and upload them as an artifact in the following section. ![Viewing the builds](https://adamtheautomator.com/wp-content/uploads/2022/09/image-443.png) Viewing the builds 7\. Finally, add the following code after your run tests under the steps block in your build job. The code below uploads an artifact named production from the build directory using the actions/upload-artifact@v3 action. The generated files are lost when the server running the job is disposed of or when the job ends. Since you’ll need these files for deployment, the code below implements a step to take them and upload them as an artifact. ```yaml # Upload Artifact - name: Upload production-ready build files uses: actions/upload-artifact@v3 with: name: production path: ./build ``` ## Configuring a Custom Artifact Retention Period Artifacts are stored for 90 days by default before being erased. But depending on the type of repository, you can alter this retention period. Below are the values you can set for customizing an artifact retention period: * Private Repository – Any value between `1` and `400` days. * Public Repository – Any value between `1` and `90` days only. To set a custom artifact retention period, update your workflow YAML file by including `retention-days: 2` in your `# Upload Artifact` step. ```yaml # Upload Artifact - name: Upload production-ready build files uses: actions/upload-artifact@v3 with: name: production path: ./build # Customize Artifact Retention Period retention-days: 2 ``` Alternatively, configure the artifact retention period with the following through GitHub: * Navigate the **Settings** tab in the repository. * Click on **Action** (left panel) to expand the dropdown, and select **General**. * Input the number of days you want to keep the artifact under the Artifact and log retention section shown below, and click Save. ![click Save](https://adamtheautomator.com/wp-content/uploads/2022/09/image-444.png) click Save ## Importing a Project from Git Repository to Netlify The build artifact can now be accessed in another job in the workflow by being downloaded because you have a step to upload the artifact, reducing the workflow completion time. You’ll add a deploy task to your workflow, and one of the steps in that job downloads the uploaded item. But before updating your workflow, you’ll set up [Netlify](https://www.netlify.com/) for the app deployment: 1\. Open your favorite web browser, navigate to [Netlify](https://app.netlify.com/) and log in with your GitHub. 2\. Once logged in, click on Add new site in the Sites section, and select Import an existing project to initiate importing your project. ![Initiating importing project to Netlify](https://adamtheautomator.com/wp-content/uploads/2022/09/image-445.png) Initiating importing project to Netlify 3\. Click on GitHub since you’ll use the repository you created for this tutorial on GitHub. A pop-up window appears where you’ll authorize Netlify access to your GitHub identity. ![Choosing GitHub as the Git provider](https://adamtheautomator.com/wp-content/uploads/2022/09/image-446.png) Choosing GitHub as the Git provider 4\. Once authorized, search, and select the repository you want to import the project from. ![Selecting the GitHub repository to import the project from](https://adamtheautomator.com/wp-content/uploads/2022/09/image-447.png) Selecting the GitHub repository to import the project from 5\. On the new page, configure the basic build settings for the site, such as the branch you want to deploy from and the build command. But since you’ll be deploying using GitHub actions, leave the build command, and publish directory fields blank. Click on Deploy site after configuring the build settings, and you will see that the site is being deployed. Once deployed, a live link will be generated for the site. > _If you left the build command field blank, going to the link will display a 404 page as the app didn’t build._ ![Configuring basic build settings for the site](https://adamtheautomator.com/wp-content/uploads/2022/09/image-448.png) Configuring basic build settings for the site 6\. Next, click on Site settings to overview the site information (step six). ![Accessing the site details ](https://adamtheautomator.com/wp-content/uploads/2022/09/image-449.png) Accessing the site details 7\. Lastly, on the Site details page, note down the Site ID below under the Site information section for later use. ![Noting the Site ID](https://adamtheautomator.com/wp-content/uploads/2022/09/image-450.png) Noting the Site ID ## Creating a Personal Access Token Now that you have your site ID, you need to get an access token. The personal access token will grant access to your Netlify account so that GitHub Actions perform the deployment on Netlify. 1\. Click on your profile icon (top-right), and choose User settings to access your profile settings. ![Accessing the profile settings](https://adamtheautomator.com/wp-content/uploads/2022/09/image-451.png) Accessing the profile settings 2\. On the new page, click on Applications (left panel) → New access token (under Personal access tokens section) to initiate creating a new access token. ![Initiating creating a new access token](https://adamtheautomator.com/wp-content/uploads/2022/09/image-452.png) Initiating creating a new access token 3\. On the new page, input a descriptive name for the token and click on Generate token. ![Generating a new personal access token](https://adamtheautomator.com/wp-content/uploads/2022/09/image-453.png) Generating a new personal access token 4\. Now, copy the token to a safe place. ![Copying the new personal access token](https://adamtheautomator.com/wp-content/uploads/2022/09/image-454.png) Copying the new personal access token ## Securing Site ID and Access Token by Creating Secrets Now that you have the site ID and access token from Netlify, you can add them to your repository to be used in the actions workflow. But first, you’ll have to secure your site ID and access token by creating secrets. Related:[Launching GitHub Actions Environment Variables and Secrets](https://adamtheautomator.com/github-actions-environment-variables/) 1\. Navigate to your GitHub repository on your browser. 2\. Next, click on the Settings tab → Secrets (left panel) → Actions (under Secrets) to access the list of actions available on your repository. ![Accessing the list of actions in the GitHub repository](https://adamtheautomator.com/wp-content/uploads/2022/09/image-455.png) Accessing the list of actions in the GitHub repository 3\. Click the New repository secret on the Actions secrets page to initiate adding a secret. ![Initiating creating a new repository secret](https://adamtheautomator.com/wp-content/uploads/2022/09/image-456.png) Initiating creating a new repository secret 4\. Now, provide a descriptive Name for the new secret. But this tutorial uses NETLIFY\_AUTH\_TOKEN as the secret name. Add your access token as the Value and click on Add secret to create the new secret. ![Adding a secret for the access token](https://adamtheautomator.com/wp-content/uploads/2022/09/image-457.png) Adding a secret for the access token 5\. Lastly, repeat step four, but this time, add a secret for your site ID. Once added, you’ll see the secrets in the Repository secrets section, as shown below. ![Verifying the newly-added secrets](https://adamtheautomator.com/wp-content/uploads/2022/09/image-458.png) Verifying the newly-added secrets ## Downloading and Deploying Artifact to Netlify Now that your Netlify site and secrets are set up, you’ll include a step in your workflow to deploy to Netlify using your secrets. 1\. Update your workflow by adding the code below containing the deploy job. The following code contains steps to download the uploaded artifact and another step to deploy it to Netlify. > _You can find the complete code for the [ci.yml file in ATA’s GitHub repository](https://github.com/Adam-the-Automator/Scripts/blob/85ea6e2b2aeac93a13a6229092ed6909f85f9d3a/github-actions-artifacts/ci.yml)._ ```yaml deploy: name: Deploy #Job name needs: build # The build job has to run successfully for the deploy job to run runs-on: ubuntu-latest steps: - name: Download artifact uses: actions/download-artifact@v3 # Downloads the uploaded files with: name: production path: ./build - name: Deploy to Netlify uses: netlify/actions/cli@master # Step to deploy to Netlify env: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} # Secrets for authentication with: args: deploy --dir=build --prod ``` 2\. Next, add and push the changes to the remote repository. You should see the latest commit being run on the workflows page on the repository, as shown below. Once committed, click on the latest run to view more details. ![Verifying the latest commit being run](https://adamtheautomator.com/wp-content/uploads/2022/09/image-459.png) Verifying the latest commit being run If the jobs run successfully, you’ll see a green check beside the jobs and the production artifact at the bottom of the page. ![Verifying the jobs run successfully](https://adamtheautomator.com/wp-content/uploads/2022/09/image-460.png) Verifying the jobs run successfully 3\. Now, click on the Deploy job (left panel), and expand the Deploy to Netlify task. You’ll see the output of the step, which contains the website URL. Click on the Website URL to verify the site works and is accessible. ![Verifying the Website URL](https://adamtheautomator.com/wp-content/uploads/2022/09/image-461.png) Verifying the Website URL The URL automatically opens in a new tab on your web browser, as shown below. This output indicates that your site is working correctly. ![Verifying the site works correctly and is accessible via a web browser](https://adamtheautomator.com/wp-content/uploads/2022/09/image-462.png) Verifying the site works correctly and is accessible via a web browser ## Deleting Unused Artifacts to Save Space After each release, you use more disk space when you upload and download new releases. How do you save space? Deleting unused artifacts is the most viable solution. You must limit the number of release artifacts residing on each server to prevent the accumulation of thousands of releases and a full disk. Besides using the retention period setting to delete artifacts after some time, you can also delete the artifact from the workflows page on GitHub: On your workflow page, click on the delete icon beside the artifact to delete it. ![Deleting an artifact from the workflow on GitHub](https://adamtheautomator.com/wp-content/uploads/2022/09/image-463-1024x478.png) Deleting an artifact from the workflow on GitHub Now, click **OK** on the prompt (topmost) to confirm deleting the artifact. ![Confirming artifact deletion](https://adamtheautomator.com/wp-content/uploads/2022/09/image-464.png) Confirming artifact deletion Notice below that the artifact is not on the page anymore, confirming it has been deleted successfully. ![Verifying the artifact is deleted](https://adamtheautomator.com/wp-content/uploads/2022/09/image-465.png) Verifying the artifact is deleted ## Conclusion You’ve seen how artifacts make it simpler to develop more intricate automation in which one workflow provides information to another. At this point, you should now have a better understanding of GitHub Actions artifacts and how they can be used for your deploy releases. With this newfound knowledge, why not take advantage of GitHub actions for the workflow automation of your next project? Share this article [Share on X](https://twitter.com/intent/tweet?url=https%3A%2F%2Fadamtheautomator.com%2Fgithub-actions-artifacts-2%2F&text=Effectively%20Manage%20GitHub%20Actions%20Artifacts%20to%20Deploy%20Releases)[Share on Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fadamtheautomator.com%2Fgithub-actions-artifacts-2%2F)[Share on LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fadamtheautomator.com%2Fgithub-actions-artifacts-2%2F) ## Related Posts ![](https://adamtheautomator.com/wp-content/uploads/2024/12/featured-image-8.webp) ### [Creating Custom GitHub Actions: A Complete Guide for DevOps Teams](/custom-github-actions-guide/) Learn how to build custom JavaScript GitHub Actions to share standardized, reusable code across your organization's workflows. This hands-on tutorial walks through creating authentication and secret management actions. ![](https://adamtheautomator.com/wp-content/uploads/2022/10/How-to-Use-the-GitHub-Actions-Matrix-Strategy-in-Deployments.jpg) ### [How to Use the GitHub Actions Matrix Strategy in Deployments](/github-actions-matrix/) Learn how to use the GitHub Actions Matrix deployment strategy and take your actions to the next level in this ATA Learning tutorial. ![](https://adamtheautomator.com/wp-content/uploads/2026/08/featured_image-5.webp) ### [Azure DevOps Boards: Trace Every Commit to Deployment](/azure-devops-boards-traceability/) Configure Azure DevOps Boards process templates, backlogs, and Kanban WIP limits, then trace every work item from commit to deployment. ## Categories * [IT Ops](/category/it-ops/) * [Cloud](/category/cloud/) * [DevOps](/category/devops/) * [Home Ops](/category/home-ops/) * [Information Security](/category/infosec/) * [Software Development](/category/software-development/) ## Site * [Home](/) * [Tutorials](/tutorials/) * [Instructors](/author/) * [Advertising](/advertising/) * [Recommended Resources](/resources/) * [About Adam](/about-adam/) Copyright 2026© ATA Learning | [Privacy Policy](/privacy/)