DEV Community

Cover image for Creating Dynamic README.md File
Jack
Jack

Posted on • Updated on

Creating Dynamic README.md File

Image description

This is my Github Profile. The specific thing here is that the weather is updated every 6 hours automatically.
(I know that embedding weather in the readme does nothing; it's just for demonstration purposes in the 'Creating Dynamic README.md File')

In this article, I will walk you through how I did that!
Let's get started!

1. What is Github Actions

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. It's similar to Gitlab CI. In this project, I'm using Github Action to automatically update the weather in the README.md file.

2. Github Action Workflow triggers

Workflow triggers are events that cause a workflow to run. These events can be:

  • Events that occur in your workflow's repository such as:
    • Push
    • Pull request
    • Scheduled times
    • Manual

In this project, I'm using "Scheduled times" to trigger the Workflow "Update Weather."

3. Go template

Go templates are a powerful way to generate text, HTML, or any other output based on a predefined template structure. It's similar to templates in other frameworks like Laravel and template engines such as Pug.

(Data + Template) = Output

4. Combine them to make Readme up-to-date

  • Implement a service to collect weather data (Data).
  • Write a template that uses the above data as input.
  • Run the Go Template to combine the template and data to generate the output.
  • Commit and push the output changes.
  • Write a Github action to run the above steps at intervals.

Simply use my Github Action

Source code: huantt/weather-forecast

I've wrapped the four steps above into a Github Action. You can easily use it by following these simple steps:

Step 1: In your repository, create a file named README.md.template.

Step 2: Write anything you want within the README.md.template file.

Step 3: Embed one of the following entities within your README.md.template:

  • Today's Weather Table:
{{ template "hourly-table" $todayWeather.HourlyWeathers }}
Enter fullscreen mode Exit fullscreen mode
  • Daily Weather Table:
{{ template "daily-table" .Weathers }}
Enter fullscreen mode Exit fullscreen mode
  • Updated at:
{{ formatTime .UpdatedAt }}
Enter fullscreen mode Exit fullscreen mode

If you are familiar with Go templates, you have access to the root variable, which includes the following fields:

  • Weathers: An array of daily weather data. You can view the weather struct definition in model/weather.go.
  • UpdatedAt: This field contains the timestamp in the format of time.Date.

Step 4: Register Github Action

  • Create a file .github/workflows/update-weather.yml in your repository.
name: "Cronjob"
on:
  schedule:
    - cron: '15 * * * *'

jobs:
  update-weather:
    permissions: write-all
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Generate README
        uses: huantt/weather-forecast@v1.0.5
        with:
          city: HaNoi
          days: 7
          weather-api-key: ${{ secrets.WEATHER_API_KEY }}
          template-file: 'README.md.template'
          out-file: 'README.md'
      - name: Commit
        run: |
          if git diff --exit-code; then
            echo "No changes to commit."
            exit 0
          else
            git config user.name github-actions
            git config user.email github-actions@github.com
            git add .
            git commit -m "update"
            git push origin main
          fi
Enter fullscreen mode Exit fullscreen mode
  • Update some variables in this file:
    • city: The city for which you want to forecast the weather.
    • days: The number of forecast days.
    • template-file: The path to the above template file. Eg. template/README.md.template
    • out-file: Your README.md file name.
    • weather-api-key:
    • Register a free API key at https://www.weatherapi.com.
    • Set up secrets with the name WEATHER_API_KEY in Your repo > settings > Secrets and variables > Actions > New repository secret.

Step 5: Commit your changes, and then Github actions will run at the specified cron interval to update the weather in your README.md file.

Other Github Actions

Reference

Top comments (43)

Collapse
 
fahimfba profile image
Md. Fahim Bin Amin

Loved it! I would like to make a video about it. I hope that is okay.

Collapse
 
jacktt profile image
Jack

I have recently developed another GitHub Action for updating your dev.to articles on your GitHub profile.
dev.to/jacktt/update-your-devto-ar...

I think you can use it in your video.

Collapse
 
fahimfba profile image
Md. Fahim Bin Amin

Awesome. I guess it would be better if I create separate video for that.

Collapse
 
jacktt profile image
Jack

Absolutely, you're welcome to use it as video content. Please share your video in the comments once you've completed it. I'm looking forward to seeing it!

Collapse
 
fahimfba profile image
Md. Fahim Bin Amin

Sure!

Collapse
 
fahimfba profile image
Md. Fahim Bin Amin

The weather-forecast action was not working till now. I was trying for several hours back then. It seems now it is online. I will try to make the video within tonight.

Thread Thread
 
jacktt profile image
Jack

Could you share me your repo or action log?

Thread Thread
 
fahimfba profile image
Md. Fahim Bin Amin

Here it is: github.com/FahimFBA/test/actions
I made it private but making it public for you to check. The latest build also failed suddenly.
Image description

Image description

Thread Thread
 
jacktt profile image
Jack

I found the problem. Because nothing has changed, the commit command returns an error.

Please update the run block to:

          if git diff --exit-code; then
            echo "No changes to commit."
            exit 0
          else
            git config user.name github-actions
            git config user.email github-actions@github.com
            git add .
            git commit -m "update"
            git push origin main
          fi
Enter fullscreen mode Exit fullscreen mode

I updated the docs.

Thread Thread
 
fahimfba profile image
Md. Fahim Bin Amin

Let's see whether it works then. If it works, then I am going to create the video.

Collapse
 
tqbit profile image
tq-bit

This is pretty cool. You could even combine it with the Github API to get a breakdown on all of your used languages over your repositories or perhaps your LOC count

Collapse
 
akashdev23 profile image
Akash Dev

Thank you I'am going to try this out

Collapse
 
khaleo profile image
Leo

nice article 🌟

Collapse
 
khaleo profile image
Leo

Just a little comment, I faced this problem: level=ERROR msg="html/template:article:36:12: no such template \"article-table\"". Seem we should use huantt/article-listing@v1.1.0 instead of huantt/article-listing@v1.0.0

Collapse
 
jacktt profile image
Jack

You're right.
I will update the docs and this article.

Thank you.

Collapse
 
mitchiemt11 profile image
Mitchell Mutandah

Great post ❤️. I'm going to try it!

Collapse
 
atwellpub profile image
Hudson Atwell

Thanks for the tutorial 🙌

Collapse
 
rizmyabdulla profile image
Rizmy Abdulla 🎖️

Nice post ❤️

Collapse
 
jacktt profile image
Jack

Thank you. I hope it's useful for you.

Collapse
 
jerdog profile image
Jeremy Meiss

When using your

{{ formatTime .UpdatedAt }}

Enter fullscreen mode Exit fullscreen mode

it errors out in GitHub Actions:

level=ERROR msg="template: article:6:14: executing \"article\" at <.UpdatedAt>: invalid value; expected time.Time"
Enter fullscreen mode Exit fullscreen mode

but when I update it to the way you're using it

{{ formatTime .Time }}
Enter fullscreen mode Exit fullscreen mode

it works just fine. Probably worth updating your post

Collapse
 
jacktt profile image
Jack

Which Action are you using?

Collapse
 
jerdog profile image
Jeremy Meiss • Edited

I was using it with the Dev.to articles action

But also, thank you for these 2 posts. Great work!

Thread Thread
 
jacktt profile image
Jack

Time is variable in article action, CreatedAt is in weather

Collapse
 
salmanad01 profile image
Salman
Collapse
 
fadygrab profile image
Fady GA 😎

Didn't know that Github actions can be triggered with a cron expression! This is really a good post 👏

Collapse
 
fahimfba profile image
Md. Fahim Bin Amin

This doesn't work anymore.
Image description

I have already tried to create the video 3 times, but each time had to delete the footage for that.

Collapse
 
jacktt profile image
Jack

Look at the error message: API key has been disabled

That means you have not configured the weather api key or your api key has been disabled.
Please login to weatherapi.com to check it.

Collapse
 
fahimfba profile image
Md. Fahim Bin Amin

After trying to change and get new APIs, it seems that some of them work, but in most cases, those APIs are not working. It might be the case that some of their free APIs work great, or it might also be an issue as I needed to regenerate multiple APIs.
However, I don't think this is a good idea to create a video as the APIs are not consistent. Therefore, I am leaving the task.

However, please change the URL to weatherapi.com/ as the mentioned one doesn't work.

Collapse
 
hoangit2k2 profile image
Nguyen Hoang

I got this error "Warning: Unexpected input(s)" when running jobs
Warning: Unexpected input(s) 'city', 'days', 'weather-api-key', 'template-file', 'out-file', valid inputs are ['repository', 'ref', 'token', 'ssh-key', 'ssh-known-hosts', 'ssh-strict', 'persist-credentials', 'path', 'clean', 'sparse-checkout', 'sparse-checkout-cone-mode', 'fetch-depth', 'fetch-tags', 'show-progress', 'lfs', 'submodules', 'set-safe-directory', 'github-server-url']
Image description

Collapse
 
jacktt profile image
Jack

I visited your repository, and the error is "No matching location found." This means that your input city is invalid. I will try to help you search for your city, but it may not support your city. In this case, I may consider allowing you to input the location by latitude and longitude.

Collapse
 
hoangit2k2 profile image
Nguyen Hoang

Thanks so much, I can resolve the issue. Your function is great

Collapse
 
j471n profile image
Jatin Sharma

GitHub Dynamic Readme is really good. But TBH I don't see any point showing the weather information in my README.

Collapse
 
jacktt profile image
Jack

It's made just for a demo :))

Collapse
 
j471n profile image
Jatin Sharma

Oh, in that case it's fine. I was like why would anyone wants to see the weather info.

Collapse
 
zioalex profile image
Alessandro Surace

Very nice Jack! Thanks for sharing. I was trying to understand how do you say to build the docker Image before using it and cannot find it. Is it an implicit step?

Collapse
 
jacktt profile image
Jack

Sorry for missing it. I've updated the README.md.

docker build -t weather-forecast .
Enter fullscreen mode Exit fullscreen mode
docker run --rm \
-v ./:/app/data \
weather-forecast \
--weather-api-key='XXXX' \
--city=HaNoi \
--out-file=data/README.md \
--template-file=data/README.md.template
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ehrbhein profile image
Irvin Gil

this is so cool.