|
| 1 | +--- |
| 2 | +title: How you can use github actions to publish to dev.to? |
| 3 | +published: false |
| 4 | +description: When I create a new markdown article, I don't want to have copy and paste that markdown to multiple other blog sites. So, why not let an octocat handle this work for me with a github action? |
| 5 | +tags: javascript, github, opensource, actions |
| 6 | +cover_image: https://cdn.nanalyze.com/uploads/2018/07/automation-rpa-teaser.jpg |
| 7 | +--- |
| 8 | + |
| 9 | +# If a tree falls in the woods, does it make a sound? |
| 10 | + |
| 11 | +The internet is much like a forest with content and sites being like trees. There are thousands of trees growing in the forest off the beaten path that no one knows about. If you want your site or content to be discovered, the easiest way is to plant your tree close to the main trail. |
| 12 | + |
| 13 | +<br> |
| 14 | + |
| 15 | +Over the last 6 years of Software Development, I've learned a lot, but I've never shared it outside of my full-time job. If there's not an easy way for people to find the blogs I put out, then I'm still not sharing my thoughts with others. This is where sites like [dev.to](https://dev.to/basicbrogrammer) and [hashnode](https://hashnode.com/@basicbrogrammer) come into play. I can write the markdown for my blog posts in vim then crosspost to other blog distribution platforms. I definitely didn't want to copypasta all my content every time, so I've decided to automate this process and open-source it. |
| 16 | + |
| 17 | +<br> |
| 18 | + |
| 19 | +1. Let's go over the code. |
| 20 | +2. Let's take a look at how to use the [github action](https://github.com/basicbrogrammer/crosspost-markdown). |
| 21 | + |
| 22 | +# DaCode |
| 23 | + |
| 24 | +The first order of business is to find out if your last commit contains articles. |
| 25 | + |
| 26 | +<br> |
| 27 | + |
| 28 | +In order to do so, we will use node's [execSync](https://nodejs.org/api/child_process.html#child_process_child_process_execsync_command_options) function to run a git command which will give us the names of files changed in the given path argument. |
| 29 | +```javascript |
| 30 | +execSync(`git diff-tree --no-commit-id --name-only -r ${process.env.GITHUB_SHA} -- ${path}`) |
| 31 | + |
| 32 | +``` |
| 33 | + |
| 34 | +<br> |
| 35 | + |
| 36 | +Let's take the return value turn it into a string, split the string up by line breaks, filter off any empty strings, and finally remove any leading and trailing whitespace with `trim()` |
| 37 | + |
| 38 | +<br> |
| 39 | + |
| 40 | +Putting it all together looks something like this: |
| 41 | + |
| 42 | +```javascript |
| 43 | +const { execSync } = require('child_process'); |
| 44 | + |
| 45 | +exports.findFiles = (path) => |
| 46 | + execSync(`git diff-tree --no-commit-id --name-only -r ${process.env.GITHUB_SHA} -- ${path}`) |
| 47 | + .toString() |
| 48 | + .split('\n') |
| 49 | + .filter((f) => f.length > 0) |
| 50 | + .map((f) => f.trim()); |
| 51 | +``` |
| 52 | + |
| 53 | +If this code finds markdown files, we will cycle through each file, sending it into a `publish` function. |
| 54 | +We will use node's file system [`readFileSync`](https://nodejs.org/api/fs.html#fs_fs_readfilesync_path_options) function to read the file into memory. Then, using the [`@github-docs/frontmatter`](https://github.com/docs/frontmatter) package to parse the markdown so we can checkout the [frontmatter](https://jekyllrb.com/docs/front-matter/) which is just the "data" at the top of markdown files. |
| 55 | + |
| 56 | +<br> |
| 57 | + |
| 58 | +If the frontmatter indicates the post is `published`, we can go ahead and start crossposting. |
| 59 | +Let's have a look at the current version of the `publish` function. |
| 60 | + |
| 61 | +```javascript |
| 62 | +exports.publish = (path) => { |
| 63 | + try { |
| 64 | + const markdown = fs.readFileSync(`./${path}`, 'utf8'); |
| 65 | + const { data } = frontmatter(markdown); |
| 66 | + |
| 67 | + if (data.published) { |
| 68 | + logResponse(data.title, 'Dev.to', devTo.publish(markdown)); |
| 69 | + } else { |
| 70 | + console.log(`Article ${data.title} NOT published. Skipping.`); |
| 71 | + } |
| 72 | + } catch (err) { |
| 73 | + console.error(err); |
| 74 | + } |
| 75 | +}; |
| 76 | +``` |
| 77 | + |
| 78 | +Currently, I am only crossposting to [dev.to](https://dev.to/basicbrogrammer), but soon I want to update the Github action to crosspost to [hashnode.com](https://hashnode.com/@basicBrogrammer) as well. 🤙 |
| 79 | + |
| 80 | +<br> |
| 81 | + |
| 82 | +To crosspost to dev.to, the publish function passes the markdown into the `publish` method on an authenticated instance of DevTo. |
| 83 | +The `devTo.publish` method uses the auth token and [node-fetch](https://www.npmjs.com/package/node-fetch) to POST your markdown to dev.to's api and boom it's done. |
| 84 | + |
| 85 | +<br> |
| 86 | + |
| 87 | +And here is the dead simple code for our DevTo class: |
| 88 | + |
| 89 | +```javascript |
| 90 | +class DevTo { |
| 91 | + constructor() { |
| 92 | + this.token = core.getInput('dev-to-token'); |
| 93 | + } |
| 94 | + |
| 95 | + publish(body_markdown) { |
| 96 | + const body = { |
| 97 | + article: { |
| 98 | + body_markdown, |
| 99 | + }, |
| 100 | + }; |
| 101 | + |
| 102 | + return fetch('https://dev.to/api/articles', { |
| 103 | + method: 'post', |
| 104 | + body: JSON.stringify(body), |
| 105 | + headers: { |
| 106 | + 'Content-Type': 'application/json', |
| 107 | + 'api-key': this.token, |
| 108 | + }, |
| 109 | + }).then((response) => response.json()); |
| 110 | + } |
| 111 | +} |
| 112 | + |
| 113 | +module.exports = new DevTo(); |
| 114 | +``` |
| 115 | + |
| 116 | +That's really it. That's all the code needed to keep you from having to copy and paste your blog markdown to multiple distributors! |
| 117 | + |
| 118 | +# DaAction |
| 119 | + |
| 120 | +As I was writing this code, I was like why don't I make it a Github action and share it with anyone that would like to use it. So I did 😎. |
| 121 | + |
| 122 | +<br> |
| 123 | + |
| 124 | +Let's take a look at how you can use this action in your Github blog repo. |
| 125 | + |
| 126 | +<br> |
| 127 | + |
| 128 | +Inside your Github repo, add a workflow file. Mine is `.github/workflows/crosspost.yml`. |
| 129 | + |
| 130 | +<br> |
| 131 | + |
| 132 | +I'm using [nuxt's content module](https://content.nuxtjs.org/) to build my blog, and have it configured to look for blog posts in the `./content/articles/` directory. So, let's tell our action to only run when a file is changed in that directory: |
| 133 | + |
| 134 | +```yaml |
| 135 | +name: CrossPost |
| 136 | + |
| 137 | +on: |
| 138 | + push: |
| 139 | + paths: |
| 140 | + - './content/articles/*' |
| 141 | +``` |
| 142 | +
|
| 143 | +Next, we need to start writing the yaml for the job itself. First, we will check out the code: |
| 144 | +```yaml |
| 145 | +jobs: |
| 146 | + crosspost: |
| 147 | + runs-on: ubuntu-latest |
| 148 | + steps: |
| 149 | + - name: Checkout Code |
| 150 | + uses: actions/checkout@v2 |
| 151 | +``` |
| 152 | +
|
| 153 | +Super simple. |
| 154 | +
|
| 155 | +<br> |
| 156 | +
|
| 157 | +Next step will be to run the crosspost-markdown action and pass in the necessary arguments (content-dir & dev-to-token). |
| 158 | +
|
| 159 | +```yaml |
| 160 | +jobs: |
| 161 | + crosspost: |
| 162 | + runs-on: ubuntu-latest |
| 163 | + steps: |
| 164 | + - name: Checkout Code |
| 165 | + uses: actions/checkout@v2 |
| 166 | + |
| 167 | + - uses: basicBrogrammer/crosspost-markdown@v0.5 |
| 168 | + with: |
| 169 | + content-dir: './content/articles/' |
| 170 | + dev-to-token: ${{ secrets.DEV_TO }} |
| 171 | +``` |
| 172 | +
|
| 173 | +All done. Now when you push to your repo the Github action will run and if you have any new blog posts it will publish them to dev.to. |
| 174 | +
|
| 175 | +<br> |
| 176 | +
|
| 177 | +## [Cache me on Tweeter, HowBowDat? Click Me. I dare you.](https://twitter.com/basicbrogrammer) |
0 commit comments