DEV Community

John  Ajera
John Ajera

Posted on

2

Configure GitHub for Dev.to Publishing

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>
Enter fullscreen mode Exit fullscreen mode

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

  git branch <branch-name> initial-build
  git checkout <branch-name>
Enter fullscreen mode Exit fullscreen mode
  • Create a folder named "articles" to store your Markdown files:
  mkdir articles
Enter fullscreen mode Exit fullscreen mode

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

  .
  ├── articles
  ├── LICENSE
  └── README.md
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  .
  ├── .github
  │   └── workflows
  │       ├── markdown-lint.yml
  │       └── devto-publisher.yml
  ├── articles
  ├── LICENSE
  └── README.md
Enter fullscreen mode Exit fullscreen mode

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 markdownlint-cli@0.41.0

        - 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"
Enter fullscreen mode Exit fullscreen mode

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 }}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.).

Review and Approve the PR

  • Self-Review or Request Reviews.

Merge the Pull Request

  • Navigate to the PR you just created.
  • Click "Merge Pull Request".
  • Click "Confirm merge".

7. Test and Validate the Workflow

  • You might to go have and forth to fix issues other than testing the workflow.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay