# 🇬🇧 Add JSON Feed support to VuePress pages thanks to 🦊 GitLab Runners
2018-07-05
This is a quick article. I need to add JSON Feed support to my VuePress website. I use YAML headers in my markdown blog post:
---
title: 🇬🇧 Add JSON Feed support to VuePress pages thanks to 🦊 GitLab Runners
lang: us-EN
date: "2018-07-05"
month: "2018-07"
classification: "JavaScript - VuePress - GitLab Runners"
teaser: ""
---
So, I will use yaml-front-matter (opens new window) to help me to build a JSON feed file.
# First: Set up
Install yaml-front-matter (opens new window) in your VuePress project:
npm install yaml-front-matter -save
# Second: Create a script to generate the JSON Feed file
At the root of your project, create a gen-json-feed.js
file with this content:
const fs = require('fs')
const yamlFront = require('yaml-front-matter')
const path = require('path')
const docFolder = './docs/articles/'
const homepage = 'https://k33g.gitlab.io'
let feed = {
version: 'https://jsonfeed.org/version/1',
user_comment: 'Json Feed from k33g.gitlab.io',
title: 'k33g.gitlab.io - JSON Feed',
description: 'Geek Blog Posts by @k33g_org',
home_page_url: homepage,
feed_url: `${homepage}/feed.json`,
author: {
name: '@k33G_org',
url: 'https://twitter.com/k33g_org?lang=en'
},
items: []
}
fs.readdirSync(docFolder).forEach(file => {
console.log(`${homepage}/articles/${path.parse(file).name}.html`)
let contents = fs.readFileSync(`${docFolder}${file}`, 'utf8')
let yaml = yamlFront.loadFront(contents)
feed.items.push({
title: yaml.title,
date_published: yaml.date,
id: `${homepage}/articles/${path.parse(file).name}.html`,
url: `${homepage}/articles/${path.parse(file).name}.html`,
content_html: yaml.classification + (yaml.teaser!=="" ? ` | ${yaml.teaser}` : "") // __content:
})
})
feed.items.reverse()
fs.writeFileSync('./public/feed.json', JSON.stringify(feed,null,2));
Remarks:
- my blog posts are in
./docs/articles/
- I generate the file at the root of the
./public
directory
So, adapt the script for your own website.
# Third: Update .gitlab-ci.yml
to add a job to generate the fedd file
Update your .gitlab-ci.yml
like that:
{
"main": "index.js",
"directories": {
"doc": "docs"
},
"scripts": {
"docs:build": "vuepress build docs;",
"json:feed": "node gen-json-feed.js"
},
"dependencies": {
"vuepress": "^0.10.0",
"yaml-front-matter": "^4.0.0"
}
}
Remark: I only add this line:
"json:feed": "node gen-json-feed.js"
Then:
- Update your GitLab project:
git add .
,git commit -m "✨ Json Feed"
,git push
- Wait for the build pipeline
- ... And now, you can get your feed here: https://k33g.gitlab.io/feed.json (opens new window)
Simple 😉
Last Articles
- 🇫🇷 Type Result en Kotlin | 2020-10-31 | Kotlin
- 🇫🇷 Type Result en Kotlin | 2020-10-31 | Kotlin
- 🇬🇧 Every GitLab Page deserves a real CI/CD | 2020-07-23 | GitLab CI
- 🇫🇷 Lit-Element, commencer doucement | 2020-07-20 | WebComponent
- 🇬🇧 Build quickly and host easily your Docker images with GitLab and GitLab CI | 2020-06-02 | GitLab CI
- 🇬🇧 Deploy quickly on Clever Cloud with GitLab CI | 2020-05-31 | GitLab CI
- 🇫🇷 Borg Collective, mes jouets pour apprendre Knative | 2020-05-30 | Knative
- 🇬🇧 Borg Collective, Toys to learn Knative | 2020-05-30 | Knative
- 🇫🇷 M5Stack, une petit device IOT bien sympathique, programmable en Python | 2020-05-09 | IOT
- 🇫🇷 Knative, l'outil qui rend Kubernetes sympathique | 2020-05-02 | kubernetes