GitHub recently introduced an option to customize our profile by giving a separate magical repository. This repository name should be the same as your username, for example, https://github.com/SibeeshVenu/sibeeshvenu. This is how you can find this secret repository.

Now opens an endless opportunity that you can do to your GitHub home page, for example, I am showing the image of the titles of my recent 5 blog posts on my home page automatically. I did it using the Azure Function which will return the image and all I had to do in this repository, was to use it. Overall it was fun.

Here in this post, we will see how we can develop an Azure Function solution that returns the above-mentioned image.

Develop an Azure function

The first thing that you need to do, is to create a new Azure Function. Go to your Azure portal, and search for Azure Function, the creation process is the same and easy as we create any other Azure resources. If you are interested, you can check out my articles related to Azure Function here.

Once you create the Azure function, you are good to go and develop an Azure function application in Visual Studio. Here I am using Visual Studio 2019.

We are going to create an HttpTrigger Azure function, so make sure you select that option on the next screen. If you need a basic introduction about the HttpTrigger Azure function, you can read this post here. I named my function as GetLatestPosts, and feel free to give any name you wish. This Azure function has the preceding jobs to do.

1. Get the latest posts details from the feed of my blog
2. Create an image with the feed data
3. Send back the image as a stream

Get the latest posts details from the feed

You can usually get the feed data by going to {yoursitelink}/feed. For example, I can get my feed data by going to https://sibeeshpassion.com/feed/. So in our function, we will get this data using an XmlReader and Deserialize the same using SyndicationFeed. Please be noted that the Syndication namespace is part of the System.ServiceModel and you should install the Nuget package System.ServiceModel.Syndication. Preceding is the function to retrieve the latest 5 blog posts details.

Create an image with titles

Now we need a function to generate an image and write the blog posts title to that image dynamically. To do this, we are using the Nuget package called SixLabors.ImageSharp. Feel free to use any packages you like, the only thing that matters is that we need an image with the blog posts titles. The SixLabors.ImageSharp is indeed an amazing library, I can recommend you to give it a try. This is how your Nuget package installed window should look like now.

Now we cna write the function as preceding.

As you can see that there is a Configuration class, from where we take all the configurations. Let’ write that now. You can also use Environment variables here, I may update my repository in the coming days.

The SixLabors.ImageSharp has an inbuilt extension function called ToBase64String, which will return the image as base64 string. Did you notice that we are using another extension method here, “ApplyScalingWaterMark”? Let’s create a class for our Extension methods so that it will be handy in the future.

Azure function to return a stream

As all the supporting methods are ready, let us write our main function, the ultimate job of this function is to convert the base64 string to a stream and return the stream. As simple as that.

Once your Azure function is ready, please remember to publish the same to Azure. To publish your Azure Function app, just right click on your project and click Publish and then set up your publish target by choosing the existing Azure Function App, remember we have created one earlier? 

Develop secret GitHub readme repository

Here I am assuming that you already created your secret repository. And if yes, you can update the “readme” content as follows. Please remember this is just a sample, you can update as you wish.

Boom!. We did it. Now go to your GitHub home page, and I am sure that you will love your new beautiful, detailed home page.

Update

As GitHub has a very low timeout, sometimes the image created was not showing in my profile. Thus, I had to change the mechanism. I changed my Azure function to a time trigger function that runs every hour and the main functionality of this function now is to generate the image and upload to the Azure blob storage. Now I can directly get the blob image URL in the Readme file. No more timeout issues. Preceding is the codes of the new Azure function. You can also see this in the Dev branch of the repository.

Source Code

Please feel free to check out the repositories here.

• https://github.com/SibeeshVenu/GitHubFuncs
• https://github.com/SibeeshVenu/sibeeshvenu

About the Author

I am yet another developer who is passionate about writing and video creation. I have written close to 500 blogs on my blog. And I upload videos on my YouTube channels Njan Oru Malayali and Sibeesh Passion. Please feel free to follow me.

• GitHub
• medium
• Twitter

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think which is needed in this article? Could you find this post useful? Kindly do not forget to share your feedback.

Kindest Regards
Sibeesh Venu

Introduction

In this article, we will see how we can publish one of our GitHub repository as a GitHub page. We will be discussing the problems I have faced while doing so, with screenshots. If you are ready, let’s just go ahead and create the page.

Background

I am sure that there are many related articles available on internet, but some of them are only explaining the steps to achieve this, but not the problems faced, so I thought I could write about the problems I faced while creating a page for my GitHub repository.

Prerequisites

1. A User/Organization GitHub account
2. An Angular repository

Publish GitHub Page

Selecting the repository

In this phase, you can select any Angular repository you have in your profile. I am going to select my repository Azure-AI-Image-Text-Reader.

Creating the GitHub page

Now let’s build our repository. Please make sure to change the base href property of your index.html file. Usually the value of the base href is “/”, now we are going to change the same with the argument
–base-href in our build command.

ng build --prod --base-href "https://sibeeshvenu.com/Azure-AI-Image-Text-Reader/"

I am already using GitHub page for my user account and I have also enabled the custom domain for the same, that is the reason why I had given the custom URL in the base href. In your case, you should provide the URL as https://<username>.github.io/<repositoryName>/

Please do not remove the slash (/) at the last of the URL and also remember that the repository name is case sensitive.

Case sensitive repository URL

The above command will create a new folder if you are using angular cli 6 or the above, the folder name will be the project name specified in the angular.json file.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "azure-ai-image-text-reader": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
}

With the help of the npm package angular-cli-ghpages, we can easily upload the build contents to our repository.

npm i angular-cli-ghpages --save-dev

And then use the command below.

npx ngh --dir=dist/Azure-AI-Image-Text-Reader

If you are not sure about the difference between npm and npx, I recommend you to read my article here.

Here the –dir property is used to specify the folder where the build contents are generated. Please be noted that by default the directory name is dist, so if your angular cli version is below 6, you don’t need to specify the folder name.

If you are getting an error as preceding, while you run the ngh command, please make sure that you had installed the package

PS C:\Users\SibeeshVenu\source\repos\Azure-AI-Image-Text-Reader> npx ngh --dir='dist/azure-ai-image-text-reader' --branch=page
npx: installed 87 in 8.588s
Path must be a string. Received undefined
(node:16984) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.

Once the task is done, we can go to our repository settings and activate the GitHub page for our repository. Click on the settings and go to the section GitHub Pages.

Now you can go to the page URL and check whether you angular application is loading correctly or not. In my case, I can go to the URL
https://sibeeshvenu.github.io/Azure-AI-Image-Text-Reader/ or
https://sibeeshvenu.com/Azure-AI-Image-Text-Reader/

Conclusion

Wow!. Now we have learned, how we can publish a GitHub page of our GitHub repository. We have also covered possible small mistakes and the remedies for the same.

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think which is needed in this article? Could you find this post as useful? Kindly do not forget to share me your feedback.

Kindest Regards
Sibeesh Venu