How to Automatically Update Resume On Your Personal Site From OverLeaf

I don't know about you, but I struggle with keeping track of the hundreds of iterations of my resume and keeping my website updated with the most recent one. So I thought to automate it.

This post explains how to automatically update your resume from OverLeaf onto your personal website. This post is specific to paid users of OverLeaf since it is a paid feature to push from OverLeaf to GitHub

1. Open the drop-down where it says menu on the top left-hand side of your project. It will produce a drop-down, as shown in the picture below. Click sync to GitHub.

1. Enter a repository name and a brief descriptions to and create the repository.

1. Go to GitHub to see a new repository where only your latex file from OverLeaf should exist. In this repo, go to the Actions tab at the top, as shown in the picture below

1. Create a new workflow, and then enter the code below. This code will create the PDF version of the latex file with every push into this repository. Each push will create a new release of your resume's latest iteration, and it will be an artifact attached to this. You may encounter an error based off the permission of the GitHub Action but this issue is explained well in this post.

name: Build LaTeX document
on: [push]
jobs:
  build_latex:
    runs-on: ubuntu-latest
    steps:
      - name: Set up Git repository
        uses: actions/checkout@v2
      - name: Compile LaTeX document
        uses: xu-cheng/latex-action@v2
        with:
          root_file: main.tex
      - name: Uploading artifact
        uses: actions/upload-artifact@v2
        with:
          name: PDF
          path: main.pdf
      - name: Get Time
        id: time
        uses: nanzm/get-time-action@v1.1
        with:
          timeZone: -5
          format: 'YYYY-MM-DD-HH-mm-ss'
      - name: Create Release
        id: create_release
        uses: softprops/action-gh-release@v1
        with:
          name: Resume compiled on ${{ steps.time.outputs.time }}
          tag_name: ${{ steps.time.outputs.time }}
      - name: Upload Release Asset
        id: upload-release-asset
        uses: actions/upload-release-asset@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          upload_url: ${{ steps.create_release.outputs.upload_url }}
          asset_path: ./main.pdf
          asset_name:  resume-${{ steps.time.outputs.time }}.pdf
          asset_content_type: application/pdf

1. Navigate to your program, where your download resume link exists. We will use GitHub's Graphql API to retrieve the download URL for the PDF version of your resume. Space Jelly explains the following code very well. This was placed at the top of Navbar React component of my personal project.

const [downloadableResume, setDownloadableResume] = useState();

  const baseUrl = "https://api.github.com/graphql";

  const httpLink = createHttpLink({
    uri: baseUrl,
  });

  const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        authorization: `Bearer $${process.env.GITHUB_ACCESS_TOKEN}`,
      },
    };
  });

  const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  });

  useEffect(() => {
    client.query({
        query: gql`
        {
          viewer {
            login
          }
          repository(name: "resume", owner: "dessygil") {
            id
            releases(first: 1) {
              edges {
                node {
                  id
                  releaseAssets(first: 1) {
                    edges {
                      node {
                        downloadUrl
                      }
                    }
                  }
                }
              }
            }
          }
        }
        `,
      })
      .then((response) => {
        setDownloadableResume(response.data.repository.releases.edges[0].node.releaseAssets.edges[0].node.downloadUrl);
      });
  }, []);

This should be all you need to build a fully automated pipeline for your personal website. If there is anything else that you would like to see added to this post, please don't hesitate to reach out.