{
"$type": "site.standard.document",
"canonicalUrl": "https://rednafi.com/javascript/periodic-readme-updates-with-gh-actions/",
"description": "Automate your GitHub profile README with periodic updates using Actions. Parse RSS feeds and dynamically display latest blog posts with NodeJS.",
"path": "/javascript/periodic-readme-updates-with-gh-actions/",
"publishedAt": "2023-05-04T00:00:00.000Z",
"site": "at://did:plc:fgtm2c26vfcj74rfmeggbyqj/site.standard.publication/3mnl6f7ob462z",
"tags": [
"JavaScript",
"GitHub",
"DevOps"
],
"textContent": "I recently gave my [personal blog] a fresh new look and decided it was time to spruce up my\n[GitHub profile]'s landing page as well. GitHub has a [special way of treating the README.md\nfile] of your <your-username> repo, displaying its content as the landing page for your\nprofile. My goal was to showcase a brief introduction about myself and my work, along with a\nlist of the five most recent articles on my blog. Additionally, I wanted to ensure that the\narticle list stayed up to date.\n\nThere are plenty of fancy GitHub Action workflows like the [blog-post-workflow] that allow\nyou to add your site's URL to the CI file and it'll periodically fetch the most recent\ncontent from the source and update the readme file. However, I wanted to make a simpler\nversion of it from scratch which can be extended for periodically updating any Markdown file\nin any repo, just not the profile readme. So, here's the plan:\n\n- A custom GitHub Action workflow will periodically run a nodejs script.\n- The script will then:\n - Grab the [XML index] of this blog that you're reading.\n - Parse the XML content and extract the URLs and publication dates of 5 most recent\n articles.\n - Update the associated Markdown table with the extracted content on the profile's\n README.md file.\n- Finally, the workflow will commit the changes and push them to the profile repo. You can\n see the final outcome in the [profile repository].\n\nHere's the script that performs the above steps:\n\nThe snippet above utilizes node-fetch to make HTTP calls,xml2js for XML parsing, and the\nbuilt-in fs module's promises for handling file system operations.\n\nNext, it defines an async function getRssData responsible for fetching the XML data from\nthe [https://rednafi.com/index.xml] URL. It extracts the blog URLs and publication dates,\nand returns the parsed data as a list of objects. Another async function, writeOutputFile,\nwrites the parsed XML content as a Markdown table and saves it to the README.md file.\n\nThe script is executed by the following GitHub Action workflow every day at 0:00 UTC. Before\nthe CI runs, make sure you create a new [Action Secret] that houses a [personal access\ntoken] with write access to the repo where the CI runs.\n\nIn the first four steps, the workflow checks out the codebase, sets up nodejs, installs the\ndependencies, and then runs prettier on the scripts. Next, it executes the\nimportBlogs.js script. The script updates the README and the subsequent shell commands\ncommit the changes to the repo. The following line ensures that we're only trying to commit\nwhen there's a change in the tracked files.\n\nThen in the last step, we use an off-the-shelf workflow to push our changes to the repo.\nCheck out the [workflow directory] of my profile's repo to see the whole setup in action.\nI'm quite satisfied with the final output:\n\n![GitHub profile README showing auto-updated table of latest blog posts][image_1]\n\n\n\n\n[personal blog]:\n https://rednafi.com/\n\n[github profile]:\n https://github.com/rednafi/\n\n[special way of treating the README.md file]:\n https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme\n\n[blog-post-workflow]:\n https://github.com/gautamkrishnar/blog-post-workflow\n\n[xml index]:\n https://rednafi.com/index.xml\n\n[profile repository]:\n https://github.com/rednafi/rednafi\n\n[action secret]:\n https://docs.github.com/en/rest/actions/secrets?apiVersion=2022-11-28\n\n[personal access token]:\n https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token\n\n[workflow directory]:\n https://github.com/rednafi/rednafi/tree/master/.github/workflows\n\n[image_1]:\n https://blob.rednafi.com/static/images/periodic_readme_updates_with_gh_actions/img_1.png",
"title": "Periodic readme updates with GitHub Actions"
}