<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Devto on despatches</title><link>https://icle.es/tags/devto/</link><description>Recent content in Devto on despatches</description><generator>Hugo</generator><language>en</language><lastBuildDate>Tue, 23 Sep 2025 10:23:24 +0100</lastBuildDate><atom:link href="https://icle.es/tags/devto/index.xml" rel="self" type="application/rss+xml"/><item><title>Publishing from hugo to dev.to</title><link>https://icle.es/2025/09/23/publishing-from-hugo-to-dev.to/</link><pubDate>Tue, 23 Sep 2025 09:30:54 +0100</pubDate><guid>https://icle.es/2025/09/23/publishing-from-hugo-to-dev.to/</guid><description>&lt;p>I have been pondering federating parts of my blog to &lt;a href="https://dev.to/">dev.to&lt;/a>
for a bit more visibility.&lt;/p>
&lt;p>However, I had a couple of issues:&lt;/p>
&lt;ul>
&lt;li>With html (instead of markdown), it would not pick up the code blocks
correctly&lt;/li>
&lt;li>With markdown, it would render the relative links incorrectly&lt;/li>
&lt;/ul>
&lt;p>What I really wanted was a way to render the hugo markdown into Jekyll style
(which is what forem wants) but with the links rendered.&lt;/p></description><content:encoded><![CDATA[<p>I have been pondering federating parts of my blog to <a href="https://dev.to/">dev.to</a>
for a bit more visibility.</p>
<p>However, I had a couple of issues:</p>
<ul>
<li>With html (instead of markdown), it would not pick up the code blocks
correctly</li>
<li>With markdown, it would render the relative links incorrectly</li>
</ul>
<p>What I really wanted was a way to render the hugo markdown into Jekyll style
(which is what forem wants) but with the links rendered.</p>
<p>This was a little more complicated than I would have liked.</p>
<h2 id="goals">Goals</h2>
<p>At a minimum, I wanted two main things:</p>
<ul>
<li>Render code blocks correctly</li>
<li>Relative URLs should be rendered as absolute (because they won&rsquo;t work on
dev.to)</li>
</ul>
<h2 id="pre-existing-solutions">Pre-existing Solutions</h2>
<p>I found <a href="https://github.com/maelvls/hudevto">hugodevto</a> which looked promising
except:</p>
<ul>
<li>Not a fan of having to manually update hundreds of posts with the devto id</li>
<li>Had a couple of fiddly bits to get it working (my plain text outputs had some
troubles for unknown reasons)</li>
<li>It rendered image urls,
<a href="https://github.com/maelvls/hudevto/issues/2#issuecomment-3302934120">but not regular urls.</a></li>
</ul>
<p>Ultimately though, it felt a bit bulkier than what I was looking for</p>
<h2 id="using-hugo">Using Hugo</h2>
<p>I had <a href="https://icle.es/tags/hugo">done enough work with hugo</a> and
<a href="https://icle.es/tags/inscribe">output formats</a> to have a vague idea of how to make it work.</p>
<h3 id="limitations">Limitations</h3>
<p>There are a few limitations to doing it this way though. Hugo
<a href="https://gohugo.io/render-hooks/introduction/">does not provide render hooks for everything</a>.
You will end up with html in the output. However, since Forem (and Jekyll) will
just render them, it fits my use case. It won&rsquo;t work as well if you try and use
this to generate like for like markdown usable in Jekyll.</p>
<h3 id="define-a-new-content-type">Define a new content type</h3>
<p>We want a new content type which will output markdown</p>
```toml
[outputFormats.jekyll]
    mediaType = "text/markdown"
    baseName = "index"
    isPlainText = true
    isHTML = false
    notAlternative = true
    path = 'jekyll'        # put the output in `public/jekyll` so it's easier to find

[outputs]
    page = ['html', 'jekyll'] # Output all pages in our jekyll format as well
```
<p>You also need a basic template before hugo will output our markdown files.</p>
<p><a href="https://icle.es/layouts/_default/single.jekyll.md"><code>layouts/_default/single.jekyll.md</code></a></p>
```gotemplate
---
title: {{ .Title }}
published: true
date: {{ .Date }}
{{- with .Params.tags }}
tags: [{{ delimit . ", " }}]
{{- end }}
canonical_url: {{ .Permalink }}
---

{{ .Content }}
```
<p>With this, if you <code>hugo build</code>, it&rsquo;ll render the <code>.md</code> files, but the content
will be html.</p>
<h3 id="render-code-blocks-as-markdown">Render code blocks as markdown</h3>
<p>We can use the
<a href="https://gohugo.io/render-hooks/code-blocks/">code block render hook</a> to
&ldquo;convert them&rdquo; back to markdown.</p>
<p><a href="https://icle.es/layouts/_default/_markup/render-codeblock.jekyll.md"><code>layouts/_default/_markup/render-codeblock.jekyll.md</code></a></p>
```gotemplate
```
{{ .Type }}
{{ .Inner }}
```
```
<h3 id="render-absolute-urls">Render absolute urls</h3>
<p>I already have a pretty extensive
<a href="https://icle.es/layouts/_default/_markup/render-link.html"><code>render-link</code></a> so updating
it was just a case of making a copy of it and replacing relative url references
with absolute ones.</p>
<p>It&rsquo;s fine for it to be in html because Forem will still render it correctly.
They could be rendered as markdown and it should work just as well.</p>
<p><a href="https://icle.es/layouts/_default/_markup/render-link.jekyll.md"><code>layouts/_default/_markup/render-link.jekyll.md</code></a></p>
```gotemplate
{{ /* other content */ }}
  <a href="{{ printf "%s#%s" .PageInner.Permalink $u.Fragment | safeURL }}" {{ with .Title }}title="{{ . }}"{{ end }}>{{ $text }}</a>
{{ /* other content */ }}
```
<h3 id="output">Output</h3>
<p>With these relatively minor changes, I was able to render markdown files I could
then pop into dev.to and it works for the handful I set up.</p>
<h2 id="next-steps">Next Steps</h2>
<h3 id="images">Images</h3>
<p>One big glaring omission is images - it&rsquo;s not as relevant for me because I
rarely use images.</p>
<p>I expect it to be easy enough to use the
<a href="https://gohugo.io/render-hooks/images/">image render hook</a> to achieve this.</p>
<h3 id="tags">Tags</h3>
<p>One of the issues I have is that dev.to has a strict tag limit of four.
Currently I manually edit that when I create the post on dev.to.</p>
<p>It would be better to have a <code>devto_tags</code> field because my local content tags
aren&rsquo;t always relevant for dev.to.</p>
<p>I could also write a script to automate the setting of the <code>devto_tags</code> field
automatically based on the first four tags, and mapping from my tags to dev.to
tags if necessary by building a small map data set somewhere.</p>
<h3 id="automation">Automation</h3>
<p>Once the above two are done, it would be good to automate it. I could</p>
<ul>
<li><a href="https://developers.forem.com/api/v0#tag/articles/operation/getUserAllArticles">get all the posts</a></li>
<li>get all the local posts</li>
<li>map them based on the canonical url (which is returned by the endpoint)</li>
<li>upload updated ones.</li>
</ul>
<p>Not all my posts are technical, so I&rsquo;d also want to add a field to the
frontmatter (<code>devto_published</code>) and figure out a way to push updates only if
there are changes.</p>
<h2 id="conclusion">Conclusion</h2>
<p>I have a working solution for now - and if dev.to brings enough traffic / value,
then I&rsquo;ll consider spending a bit more time adding polish.</p>
<p>For the time being though, seems to work!</p>
<p>Feel free to use any of this code (such that it is) as you wish.</p>
]]></content:encoded></item></channel></rss>