Save your articles and reading list from DEV to GitHub - DevtoGitHub
Tags: github, tutorial, githubactions, programming
Published: 2024-02-27 14:22:50

Can you save your articles or reading list from DEV?

Most of you would say NO.
There was no way, but I've done it.
I've created a solution where you can do it in under 5 minutes.
Yep, under 5 minutes.

The best part?

- It will automatically save every day.
- It will be on GitHub so your data is secured and in your hands.
- No need to log in to any software. One less hassle!
- Bunch of useful options (we will talk about that).

Most important -> It's FREE & Open Source.

I'm ultra excited. Read till the end.

&nbsp;

---

## Table of Contents

This is a long post, so these are the topics we are going to cover.

1. Why did I create this in the first place?
2. Why it's better than a normal solution?
3. Why GitHub Actions workflow?
4. Visual samples of what the workflow does.
5. What's in the documentation?
6. What do you need?
7. The options you get with the workflow. A basic idea.

---

## 1. Why did I create this in the first place?

I was looking for a way to save my posts from DEV, but there isn't. Hashnode does provide it, but it's just a formality. Their structure is very general, and they don't provide many options. 

So, I thought I should build it myself for DEV.

I've done the initial version, and it feels good. Now, I will take the feedback and improve it further.

Special thanks to Michael Sir (@michaeltharrington) & Thomas Sir (@thomasbnt) for giving an initial thumbs up to the idea in the discord community :D

---

## 2. Why it's better than a normal solution?

1. This solution will save each article in a different markdown file.

2. The best part is that you can create a table of contents in the readme to view and visit each of your articles in the saved repository. Easy navigation!

3. You can also display the total read time for each article in the reading list.

4. I've also included a concept of prioritizing tags while saving your reading list (section 7).

---

## 3. Why GitHub Actions workflow?

You can create web software, but then managing it can become a hassle. This workflow runs daily, making it a one-time effort.

Whenever the workflow is improved, you won't even have to update it. It happens automatically—voila!

What more do you need?

---

## 4. Visual samples of what the workflow does.

Let's skip everything and see what you can do.

I'm using images for examples so it's easy for you to understand.

This is how each of your posts will look like.

![markdown file of each article](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1y1nc8uqkmqarro9j6r5.png)

The structure of each article markdown file would be as follows:

- Cover Banner Image
- Article Title
- Tags of the Article
- Published Date
- URL of the Article
- Content of the Article

![article saved structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df0261fmsx3jyr8t2pyw.png)

The table of contents for your article will be as shown below. You can easily navigate to your article in the repository by clicking the provided link. 
This is for easier navigation when you have a very long list of posts.

![table of contents](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvw1s7tzlkqael3hztg9.png)

You can save your reading list like this.

![reading list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ztddpjby23wi7xd27f4.png)

You can even add read time for each article in the reading list.

![reading time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l59ly8d4y0yxjp2micbo.png)

---

## 5. What's in the documentation?

I've made it with proper consideration so that everyone irrespective of whether they know things or not, can follow along.

- [🚀 Getting Started](https://github.com/Anmol-Baranwal/DevtoGitHub?tab=readme-ov-file#-getting-started): A guide to help you set up and use DevtoGitHub.
- [List of examples with workflow code](https://github.com/Anmol-Baranwal/DevtoGitHub/blob/main/Examples.md): Examples demonstrating various use cases.
- [Contributing guidelines](https://github.com/Anmol-Baranwal/DevtoGitHub/blob/main/Contributing.md): Instructions for contributing to DevtoGitHub.
- [Use cases of the solution](https://github.com/Anmol-Baranwal/DevtoGitHub?tab=readme-ov-file#use-cases): use cases showcasing how DevtoGitHub can be used.
- [Input options of the workflow](https://github.com/Anmol-Baranwal/DevtoGitHub?tab=readme-ov-file#inputs): Details about each input option to use in the workflow.

I've even given samples of cron schedules. 
Trust me! The documentation is good.

---

## 6. What do you need?

Nothing at all! 

You can start with this [step-by-step guide](https://github.com/Anmol-Baranwal/DevtoGitHub/blob/main/GetStarted.md) that I've created.

In short, you need to do these steps only once.

- Generating an API token from DEV.
- Create a GitHub Account.
- Create a GitHub repository.
- Giving permissions to workflow to write in the repository.
- Creating a Secret using the API token from DEV.

Don't worry if the terms are scary. I've provided proper visual samples and detailed instructions so it will be easy and quick.

After this, you can create a workflow file, and done!

The documentation is linked, so it is easy for you to follow along. You can [use this](https://github.com/Anmol-Baranwal/DevtoGitHub?tab=readme-ov-file#-getting-started) to see the steps.

---

## 7. The options you get with the workflow - basic idea.

Here comes the technical part of the solution that you should understand. I will cover all the options that you can use.

I've already prepared detailed documentation with examples, which you can find [here](https://github.com/Anmol-Baranwal/DevtoGitHub/blob/main/Examples.md) for a deeper understanding. It covers the syntax along with default values.

I could have just covered this section, but not everyone on DEV is a programmer, so it's better to keep it for everyone regardless of their programming background.

The workflow will look like this more or less.

```yml
name: DevtoGitHub

on:
  schedule:
    - cron: "0 0 * * *" # Run daily, adjust as needed
  # The lines below will allow you to manually run the workflow with each commit
  workflow_dispatch:
  push:
    branches: ["main"]

jobs:
  save-articles:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Run DevtoGitHub
        uses: Anmol-Baranwal/DevtoGitHub@v1
        with:
          devApiKey: ${{ secrets.DEV_TOKEN }}
          saveArticles: true # default
          outputDir: "articles" # this will save the articles in "articles" directory
          saveArticlesReadme: true # this will create a table of content for easy navigation
```

Let's see the options.

> `devApiKey`

The API key from your DEV.

> `saveArticles`

Save your articles as markdown files, with each file named after the article's title.

> `outputDir`

The directory to save your articles. The default will save it under the articles directory.

> `saveArticlesReadme`

To create a table of contents for your articles in readme (same directory)

> `readingList`

To create a reading list from DEV

> `readTime`

This will add reading time to the articles in the reading list.

> `outputDirReading`

Define the output directory for the reading list (Readme.md).

> `excludeTags` & `mustIncludeTags`

I was exploring a bit.
And I didn't want any discussion posts (`#discuss`) unless they were related to programming (`#programming`). This is what you can do with this.

As you're aware, there are four tags (max) for every article on DEV.

Suppose you want to remove some articles with the tag `#discuss` but want to include the post if that article with the `#discuss` tag also has a `#programming` tag. So, you can include `#discuss` in `exlcudeTags` & `#programming` in `mustIncludeTags`.
In case you feel confused. Let's understand it with an example.

Suppose we have an article with tags: `['react', 'javascript', 'frontend', 'tutorial']`.

- If `excludeTags` is 'frontend' and `mustIncludeTags` is 'javascript'. The article is included because it has the `javascript` tag (even though it also has the `frontend` tag).
- If `excludeTags` is 'tutorial' and `mustIncludeTags` is empty (default), the article will be excluded because it has the `tutorial` tag.
- If `excludeTags` is 'backend' and `mustIncludeTags` is 'typescript'. The article is included because it does not have the `backend` tag.
- These cases will work for multiple tags, and `mustIncludeTags` will only work if `excludeTags` is provided.

&nbsp;

Below these are already configured and you don't need these in case you're not favorable to Git & GitHub.

> `conventionalCommits`

There are conventions for commit messages that make commits self-explanatory regarding their type. If conventionalCommits is set to true (default) then those conventions will be used.

> `branch`

Branches will allow you to do those above processes in a contained area of your repository. You can change it using `branch` whose default value is `main`.

> `synchronizeReadingList`

When set to `true` (default is `false`), it will remove any articles from the reading list in the readme if they are removed from DEV, to synchronize it.

---

## No Drawbacks

> I've solved these with `v1.1.0`.

- Implemented custom logic to fetch all articles for saving in markdown files and articles in the reading list.
- Articles will now be automatically updated in their respective markdown files when updated on DEV.
- Add the `synchronizeReadingList` option. When set to `true`, it will remove any articles from the reading list in the readme if they are removed from DEV, to synchronize it.

I've introduced a starting release so that people can use it.
Plus, I promised to post it on Wednesday :D

I can't break the promise. LOL!

![premier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngd8l8r57i2a9ntsxkyc.png)

---

I would appreciate it if you could star the repository 😄

GitHub: [github.com/Anmol-Baranwal/DevtoGitHub](https://github.com/Anmol-Baranwal/DevtoGitHub)
Marketplace: [github.com/marketplace/actions/devtogithub](https://github.com/marketplace/actions/devtogithub)

If I get _300 stars on the repository in 1 month_, I will create something more special for the DEV community so that you can showcase what you have achieved with DEV with some insane level of stats. Trust me!

---

By the way, I'm officially accepted to be a writer at freeCodeCamp.

![acceptance letter of freecodecamp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gzh8klq7jpxrsx7pvih.png)

So, I will write a couple of posts there which I was planning on DEV. I will repost it here. I hope you all don't mind it :)
I will create some original posts for DEV too.

I create solutions with open source.
So you can follow me on [GitHub](https://github.com/Anmol-Baranwal) & [Twitter](https://twitter.com/Anmol_Codes) to remain updated on my work :)

> If you are keen on sponsoring this post, shoot me a message at anmolbaranwal119@gmail.com or hit me up on Twitter! 🚀

{% embed https://github.com/Anmol-Baranwal %}

"Write more, inspire more!"

![Ending GIF waving goodbye](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ylsck6b9c7ei6makpqd.gif)