Self hosted

Moving away from Pocket to my Hugo website and Firefox bookmarks

I decided to move all of my saved links from Pocket to my static website in Hugo and make them public, in this article I'll walk you through how and why.

I’ve been using Pocket for the last few years, actually moved from Instapaper after the GDPR incident, and I’ve been happy ever since. But I decided to move all of my public links to my static website. The reason for this has nothing to do with the company, I think they offer a great service for free. It is just I never liked that another company owns my data, especially in this case when a service is easily replaceable by a simple note-taking app.

So how am I going to replace Pocket? Well, all my favorite links will be exported from Pocket to a dedicated page on my website and will be publicly available, as on the Pocket profile page. Then I’ll manage all my future links through Git or CMS. While the read-it-later type of links will be bookmarked in Firefox and synced across all my devices, which I’ve been already using for a while and find it much easier to use.

Exporting data from Pocket

Requesting your data from Pocket is a one-click operation, the problem is that they don’t give you any options on what file type you want. All your data is by default exported in an HTML file with a bunch of list items.

    <ul>
    <li><a href="https://jmperezperez.com/assess-performance-impact/" time_added="1595837017" tags="">How to Estimate Web Performance Impact Before Making Fixes - José M. Pérez</a></li>
    <li><a href="https://increment.com/frontend/ask-an-expert-why-is-css-the-way-it-is/" time_added="1595518932" tags="">Ask an expert: Why is CSS . . . the way it is? – Increment: Frontend</a></li>
    <li><a href="https://alexnixon.github.io/2019/12/10/writing.html" time_added="1595403017" tags="">It&#039;s time to start writing</a></li>
    <li><a href="https://tim.blog/podcast/" time_added="1594717067" tags="">Podcast — The Tim Ferriss Show – The Blog of Author Tim Ferriss</a></li>
    ...
    </ul>

Converting to JSON

So, I slightly modified the exported HTML file to use dataset attributes for tags like time_added and tags, copied it to Codepen and ran this code to get the list in JSON format:

    var list = [];
    
    $('ul a').each(function(idx, item){
        list.push({
            href: $(item).attr('href'),
            title: item.textContent,
            date: item.dataset.date,
            tags: item.dataset.tags
        });
    });
    
    JSON.stringify(list, null, "  ");

Importing to static website

After obtaining the list in JSON format, I needed to create a Markdown file for every entry in the JSON file. This is where the Python magic comes in:

    import json
    
    f = open('export.json')
    data = json.load(f)
    
    for link in data:
        filename = link["text"].lower().replace(" ", "-").replace("?",  "").replace("/", "-")
        with open(filename + ".md", "w") as md_file:
            md_file.write('---\n')
            md_file.write('title: "' + link["text"].encode('utf-8') + '"\n')
            md_file.write('date: ' + link["date"] + '\n')
            md_file.write('link: ' + link["href"] + '\n')
            md_file.write('---')
            md_file.close()
    
    f.close()

This simple script created a Markdown file for Hugo for every link from the list.

Conclusion

As you can see, with a few simple scripts I have back my data and transferred to my Hugo website. And replaced the core Pocket functionality with Firefox bookmarks.

08:52 (+0000)