Skip to main content

Command Palette

Search for a command to run...

Start Using GitHub to Publish Articles on Hashnode

Updated
5 min read
Start Using GitHub to Publish Articles on Hashnode
G

I am a full stack developer at Hashnode. Currently I work on MERN stack, NextJs. Try to build some side projects.

Did you know that Hashnode has had a feature called "GitHub as Source" for some time now? It was available only to individual publications (personal blogs) and under a feature flag. Recently, we did a major revamp of the feature and are now supporting team publications as well. Excited to share that we shipped some significant improvements too!

Although, only a few of our users had requested sourcing posts from GitHub, the motivation behind this feature was to introduce and try out sourcing from GitHub. And maybe even extend it to a few other areas via our public API (a newer and better version will soon be launched)! Very shortly, you will be able to do all the things that our platform's editor has to offer via GitHub as a source feature.

In this article, we will explore the feature and learn more on how to publish articles from GitHub. 🙌

Dashboard details

Before starting, we have set up a template repository containing an example markdown file to make things easier. You can clone it and use the cloned repo as your source in the later steps. Link to template repository.

Installation

Head over to your publication dashboard's Integrations tab. If you scroll down, you should see the "Publish articles from GitHub" section.

Hashnode Integrations dashboard

Click on the "Connect Hashnode App on GitHub" button. It will take you to our app page on GitHub. Click on the install button to proceed.

frameshift-19_05_2022 (12).png

Now, select the organization and ensure you have proper permission to do this. You should either be the organization's owner or have an admin role for the repository you want to select.

Select repository on Github

Once you select the appropriate organization, you will be asked to choose the repository to install this app on.

Install and authorize Hashnode

With the above step, you have two options. You can either authorize the Hashnode app for multiple repositories or select only the specific repository you want to install. Usually, people prefer the latter.

Install and authorize Hashnode

Don't worry if you accidentally selected "All repositories" and clicked on the "Install & Authorize button." We will let you choose one in later stages.

Once you click the "Install & Authorize" button on GitHub, you will be taken back to Hashnode. Depending on the number of repositories you selected in the previous step, you will be shown a list of selected repositories or the name of the repository you selected along with the publication on which this will be installed.

Interim confirmation page on Hashnode (If you have selected multiple repositories, you will see a dropdown with the list of those chosen repositories.)

If everything looks well and good, you can proceed, and if the installation is successful, you will see a green toast at the right bottom corner.

Installation confirmation

Publishing articles

Now that the installation is complete, you should see an updated "Publish articles from GitHub" section.

Post installation options on Hashnode

With links to instructions on How it works (1), logs (2) (you will know more about it in the later section of the article), and a helper template repository (3) to get you started quickly.

Suppose you skipped cloning the template repository at the beginning of this article and used your repo instead. You can click "Start by cloning our template repository" and check out some detailed instructions in the repo's README.

You can also use the example-post.md file and duplicate it in your repo (which you authorized in Hashnode's app).

You can use GitHub's dashboard to create and commit a new file or use your usual local flow and push it to the repo. For this article's sake, I will use GitHub's dashboard to create and commit an article.

Creating a post via GitHub

While using the example-post template, make sure:

  • You have the file name ending with the proper .md format. We only support markdown files
  • You have the appropriate domain (your publication URL, both subdomain on hashnode.dev and custom domain will work)
  • Appropriate comma-separated tag slugs. You can find the full list of tags here

For detailed instructions, check out the README file of the template repository or the GitHub as source logs in your publication dashboard.

As soon as you commit a new file and if all the front matter of the markdown file is OK, your article will be published on your blog.

Published post on blog

You should also see a new log like the one below in your logs section of the publication dashboard.

GitHub as source logs in Hashnode dashboard

There are different types of logs for errors, missing fields, etc.

GitHub as source logs in Hashnode dashboard

Now, if you go to the articles section of your dashboard, you will see that the articles you created using GitHub are tagged as "Sourced from GitHub."

Articles section on Hashnode

Important note

One thing you will have to be aware of is that the articles that are created using "GitHub as Source" are not editable on the platform. You will have to update it using GitHub itself.

You can even use the "publishAs" attribute in your markdown front matter if you are on a team publication. Make sure the "publishAs" is the username which is already a member of the publication, otherwise you will not be allowed to publish.

There is a growing list of parameters that we are supporting in the markdown front matter. For the updated list, you can watch our support website or the Template repository.

Debugging

At any given point, if you are stuck in between, check out the logs. If you don't see any log, ensure the file name is proper and has a .md extension. Check if the blog domain is correct. If nothing works out, then go through the instructions list in the logs section.

You can always reach out to us via the intercom chat widget at the right bottom corner of every page of hashnode.com (you should be logged in to access it).


Thanks for reading! Please leave any comments or feedback below - this really helps us improve! 👇‍

Comments (11)

Join the discussion
S
Sreerag M2y ago

This is now paid

1
S
Sreerag M2y ago

This is now paid

1
A

Hi Girish

I tried this it's cool. But, I am not able to use an image that is already uploaded on Cloudinary.

C

Thanks for writing this post! I plan on trying this out! 😄

C

aaaamazzziiingggg

Y

how add to the suuport table of content via GitHub ?

G

Hello, It’s currently not supported. It’s in our pipeline.

1
Y

Girish Patil thanks sir, there is a possibility that it will be updated later?

Z

I'm more intrigued to learn how Hashnode monetizes the blogging platform to earn not only enough revenue to host without GH and serve the content, but also enough to be hiring for numerous roles?

I don't see paid options let alone any enterprise packages for the platform, paid advertising/advertisements, partnering opportunities or other capabilities to enable business development.

S

Hi Girish,

I just published my first article on Hashnode with GitHub integration and it is quite helpful. I am proficient with Markdown and RestructuredText but have always struggled with sites like medium for tech writing.

There were a couple of issues I could not figure out while publishing through GitHub.

How to add images?

  • It is not clear if the cover photo URL has to come from a public source. I ended up making my hashnode-articles repository public and then using the full URL of the image I placed in the repository in the cover metadata field. Is it not possible to use a relative path within the GITHUB repo for cover image?
  • How to add images within the Markdown article? My attempt was to use the standard Markdown syntax
    ![caption](./image-path.png)
    
    This was displaying fine in the Markdown preview on GitHub but didn't work in the published article. Do I need to provide full URL for every image that I wish to include in the article?
G

Thanks for trying it out, and I hope it helps. The image needs to be uploaded to https://hashnode.com/uploader and use that URL in the markdown or even for post cover image (this is mentioned in the instructions and also in the template repository https://github.com/Hashnode/Hashnode-source-from-github-template) I think it needs to be highlighted more, thanks for pointing it out.

1
S

Girish Patil Thanks. Yes, this serves my purpose. Yes, I somehow missed it while reading the README from the template repo.

1
B

Hi Girish Patil I tried it but my images dont display as well..

I tried using the https://hashnode.com/uploader but still doesn't work.

Here is the Github file: https://github.com/Bennykillua/Hashnode/blob/main/first-post.md

Here is the post: https://benny.hashnode.dev/share-your-cookies

C

Nice

2
M

Cool feature.♥️

3

More from this blog

T

Town Hall - The official Hashnode blog

208 posts

Welcome to the official Hashnode blog. Find our product updates, announcements, interviews, and more here. Get started with Hashnode now.