GitHub Actions: An In-depth Guide for Beginners
Actions Platform? It would not be wrong to mention that GitHub Actions has significantly transformed the workflow of web developers. This Continuous Integration and Continuous Delivery (CI/CD) platform enables them to build, test, and deploy web codes straight from GitHub. Are you a beginner? Do you want to learn how this tool can boost your productivity? Read this guide until the end. It makes you aware of the components and features of GitHub Actions. Let’s get started! What is GitHub GitHub Actions is an automated tool powered by GitHub. It supports the automation of software building, testing, and deployment within the repositories of GitHub. Since the user does not need to leave GitHub, it naturally enhances the workflow and productivity. Developers can perform repetitive tasks while reducing manual intervention. GitHub Actions utilizes a YAML file to outline different steps of a workflow. These steps include running a script, testing, deploying codes, and sending notifications. Components of GitHub Actions GitHub Actions is a powerful tool that makes web development smooth and quick. Wondering what mechanisms make GitHub Actions work so well? Let’s learn about them. Workflow A workflow is a programmed process that runs one or more jobs. This configurable process is defined by a YAML file in the .github/workflows directory in a repository. This repository can have several workflows. And each workflow can perform a different set of jobs. For instance, you can use one workflow to create and test pull requests while another to deploy your application. Events An event is a particular activity in a repository. It is like a trigger for workflows. When events occur within a repository, GitHub Actions respond to them. These events can push requests, pull requests, or other actions. Jobs Jobs are a set of steps in a workflow. They are executed under the same runner. Each step is either a shell script or an action. Scripts execute while actions run. Action An action is an application for the GitHub Actions. It performs frequently repeated tasks. The application helps web developers to reduce the number of repetitive codes they write in their workflow files. Runner A runner is a server that runs workflows when they are triggered. One runner can perform a single task at a time. Essential Features of GitHub Actions Though GitHub Actions offers various advantages to web developers, a few prominent features are below. Variable in Workflows The default GitHub actions environment variables, incorporated in every workflow, run automatically. However, users can customize the environment variables by setting them in their YAML files. In the following example, you can see how one can create custom variables for POSTGRES_HOST and POSTGRES_PORT. These variables are available in the node client.js script. jobs: demo-job: steps: – name: Connect to your PostgreSQL run: node client.js env: POSTGRES_HOST: postres POSTGRES_PORT: 5432 Addition of Scripts to Workflow GitHub Actions allow the addition of scripts to workflow. You can employ actions for running scripts and shell commands. They get executed on the selected runner. Find out how an action can use the run keyword to execute npm install –g bats on the runner in the flowing example. jobs: demo-job: steps: – run: npm install -g bats Sharing Data Between Jobs One of the crucial features of GitHub Actions is that you can reuse the jobs you created earlier. You can save files for later use as artifacts on GitHub. These files get generated while building and testing web code. These files could be screenshots, binary, test results, and package files. You can also make your file and upload it on artifacts for later use. jobs: demo-job: name: Save output steps: – shell: bash run: | expr 1+1 > output.log – name: Upload output file users: actions/upload-artifact@v3 with: name: output-log-file path: output.log Step-by-Step Creation of GitHub Action File If you want to learn the workings of the GtiHub actions workflows, here is the step-by-step guide. You will need a GitHub repository to create the GitHub actions. Set up of the GitHub Action File ⦁ Make a .github/workflows directory in your repository on GitHub in case it does not already exist. ⦁ In the directory, you may create a file name: GitHub-actions-demo.yml. ⦁ Next, copy the following YAML content into the GitHub-actions-demo.yml file. name: GitHub Actions Example on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: run: echo " The job was automatically triggered by a ${{Github.event_name }} event." run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!" run: echo " The name of your branch is ${{ GitHub.ref }} and your repository is ${{ GitHub.repository }}." name: Check out repository code user: actions/checkout@v3 run: echo " The ${{ GitHub.repository }} repository has been cloned to the runner." run: echo " The workflow is now ready to test your code on the runner." name: List files in the repository run: | Is ${{ GitHub.workspace }} run: echo " This job's status is ${{ job.status }}." ⦁ Create a new branch for this commit and begin a pull request. ⦁ To create a pull request, click Propose new file. ⦁ When you commit your workflow file to a branch within your repository, it initiates the push event and then executes your workflow. Run the Files Your next step should be running the file. ⦁ Visit github.com and go to the main page of the repository. ⦁ Beneath your repository name, click Actions. ⦁ On the left sidebar, hit the workflow you want ⦁ Under Jobs, click on the Explore-GitHub-Actions job. The above log shows the breakdown of each step carried out. You can expand these steps to view its details. Conclusion GitHub Actions is a robust automation tool that streamlines development workflows. Web developers can leverage its flexibility, automation, and integration within GitHub. In addition to this, the platform supports event-driven workflows. In this blog, we learned about components of GitHub Actions. Also, we came to know about its essential features. All-in-all, GitHub Actions is a versatile tool for developers that simplifies the
Astro 3.0: Everything You Need to Know about it
Astro is an open-source web framework that enables users to design fast, efficient, and high-performance websites. It released its new avatar on August 30, 2023, known as Astro 3.0. According to the team, it is several times faster and feature-rich than previous versions. In this post, we will take an in-depth look at the revolutionary features of Astro 3.0. Before that, let us have a quick look at an Astro overview. Overview of Astro This open-source web framework is used to design heavy websites, such as landing pages, blogs, technical documentation, etc. Launched in June 2021, this open-source project provides support to more than 10,000 users. Similar to platforms like Next.js, Nuxt.js, and SolidStart, Astro features single-file components. The framework comes with a wide range of features, including partial hydration, zero-config development, incremental static regeneration, and static site generation. Let’s find out how Astro 3.0 is different from the previous version. What is new with Astro 3.0? Astro 3.0 is becoming popular as a prominent web framework to support the View Transitions API. Furthermore, it provides functionality for new browser APIs. Astro 3.0 features several exciting features, such as image optimization, SSR enhancements, performant HTML output, faster rendering, and more. Get to know more about these features in detail below. Astro 3.0: Exploring the New Features and Enhancements Full support for View Transitions API One of the outstanding features of Astro 3.0 is its support for View Transitions API. This application programming interface allows developers to create seamless transitions between different website components. You can fade, persist, morph, and slide stateful elements across page navigation. Furthermore, it enables native browser transition effects between pages. Earlier, only single-page applications could do transitions. With Astro 3.0, native page transition is possible. This feature makes it easier for developers to enhance user experience. Now you can: Transform persistent elements from one page to another Fade content on and off Slide content on and off Persist regular UI across pages without a refresh. Image Optimization (stable) Astro 3.0 features stable image optimization. Like Next.js, it also has a built-in <image> component that manages everything about rendering images on the web. This new version of Astro allows developers to compress or resize images. It automatically minimizes the page load times. As a result, images load faster in the browsers of users. This built-in feature has a significant role in enhancing website speed and performance. You can follow the below steps to use image optimization in Astro 3.0. Configure astro assets in your astro.config.mjs. Import images from the relative path from the existing .astro file. Use the image’s src and other properties in the <img> tag. Some other worth describing updates about image optimization in Astro 3.0 include: Support for Vercel’s built-in image service. You can optimize images from CMS tools and remote workflows. Astro utilizes Sharp as the default optimization library Faster Rendering Performance Astro is renowned for its rendering performance. However, with version 3.0, it has taken one step further. Compared to Astro 2.9, this new version renders components about 30% faster. This significant performance improvement is due to the less amount of JavaScript transported to the client by improving the rendering path. The developing team at Astro removed as much superfluous code as possible. SSR Enhancements for Serverless Astro 3.0 has brought numerous improvements to Server Side Rendering (SSR) for serverless applications. SSR technique generates web pages on the server before transporting them to the clients. Astro 3.0 lets you create responsive and dynamic web applications using serverless functions. Therefore, you get new ways to connect to the hosting platforms. HMR Enhancements for JSX Updating code was a big challenge with previous versions. Fortunately, with Astro 3.0, you can update codes instantly without refreshing the entire page. The framework brings HMR enhancements to JSX components. As a result, developers see changes in real-time. Not only does it minimize the development time, but also speeds up the debugging process. Astro 3.0 provides fast refresh support to React and Preact users. They can make changes without the fear of losing the component’s state. In addition, it also supports the component hierarchy. Consequently, the application maintains its structure after code changes. Optimized Build Output Astro 3.0 comes up with several changes in optimized build outputs. This latest version naturally minifies HTML outputs, reducing the payload and improving the overall response time. In addition, the team at Astro has replaced the messy astro-xxxx class names with a specific HTML attribute. Conclusion Astro 3.0 improvements make this framework ideal for web developers looking to create user-friendly yet powerful websites. It puts more stress on developer experience, performance, and user satisfaction. With features like support for the View Transitions API, improved rendering performance, and Image Optimization, we can say that Astro 3.0 leaps forward in the web development world.
