How To Publish a Blog Post Using VSCode + GitHub & Hashnode
2 min read
Publishing your blog articles via GitHub is amazing 😄
As a developer it will catch every developers attention that they can post to there blog directly with
You can now use your favourite IDE such as VSCode to directly make a blog post! Isn't it cool?
Steps to post articles via GitHub on Hashnode
1. Hashnode account:
If you don't have Hashnode account create one (affiliate link)
2. Create an empty repository on GitHub
Create a repo on GitHub that we will be used to save all you new posts like a normal GitHub repo
3. Connect Hashnode with Your GitHub
You need to goto you Blog Setting on hashnode and to inegrations
Blog Home -> Blog Dashboard -> Integrations -> Connect To GitHub
4. Allow Hashnode App on GitHub
You need to authorize HashNode App on GitHub and under repository select Newly Created Repository and click on Install
Now you have successfully intalled a.k.a connected to GitHub and 1 step behind publishing via VSCode
5. Clone your repo
git clone https://github.com/example/your-repo.git
Open your repo in VSCode or any other IDE you like and create new .md file (example.md, name of the file doesn't matter)
You need to keep this thing in mind that with every post you have to create a new .md file containing exactly below details a as metadata that will help hashnode to get title, imgae, tags etc. (You git the idea)😊
---title: GitHub Test slug: github-test tags: Test, GitHub cover: https://cdn.isalman.dev/photos/1.jpeg domain: blog.isalman.dev ---
Note: I have used my domain name on which I have hosted hashnode, you can replace it by your own
Now all you have to do is commit and push to your repo and hashnode will automatically post to your hashnode blog.
Also if you have to edit your post you can't do it from hashnode, you have to edit from you GitHub repo (That looks weird but it makes sense, bcuz both of them will store same version of your post!)
Since you have to use markdown syntax you can use few extensions on VSCode to WYSIWYG editor to speed up 🚀 publishing time and have a visual experience
Name: Markdown Editor Id: zaaack.markdown-editor Description: A full-featured WYSIWYG editor for markdown. Version: 0.1.10 Publisher: zaaack VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor
or if you don't want any extensions VSCode has a built-in .md previewer, all you have to do is press
ctrl+shift+v from any .md file.
Thanks, See you in next blog post, (PS: I have published this blog post from VSCode 😊)
Did you find this article valuable?
Support Salman Qureshi by becoming a sponsor. Any amount is appreciated!