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
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
I then just run pre-commit run -a
to make sure my current repo is good:
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
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
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
---
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:
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
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'
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 addingmarkdown/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)
using ur workflow and the template and every time gives me the same error:
Any idea how to fix it ?
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
not working for me somehow, just forked ur repo and change only the title, it throws the same error
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 workedI 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.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
thanks, i will give it a try
hmmm, very interesting case.. i will give another try. thanks tho
`<a href="solidobelt.com/products/by-applica...
">pipe-conveyor-belts,
tumble-shot-blasting-conveyor-belt,
`
a little curious, won't there be a problem of posting an article multiple times if adding posts one by one?
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
hmm, very nice, i gonna try this !