dev-resources.site

for different kinds of informations.

Configure GitHub for Dev.to Publishing

Published at

11/26/2024

Configure GitHub for Dev.to Publishing

1. Prepare Your Dev.to Account

Generate a Dev.to API Key

Go to your Dev.to account.
Navigate to Settings > Account > Extensions > API Key.
Generate a new API key and copy it.

2. Create a GitHub Repository

Create a New Repository

Go to GitHub and create a new repository.
Give it a meaningful name (e.g., blog).

Set Up the Repository Structure

Clone the repository to your local machine:

  git clone https://github.com/<your-username>/<repository-name>.git
  cd <repository-name>

It's always a best practice to create a branch and work from it.

  git branch <branch-name> initial-build
  git checkout <branch-name>

Create a folder named "articles" to store your Markdown files:

  mkdir articles

After creating the folder, the repository structure should look like this:

  .
  ├── articles
  ├── LICENSE
  └── README.md

3. Add Your Dev.to API Key to GitHub Secrets

Go to Repository Settings

Navigate to "Settings" > "Secrets and variables" > "Actions" > "New repository secret".

Add a Secret

Name the secret "DEVTO_TOKEN".
Paste the "Dev.to" API key from the previous step.

4. Create a GitHub Actions Workflow

Create a Workflow File

Set up the folder structure for GitHub Actions workflows:

  mkdir -p .github/workflows
  touch .github/workflows/markdown-lint.yml
  touch .github/workflows/devto-publisher.yml

  .
  ├── .github
  │   └── workflows
  │       ├── markdown-lint.yml
  │       └── devto-publisher.yml
  ├── articles
  ├── LICENSE
  └── README.md

Configure markdown-lint.yml

Update the "markdown-lint.yml" file with the following contents:

  name: markdown-lint

  on:
    push:
      branches:
        - "**"
    pull_request:
      paths:
        - "**/*.md"

  jobs:
    markdown-lint:
      runs-on: ubuntu-latest
      steps:
        - name: Checkout code
          uses: actions/checkout@v4

        - name: Install markdownlint
          run: npm install -g [email protected]

        - name: Run markdownlint
          env:
            CONFIG: |
              {
                "comment": "Default rules",
                "default": true,
                "whitespace": true,
                "line_length": false,
                "ul-start-left": true,
                "ul-indent": true,
                "no-inline-html": true,
                "no-bare-urls": true,
                "fenced-code-language": true,
                "first-line-h1": true,
                "no-duplicate-header": true,
                "no-emphasis-as-header": true,
                "single-h1": true
              }
          run: |
            CONFIG_FILE="$(mktemp)"
            echo "$CONFIG" > "$CONFIG_FILE"
            markdownlint '**/*.md' --ignore node_modules -c "$CONFIG_FILE"

Configure devto-publisher.yml

Update the "devto-publisher.yml" file with the following contents:

  name: Dev.to Publisher

  on:
    push:
      branches:
        - "**"
      paths:
        - "articles/**/*.md"

  jobs:
    publish:
      runs-on: ubuntu-latest

      steps:
        - name: Checkout code
          uses: actions/checkout@v4

        - name: Set dry-run mode based on branch
          id: dry_run_check
          run: |
            if [[ "${{ github.ref_name }}" == "main" ]]; then
              echo "dry_run=false" >> $GITHUB_ENV
            else
              echo "dry_run=true" >> $GITHUB_ENV
            fi

        - name: Publish articles to Dev.to
          uses: sinedied/publish-devto@v2
          with:
            devto_key: ${{ secrets.DEVTO_TOKEN }}
            github_token: ${{ secrets.GITHUB_TOKEN }}
            files: "articles/**/*.md"
            branch: ${{ env.CURRENT_BRANCH }}
            conventional_commits: true
            dry_run: ${{ env.dry_run }}

Summary

The "markdown-lint.yml" workflow ensures Markdown files are formatted correctly.
The "devto-publisher.yml" workflow automates publishing Markdown articles located in the articles directory to your Dev.to account.

5. Push the branch to GitHub

Execute

git add --all
git commit -m "feat: add GitHub Actions workflows for publishing to Dev.to" \
  -m "Configure automation with markdown linting and article publishing workflows."
git push origin <branch-name>

6. Create a Pull Request (PR)

Go to Your Repository in GitHub

Visit your repository on GitHub.

Navigate to the "Pull Requests" Tab

Click on the "Pull Requests" tab at the top of the repository page.

Click "New Pull Request"

Select the "New Pull Request" button.

Select Branches

Base branch: Choose the branch you want to merge into (e.g., main or production).
Compare branch: Select the <branch-name> branch.

Review Changes

Review the list of commits and the files changed to ensure they are correct.

Add a Title and Description

Provide a concise and descriptive title (e.g., feat: Add GitHub Actions for Dev.to publishing).
Add any necessary details in the description box (e.g., reasons for changes, references to issues, etc.).