How to Submit Your First Article Using GitHub Desktop and VS Code

July 6, 2020

One of the most fundamental parts of contributing to open-source projects is working as a group and handling a large number of files across every development stage. This article will walk you through how to submit your first article in Section’s Engineering Education (EngEd) Program using GitHub Desktop and VS Code.

I’ve always been a believer of learning things by actually doing them. The more I make mistakes, the more I get to learn. The idea of this blog post originated after I faced several difficulties in submitting my first article.

This guide includes step-by-step instructions, so that you have a comfortable experience in beginning your open source contribution journey. Without further ado, let’s get started by answering all the why(s), what(s) & how(s)!

Note: You can also find official instructions in the Engineering Education GitHub repository.

A Complete Roadmap

Step 1: So, I have my article ready. What should I do now to submit it?

Apart from all of the traditional ways of doing things, we’re always seeking simpler and more efficient methods to do the same work with increased productivity. Technology aiding another technology has been one of the important features of the modern era. On similar lines, we’ll be using following tools to ease the process:

Assuming, you have a working GitHub Account (which is required for contributing in the Engineering Education Program) and your article content is in markdown (.md) format, you are ready to upload your first article.

Step 2: Forking the Section Repository

After setting up the workspace successfully, open the Engineering Education GitHub repository on your web browser. You’ll be seeing a master GitHub repo with a few boiler files. Click the Fork option in the upper right-hand corner (below your user account display).

Fork Image
Once you’ve clicked that option, a pop-up will appear. You need to give permission to fork the repository contents in your GitHub account (See image for reference).

Fork Image 2
If the forking process went well without an error, you’ll be able to see your GitHub username in the upper left-hand corner. Now, if you have previously forked the same repository for your article, you can start from there as well.

Fork Image 3

Step 3: Cloning the forked repository

Now, you will be able to see a green Clone button. This will allow you to clone your repository to your local machine. After clicking “Clone”, select Open in Desktop. This will automatically direct you to the GitHub Desktop window.

Clone Image
Create a new branch, using a suitable name based on your article’s subject matter. On the GitHub Desktop window, choose “Open in Visual Studio Code”. This will take you to the VS Code window where you will be able to add, edit, and save your work.

Publish PR Image
In VS Code, you’ll see an organized directory structure on the left side. You’ll need to create a new folder and add your files in it, including your index.md file, along with any image files that you may reference in your article.

VS Code Image

Step 4: I am all done with my work. How do I create a Pull Request (PR)?

Go to your GitHub Desktop. You will see all the changes you have done in your branch. Write suitable details like what you’ve done in the “Summary” section (with an optional description).

Then, click “Commit” in the bottom left-hand corner. Next, click “Push Origin” option to push your work into GitHub repository.

Commit PR Image
Once you’re done with editing and updating your files, now you’re all set to create a Pull Request. In order to do so, click Create Pull Request.

Create PR Desktop Image

Step 5: Verification & Final Submit

After clicking the Create Pull Request button, you’ll be automatically directed to the GitHub repo page where you can first verify that all of the details are correct, or make edits if needed. Finally, click Create Pull Request … and Voila! You’re done!

Create PR GitHub Image

Mission Completed!

You have successfully submitted your article with your own unique PR number! Now, you need to wait for review and final approval by the Section team. Meanwhile, do checkout all of the other interesting articles from contributors on Section’s Engineering Education Library.

Done Image


About the author

Aman Saxena

Aman Saxena is pursuing a degree in Computer Science. He has a keen interest in Competitive Programming & Web Development. He is fond of playing Cricket & solving Big-O complexities. When he’s not glued to a computer screen, he is likely exploring the mighty Universe. For any query or a fruitful discussion, you may connect with him on LinkedIn.

This article was contributed by a student member of Section's Engineering Education Program. Please report any errors or innaccuracies to enged@section.io.