So, you've probably come across the awesome Vue repository[1], which features a treasure trove of exciting projects. During my own exploration, I stumbled upon the SDR News project[2] (now known as Daily Dev Bytes), which inspired me to try soomething new.
I found the idea of dynamically aggregating news sources and presenting them in a news tab[3] to be not only interesting but also a fun project to work on. However, since my blog doesn't have a backend, I needed to come up with a solution that would allow me to aggregate various sources seamlessly. In this blog post, I'll take you through my journey of creating a news aggregator using Vuepress, RSS feeds, and the Hacker News API. This solution allows you to generate a news section for your Vuepress static website, and it automatically updates every time you deploy changes.
# Gathering News Sources
To start this project, I needed to gather news sources. I decided to use a combination of RSS feeds and the Hacker News API. This blend of sources would provide a diverse and engaging range of content for my readers. Here's a code example for hacker news:
async function hacknews() {
var config = {
method: 'get',
url: 'https://hacker-news.firebaseio.com/v0/newstories.json?print=pretty',
headers: { }
};
return await axios(config)
.then(async function (response) {
let content = await fetchAllData(response.data)
let markdownContent = `\n\n ## From Hackernews \n\n`;
markdownContent += content.join('')
return markdownContent
})
.catch(function (error) {
console.log(error);
});
}
# Converting to Markdown
With the sources in place, the next step was to process the collected data and make it compatible with a Vuepress static website. To achieve this, I devised a method to convert the news content into Markdown (.md) files. This format is easily readable by Vuepress, making it an ideal choice for this project.
# Integration with Deployment
One of the essential aspects of this project was its seamless integration into my deployment process. To ensure that the news section would always be up-to-date, I added a news section generation step to my deploy script. This means that every time I make changes and deploy an alteration, a fresh aggregation of news sources is automatically created. Just added a couple of lines to the deploy bash script[4].
cd <news_folder>
node <path_to_script>index.js
# Adding Randomization
To keep the content engaging and prevent repetition, I introduced an element of randomness into the aggregation process. By incorporating randomization, it becomes less likely for the same links to appear on multiple deployments, creating a more dynamic and enjoyable experience for readers.
# Conclusion
In this blog post, we've explored the process of building a dynamic news aggregator for a Vuepress static website. By combining RSS feeds, the Hacker News API, and Markdown files, we've created a solution that keeps your content fresh and engaging. The addition of a deploy script ensures that every time you make changes to your site, your news section is automatically updated.
If you're a Vue.js enthusiast looking to enhance your website with a dynamic news section, this project is an exciting endeavor to undertake. Not only will it provide valuable information to your readers, but it will also add a unique and dynamic element to your site.
# References
[1] Awesome Vue Repo (opens new window)