The GitHub profile-level README feature allows more content than the bio profile, supports markdown, which means you can play more visually with the content, and the README becomes considerably more accessible as it is positioned above pinned repositories and takes up as much space above the web page fold as you want.

1. Elements in beautiful READMEs include, but are not limited to: images, screenshots, GIFs, text formatting, etc.
2. How to Create a GitHub Profile README Anyone with a GitHub account can create a README for their profile. All you have to do is create a new GitHub repository that has the same name as your username. Then, add a README file and customize it accordingly.

Hi folks 👋, Hope you are doing well.

Do you know about the latest feature that Github released few months back, that let’s you show Beautiful and Dynamic profile with just a simple README.md file. If not, then you should totally check this out, it’s Super Cooool 🔥.

In this blog, we are going to create a profile readme that will look something like this in the end,

Interesting right, let’s get started then.

Prerequisite

None 😉

Steps

1. Create a repository with same name as your github username. Check add README file option. I am getting error because I already have the repository, you will not see below error.

2. You can either clone this repo and change it locally or you can edit it in github itself. I’ll be editing it in Github just to reduce unnecessary steps.

3. Click on edit button for README.md file and paste below content for starters,

4. Feel free to add/edit/remove the Headings and change content in place ❔❔❔❔.

5. Now let’s go over it one by one. In first section, we just have simple greeting and a fancy looking badge to showcase your website. To understand how I created this badge, checkout this page.

6. In second section, we are talking about myself in some nice bullet points. Again very easy, Create your own or just replace ❔❔❔❔ with your data.

7. Soon after that, at the end of that second section we have a nice Github stats card. This is a coming from a great guy Anurag Hazra’s very popular project github-readme-stats. Checkout this repository there your will find out how to create such beautiful cards which shows your Github Stats.

8. To be specific, I am using this in for my stats, feel free to try more. Mine looks like this.

9. In next section, we are showing bunch of icons that point to our social media profiles. Pretty damn easy just have a look at readme file.

10. Next section is kinda optional, feel free to skip it if you don’t write blogs. This is pretty interesting as we are going to dynamically fetch blog data from our blogging site and populate section of README.md using Github Action.

11. This is coming from yet another great guy Gautam krishna R’s project blog-post-workflow. He has created an Github action that does this magic ⭐. Let’s see how it’s done.

12. Start by adding adding place holder like we have in our README.md file.

13. In your repository create a new workflow, by going into Actions Tab your repository. Save and commit README.md before if necessary. After creating workflow your actions tab should look like this,

14. Rename this workflow and paste below content. For more info checkout this section,

15. Change the feed_list value to your feed and start the workflow manually from Actions tab shown in above image. You don’t need change a single apart from that. For more options visit this section.

16. Last section simply contains the variables that are being used all over the places.

Github Readme Css

17. Now commit the changes and go to your profile.

Voila!! we have just created a beautiful profile readme 😉🥳🥳🥳.

If you need some reference for this README.md file checkout my repo. You can also checkout some quite awesome README files here for more inspiration 😉.

Hope you liked this blog, feel free to share it if you do.

For more such content click here.

Citrix receiver 19.11. Take care, and keep learning 😎✌

Introduction

This little guide demonstrate how to turn any Github repository with a bunch of Markdown files into a simple website using Github Pages and Jekyll.

• You don’t need to use the command line or anything other than your browser.
• It doesn’t require any knowledge in Jekyll.
• It’s completely compatible with any bunch of markdown files you already have in any existing repository without any modification to those files. That includes the basic README.md almost all repositories contain.
• The markdown files will remain just as readable and usable in Github than in your website.

In fact this guide uses the same configuration and can be read both in Github and in Github Pages, at your preference:

Step by step instructions

Determine the repository where you want to activate Github Pages

You can of course create a new repository if you want.

Create the _config.yml file

That file should be created on the root of your repository. Here is some content to copy-paste in it:

It’s basically just a few tuning of Github Pages’ default configuration to have a better handling of Markdown files.

Activate Github Pages in your repository configuration

On the Github page of your project go into Settings > Options > Github Pages:

In the Source option, select master branch then Save:

You must also choose a theme:

That’s it! Now you can juste use the link provided by Github to access you website:

Usage guide

• Any markdown file in your repository will display in your Github Pages website. You just have to use the same path to access it and replace the .md extension by .html.
• To make links between your Markdown files just use a relative path to the other Markdown file. The configuration you copy pasted in your _config.yml provides a plugin to convert those URLs. So your Markdown files will have correct links both in Github and Github Pages.
• The index page of your website can be a index.md file or a README.md file. If both exists the index.md file has priority.
• You should be able to use any Github Flavored Markdown.

Known differences between Github and Github Pages

• No automatic links with Github Pages. The Github Markdown renderer can automatically detect a simple copy-pasted link and make it a clickable link. Github Pages doesn’t propose a feature to reproduce that behavior, so you’ll have to braces your links with the []() syntax.

Recipes

Github Add Readme

Since the purpose of this guide is to demonstrate how to publish multiple Markdown files as a website but I don’t have much more to say I will propose you some delicious recipes instead:

Readme File Github

Other Github Pages related projects

I’m a fan of Github Pages for the possibilities it offers to anyone to publish a website for free. I have multiple projects that could be of interest if that’s your case too:

Example Github Readme

Contributing

See the Contribution Guide.

Git Readme Template

License

See the License File.