bradleytaunt / gists-blog

Use your Github gists as blog posts

Gist blog

A simple static rendered blog site genrator, based on Nuxt.js that fecth posts data from your Github gists.

🎉 Getting Started

Demo : Mikamboo's Gists Blog

Otherwise, you can follow these steps!

1. 👯‍♂️ Clone the repository locally and cd into the directory.
2. 📦 Install dependencies.
3. 🏗 Run the project for local dev. This will start a hot-reloading server at localhost:3000.
4. 🌌 Build the app for server-side rendered deployment. See more about Universal SSR in the Nuxt.js docs.
5. ⚡️ Generate a fully pre-rendered static site. See more in the docs.

How it works ?

1. The site genertor require a GISTS_USER environnement variable to fetch user posts from Github Gists.
2. All gists containing a README.md + gistsblog.json will be considered as blog posts

• README.md File contains article markdown
• gistsblog.json is just a filter to avoid to take all Gists

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ GISTS_USER=your-user-name yarn run dev

# build for production and launch server
$ GISTS_USER=your-user-name yarn run generate
$ yarn start

# generate static blog
$ GISTS_USER=your-user-name yarn run generate

Inspired/Referred

For detailed explanation on how things work, checkout :

• Nuxt.js docs
• NPM frontmatter-markdown-loader package
• Blog post : Nuxt markdown blog
• uxt & Netlify CMS Starter

TODO

• Add article meta description, tags ...
• Articles fallback cover image
• Display frontmatter meta only if defined
• Support for Google analytics
• Use @nuxtjs/markdownit ?
• Add vuex state management like this example
• Update posts download for create unique json managed by vuex store : nuxtServerInit