Welcome to part 2 of this article series where I show you how to create a killer GitHub profile!
If you haven't read part 1, click here and follow along before reading this article.
In the previous article, I documented my process for building out my README.template.md file.
I added sections for an intro, latest blog posts, pinned repositories, GitHub stats, skills and a skeleton section for an Office quote.
In this second article and final issue in this series, I will add the dynamic content injection and will get you familiar with GitHub Action workflows!
Prepping for the Magic
Now that the README.template.md file is complete, I started working on the fun part โ the dynamic injection.
There are two main portions of the file that need dynamic content injection โ the blog section and The Office quote section.
Listing recent blog articles is the easy part โ that functionality was built for me (see the linked tutorial in the previous article) and I just needed to hook up the workflow.
The Office quote, however, required a little more effort because I needed to create the functionality myself. For something simple like making an API request, I decided to create a simple node script to handle the operation.
At the root of my repository, I created a new file called index.js.
The index.js File
There are four steps this file needs to complete:
- Create a variable to reference the README.template.md file
- Make the request to The Office API
- Look through the README.template.md content and replace the static patterns ({office_quote} & {office_character}) with the dynamic result of the API request
- Create/replace the contents of the README.md file with the updated README.template.md reference variable.
Thinking about these responsibilities, I imported the required dependencies in the index.js file.
To complete step one, I declared an async function called main , grabbed a reference to the template file and placed it in variable named readmeTemplate.
The next step is to make the API request. Below the readmeTemplate variable, I created a request to The Office API and assigned the result to a variable called office_quote.
The third step is to replace the patterns in the template file with the dynamic content retrieved from The Office API.
Finally, I create/replace the contents of the README.md file with the readmeTemplate variable.
At this point I could run node . at the root of my repository and the index.js file worked its magic. Opening the README.md file, I saw the dynamic quote at the bottom of the file.
If you want to reference my full index.js file, click HERE.
Creating the Workflow
The index.js file, by itself, isn't very helpful because I need to run the file every time I want the quote to update. How do I have the file run automatically? GitHub Actions.
Setting up a GitHub Action workflow is easy if I have the correct file-structure; I donโt need to do anything on GitHubโs website to get it working.
I created the following directories and file at the root of my repository:
Next, I opened the dynamic-injection-workflow.yml file, named the workflow and added some instruction on when the workflow should run. I scheduled a cron job to run this workflow every hour so new blog posts are fetched frequently and visitors get a new Office quote with regular cadence.
Now that I have basic structure in the workflow, I need to define jobs for the workflow to run.
The order of these jobs matter (more on that in a second), so I created the first job to get an Office quote.
Notice that the job runs node . at the root of the project, causing the index.js file to execute, fetch the quote, and take everything in the README.template.md file and copy it over to the README.md file. This, in and of itself, isn't enough for the updated information to show up on my profile. I need to commit and push the changes to my repository, which is why I added he Add to git repo step.
Now that the README.md file contains an Office quote and everything else in the README.template.md file, I can run the final job to fetch my updated blog posts (Remember, the README.md file now contains the static blog post pattern we created in the previous article).
Because of the way that Gautam Krishna R's GitHub action works, this job must run after I inject an Office quote โ if it doesn't, it will write over the content in the README.md file and delete the quote. Thankfully, GitHub Actions has a needs property that I added to the workflow so that it only activates after the get-office-quotes workflow has completed its steps.
The dynamic-injection-workflow.yml file is now complete. I committed my changes and pushed them to my GitHub profile repository.
GitHub recognized that I added a workflow and I can see it listed under Actions > All workflows.
To manually run the workflow and to test to see if it was working, I clicked on the 'Run workflow' dropdown button and then had the workflow run on the main branch. (Remember, the cron job will run this automatically every hour.)
After the workflow successfully completed both jobs, I went back to my profile to see the final result!
Conclusion
There we go! You should now have all of the tools required to make a killer GitHub profile README!
Don't forget that your profile on GitHub is like your portfolio -- use it as a platform to highlight what makes you unique as a developer!
When you've finished created your own GitHub profile README, send me a link in the comments below! I'd love to check it out!
Thanks for reading!