How to View Build Logs for GitHub Pages
Tags: github, devops, programming, productivity
Published: 2021-12-17 12:50:50


GitHub Pages has always felt magical because we never had a way to see the build logs for Jekyll sites. Admittedly, that can be a bit frustrating because it's harder to identify and solve problems without context. If GitHub Pages failed to build a site, the reason wasn't always clear.

Fortunately, GitHub recently enabled GitHub Pages builds with GitHub Actions, a feature that allows developers to view the logs for their Jekyll and HTML page builds and deployments in the same place they see action logs. 

Before I explain how this works, I'll briefly describe GitHub Pages and GitHub Actions for those unfamiliar with these products.

## About GitHub Pages
GitHub Pages is a static hosting service. It generates and publishes a website based on the HTML, CSS, and JavaScript stored in your repository. The website will have a github.io domain by default, but you can also use a custom domain if preferred. For more information on GitHub Pages, read the [official documentation](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages).

## About GitHub Actions
GitHub Actions is a tool that conveniently enables you to automate custom workflows inside of your GitHub repository. The workflows fire on specific events, such as a pull request or push. For example, one can trigger a workflow by creating a pull request.  While you can write your own action, you can use an existing action. There are over 10,000 actions in the GitHub Marketplace created by developers worldwide. Developers commonly use GitHub Actions for repetitive tasks such as checking for passing tests and release management. Visit GitHub’s [documentation](https://docs.github.com/en/actions) about GitHub Actions for more information. You can better understand the difference between an action, an event, a workflow, and other GitHub Action related terminology with this [post](https://dev.to/github/whats-the-difference-between-a-github-action-and-a-workflow-2gba) by Michelle Mannering. 


## View Build Logs for Jekyll and HTML Pages

By default, when you enable GitHub Pages for your static site's repo, it will create and trigger a workflow called `pages build and deployment`. 

**_Let’s try it!_**

**Step 1**: In an empty repo, create an index.html file with any contents you prefer. For now, you can add

```html
<!DOCTYPE html>
<html>
   <body>
      <h1>What’s up world?</h1>
   </body>
</html>
```

**Step 2**: In your repo, click Settings. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c37pjzjihy4gfwyb4zgo.png)

**Step 3**: On the left sidebar, choose Pages.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wvng567fgi7i0xmy4wa.png)

**Step 4**:  Enable GitHub Pages by choose the branch with the code you want reflected on your site, and don't forget to press save!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnzxy8h2btonoa961am5.png)

**Step 5**: Head over to the Actions tab within your repo.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de3g3uobiw3hontg2vvc.png)

**Step 6**: Now, you should see the newly created workflow called `pages build and deployment`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfhawd9yijuwagq65qc7.png)

**Step 7**: View the log details by clicking the workflow. 

![Image of build logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyq5fc4b24lps3zw9avj.png)
  

**Step 8**: If successful, you can view your live site at: `https://{your github name}.github.io/{your repo name}/`

**Step 9**: A new pages build and deployment workflow will run with every new push to the branch hosted on GitHub Pages. Try this out by adding this new line to your index.html:

```html
<!DOCTYPE html>
<html>
   <body>
      <h1>What’s up world?</h1>
      <h2>I’m using GitHub Pages builds with GitHub Actions</h2>
   </body>
</html>
```

Your workflow should successfully run a second time and update your GitHub Pages site. If the update fails, you can check the logs to analyze and diagnose the problem!

## The Non-Jekyll Workaround 

If you want to see the logs for a site that's not built in Jekyll or HTML, you can do that with community-built workarounds. 
 
Below is an example workflow (created by the community) that builds and deploys a static React application to GitHub Pages: 

```yaml
name: React build & deploy

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v2
    
    - name: Install Node.js
      uses: actions/setup-node@v1
      with:
        node-version: 14.x
    
    - name: Install NPM packages
      run: npm ci
    
    - name: Build project
      run: npm run build
    
    - name: Run tests
      run: npm run test

    - name: Upload production-ready build files
      uses: actions/upload-artifact@v2
      with:
        name: production-files
        path: ./build
  
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    steps:
    - name: Download artifact
      uses: actions/download-artifact@v2
      with:
        name: production-files
        path: ./build

    - name: Deploy to gh-pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./build
```

I learned this genius method from Clyde D'Souza's blog post on [Deploying a React App Using GitHub Pages and GitHub Actions](https://codeburst.io/deploying-a-react-app-using-github-pages-and-github-actions-7fc14d380796).


### Reminders

Remember that GitHub Pages is looking for an index.html, index.md, or readme.md in the root of your project to render as a landing page. If you are using a framework like React, those files don't reside in the root of your project, so you need to run `npm run build` to generate static assets, including an index.html file, for your app. Read this Pluralsight [blog post](https://www.pluralsight.com/guides/fix-create-react-app-showing-readme.md) by Desmond Nyamador for detailed guidance on how to generate the needed assets. Desmond walks readers through generating an index.html and pointing GitHub pages to the correct file.

_Learn more about GitHub Pages using GitHub Actions for builds with this [announcement post](https://github.blog/changelog/2021-12-16-github-pages-using-github-actions-for-builds-and-deployments-for-public-repositories/)._

_If you liked this post, follow [me](https://dev.to/blackgirlbytes) and [GitHub](https://dev.to/github) on Dev.to for more content!_