DEV Community

Cover image for My setup for publishing to Dev.to using github
Jack Lewis
Jack Lewis

Posted on • Edited on

My setup for publishing to Dev.to using github

This article is mainly around so that I can remember my current setup, and maybe it'll help you be more productive, but it's essentially a GUID on how to set up vscode and GitHub to be able to post to DEV.to.

Benefits

Well, the major one is that if you accidentally delete an article off DEV.to, instead of it being lost, you can just restore it from the GitHub repo. Your articles also aren't tied to DEV.to so if you wanted to also post to a personal blog as well as to DEV.to, instead of having to copy and paste between websites, you can just update the Actions workflow to post to both. Additionally, ever accidentally hit publish when you meant to save a draft? I have, this makes that much harder to do as you've got a specific you can unset

Prerequisites

  • DEV.to account
  • GitHub account
  • git
  • vscode

First steps

You need to create a GitHub repo and name it something that makes sense to you. For me that's DevToArticleRepo. On this repo I just set a simple description and use the MIT licence, because it's easy to do and start as a private repo, just in case

Once you've done this you need to pull down the repository using your favourite git tool. I tend to use tortoise git to start off with, then move to using vscode once it's pulled down

tortoise git
vscode

Repository setup

If I've not got a .gitignore (because I couldn't be bothered to search usually!) I add an empty .gitignore ready for me. I also like to add some pre-commits to my repository to help out. In every repository I make I tend to add the check-yaml, end-of-file-fixer, trailing-whitespace and detect-secrets. Also, as this is a primarily markup repository, I also added a linting tool called markdownlint.

For reference, here's what the .pre-commit-config.yaml looks like for this repo


repos:
    - repo: https://github.com/pre-commit/pre-commit-hooks
      rev: v2.3.0
      hooks:
          - id: check-yaml
          - id: end-of-file-fixer
          - id: trailing-whitespace

    - repo: https://github.com/Yelp/detect-secrets
      rev: v1.4.0
      hooks:
          - id: detect-secrets

    - repo: https://github.com/igorshubovych/markdownlint-cli
      rev: v0.33.0
      hooks:
          - id: markdownlint
            args: ["--disable=MD013"] # this removes line length warnings

Enter fullscreen mode Exit fullscreen mode

I then just run pre-commit run -a to make sure my current repo is good:
pre commit check

Visual Studio Code setup

As I'm using vscode for this, I also installed a few extensions to make my life easier:

  • LTeX
    • I think this should be obvious why this would be helpful!
    • Provides both grammar and spell checking
  • Markdown Preview Enhanced
    • This is so that I can get the markdown preview to not be in dark mode, like it's probably going to be viewed in
  • Markdown All in One
    • Provides an easier way to format Markdown

At this point I'm ready to start setting up my folder structure for the markdown. As it's just starting out, and I'm definitely going to be below the 500MB limit GitHub gives you for a basic repository. It looks something like this:


DevToArticleRepo
├── .git
├── markdown
│   ├── assets
│   │   ├── github-octocat.png
│   │   ├──tortoiseGitClone.png
│   │   ├──moreImages.png
│   ├── firstPost.md
├── .gitignore
├── .pre-commit-config.yaml
├── LICENSE
└── README.md

Enter fullscreen mode Exit fullscreen mode

I'll probably revise this, but for now this good. I'm going to start working on the file firstPost.md. In order to do this I set up my environment by just right-clicking in the file firstPost.md and select Markdown Preview Enhanced: open preview to the side
markdown preview

Dev.to setup

Once this is done, I'm ready to start editing the markdown. By default, Dev.to articles require certain headers for them to be picked up, so this file has been started with the following:


---
title: Pushing to Dev.to using GitHub
published: true # if you set this to false it will publish the page as a draft
description: An article used to test pushing to Dev.to
tags: 'productivity, beginners, test, github'
cover_image: ./assets/github-octocat.jpg
canonical_url: null  # set this if you have a website you want to be promoted
---

Enter fullscreen mode Exit fullscreen mode

Once this is done, you can write your markdown article

GitHub setup

At this point, you've hopefully written your article and we're pretty much done with the git side so you can close the 200 windows you have open explaining how to style markup. After this we'll get ready to set up the GitHub actions project for pushing this code into the repo

It's pretty straight forward to get started, all you need to do is grab an API token from Dev.to and place it in the repositories' secrets tab with a memorable name. You can find the API key by clicking on your profile picture and going to Extensions > generate API key

We can now start working on the "free" build (GitHub gives you a load of credits every month) with GitHub actions by going to actions and selecting set up a workflow yourself:

Alt text

Writing the build pipeline

Once started, the main thing we're going to be doing is using the following extension which allows you to publish to Dev.to. It's really quite straightforward and I've got the below GitHub actions YAML file to publish it


# runs on pull requests, manually, and the main branch
on:
  pull_request:
  workflow_dispatch:
  push:
    branches:
    - main

jobs:
  my_job:
    name: push details to Dev.to
    permissions:
      contents: write # this lets the bot update the post in github
    runs-on: ubuntu-latest # ubuntu costs half the price of windows

    steps:
    - uses: actions/checkout@v3 # checks out my code to the actions build
    - name: Publish articles on Dev.to
      uses: sinedied/publish-devto@v2
      with:
        devto_key: ${{ secrets.SECRET_DEVTO_TOKEN }} # the secret you setup
        github_token: ${{ secrets.GITHUB_TOKEN }} # this is an inbuilt secret by github
        files: 'markdown/**/*.md'
        branch: main
        conventional_commits: true
        dry_run: false # set this to true if you want to do a dry run

Enter fullscreen mode Exit fullscreen mode

When you've managed a successful run and published an article, you should notice that the start of your markdown has been updated with something like the following:

id: 1361493
date: '2023-02-11T02:55:36Z'
Enter fullscreen mode Exit fullscreen mode

If this updates in the future, it can be found here

Once this is done, just commit the file and the GitHub action should run. All being well

As I'm going through using this repository, here are some things I've noticed to keep in mind

  • Your repository needs to be public to get the code to work if you have any images, otherwise you'll get errors around images not being public
  • You can have a maximum of 4 tags, otherwise you'll get unprocessable entity
  • Articles sometimes fail on first post, what you can do to get around this is change a little text and then push again
  • Images are cached by DEV.to, you can force them to update by slightly changing the file name
  • If you edit an article that's published via GitHub, the changes will be reverted on the next run of the Action build
  • Cover images can be pretty finicky and do break the build regularly if you start changing them
  • I created a local folder for anything that I didn't want pushed into Git yet. I did this by adding markdown/local/* to the .gitignore file. When I want it added to Git, I just move the file into a folder at the same level, and all the images work automatically
  • I've swapped away from using the SpellChecker tool to using LTeX because of the additional grammar checking.

Top comments (12)

Collapse
 
k1lgor profile image
k1lgor

using ur workflow and the template and every time gives me the same error:

Error: end of the stream or a document separator is expected at line 9, column 1:
    One of the most basic uses of th ... 
    ^
Push failed

Warning: The `set-output` command is deprecated and will be disabled soon. Please upgrade to using Environment Files. For more information see: https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/
Error: Error: Table must define at least one row.
Enter fullscreen mode Exit fullscreen mode

Any idea how to fix it ?

Collapse
 
jlewis92 profile image
Jack Lewis • Edited

Hope you don't mind, but I grabbed a copy of the article from your repo to try testing for myself and I got it to fail with a different error from what you got. However, what's interesting is I tried again by removing backticks from the headers and I got it to post. Even more interesting, I then added the backticks back in and got it to post with them.

I thin k what's happening is that on first push of a new article, the build will fail. However, once you update something (the removal of backticks didn't really matter) it seems to pick everything up correctly

Collapse
 
k1lgor profile image
k1lgor

not working for me somehow, just forked ur repo and change only the title, it throws the same error

Thread Thread
 
jlewis92 profile image
Jack Lewis

I think you've got the repo set to private so I can't see what's happening but it should be slightly different at least? I don't think I have One of the most basic uses of th... within my repository? Are you running this locally, or via GitHub? The line endings stuff sort of makes me suspect it's some sort of mismatch between Windows and Linux - I did try changing everything to use LF rather than CRLF, but that seems to have worked

Thread Thread
 
k1lgor profile image
k1lgor

I also don't have this One of the most... in the markdown or any other file. This is the strangest thing. I figured it out that this one is a sentence from my first article but how is related I dunno... Tried to changed it but the same result.

Thread Thread
 
jlewis92 profile image
Jack Lewis

The first step of the runner is retrieving articles from dev.to, for some reason it's complaining about an article you've already written, as it seems to think one of you posts is malformed - why it's saying that I'm not sure as I can't see your markdown

You could try pulling down your posts via the API and seeing if it has any issues, or maybe try recreating the post (after backing up of course)? I did try just creating a post on the website so I had a mix, and that did seem to work

Thread Thread
 
k1lgor profile image
k1lgor

thanks, i will give it a try

Collapse
 
k1lgor profile image
k1lgor

hmmm, very interesting case.. i will give another try. thanks tho

Collapse
 
caijin5 profile image
Sino wheelabrator
Collapse
 
baddate profile image
SMJ

a little curious, won't there be a problem of posting an article multiple times if adding posts one by one?

Collapse
 
jlewis92 profile image
Jack Lewis

Hi, so this is why the Action needs write access to your repository, what happens when you post is that a bot then commits to your repository with an ID on the new markdown which tracks the articles in DEV.to for updating. If you remove the id, it will just post again though

Collapse
 
k1lgor profile image
k1lgor

hmm, very nice, i gonna try this !