Configure GitHub for Dev.to Publishing

jajera

John Ajera

Posted on November 26, 2024

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.
💖 💪 🙅 🚩
jajera
John Ajera

Posted on November 26, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Configure GitHub for Dev.to Publishing