2 |
3 | > A (mostly) headless blogging platform built atop Nuxt & Gist.
4 |
5 | [Demo](https://www.briangonzalez.org)
6 |
7 | ### Contents
8 |
9 | - [Overview](#overview)
10 | - [Creating content](#creating-content)
11 | - [Getting started](#getting-started)
12 | - [Deployment](#deployment)
13 |
14 | ## Overview
15 |
16 | Gustavo is an opinionated, (mostly) [headless](https://headlesscms.org/) blogging
17 | platform built to use:
18 |
19 | - Github Gist
20 | - Nuxt (Vue 2.x)
21 | - Docker
22 |
23 | Using a simple naming schema, Gustavo can create a whole blog for you in seconds. Don't believe me?
24 | Check out the [gist](https://gist.github.com/briangonzalez/2ece66bfffff31ddc230ca8342e80b3e) that is [my blog](https://www.briangonzalez.org).
25 |
26 | ## Creating content
27 |
28 | You can create content for your blog by simply creating
29 | files in a gist that follow this schema:
30 |
31 | | Type | Naming | Example |
32 | |-------------|-------------------------| --------------------------------------------------------------------------------------------------------------------|
33 | | post | `{name}.post.md` | [link](https://gist.github.com/briangonzalez/2ece66bfffff31ddc230ca8342e80b3e#file-lazy-leadership-post-md) |
34 | | page | `{name}.page.md` | [link](https://gist.github.com/briangonzalez/2ece66bfffff31ddc230ca8342e80b3e#file-about-page-md) |
35 | | navigation | `links.md` | [link](https://gist.github.com/briangonzalez/2ece66bfffff31ddc230ca8342e80b3e#file-links-md) |
36 | | navigation | `links.txt` (deprecated)| [link](https://gist.github.com/briangonzalez/2ece66bfffff31ddc230ca8342e80b3e#file-links-txt) |
37 | | image | clone gist and upload | [link](https://gist.github.com/briangonzalez/2ece66bfffff31ddc230ca8342e80b3e#file-your-speed-jpg) |
38 | | draft | `{name}.post.draft.md` | |
39 |
40 | Here is the [gist](https://gist.github.com/briangonzalez/2ece66bfffff31ddc230ca8342e80b3e)
41 | that powers [this blog](https://www.briangonzalez.org).
42 |
43 | ## Getting started
44 |
45 | To create a blog, follow these steps:
46 |
47 | 1. Create your gist and add some content.
48 |
49 | 2. Create `gustavo.config.js` with the following:
50 |
51 | ```js
52 | module.exports = {
53 | title: 'My gustavo blog',
54 | gistId: '<< gist id >>',
55 | githubToken: '<< token >>', /* optional, recommended */
56 | googleAnalyticsId: 'UA-X-XXXXX'
57 | }
58 | ```
59 |
60 | _Note: you'll want to create a [personal access token](https://github.com/settings/tokens) on Github because Gustavo uses the Gist API, and without the token and although it will still work, your blog will be rate limited._
61 |
62 | 3. Create a `Dockerfile` with the following:
63 |
64 | ```docker
65 | FROM eggplanet/gustavo:latest
66 | ```
67 |
68 | 4. Let's start it up:
69 |
70 | ```bash
71 | $ docker build -t my-gustavo-blog .
72 | $ docker run -p 3000:3000 my-gustavo-blog
73 | ```
74 |
75 | Your blog will be running at http://localhost:3000
76 |
77 | ## Deployment
78 |
79 | Deploying gustavo is simple. The recommended method is [Now by Zeit](https://zeit.co/now).
80 |
81 | ```bash
82 | $ now secrets add gustavo-github-token
5 |
3 | [{{ error.statusCode }}] {{ error.message }}
4 |
5 |
6 |
11 |
12 |
29 |
--------------------------------------------------------------------------------
/middleware/hide-nav.js:
--------------------------------------------------------------------------------
1 |
2 | export default function (context) {
3 | context.store.commit('HIDE_NAV')
4 | }
5 |
--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack')
2 | const gustavoConfig = require('./gustavo.config')
3 |
4 | module.exports = {
5 | env: {
6 | runningPort: process.env.PORT || 3000
7 | },
8 | build: {
9 | vendor: ['axios'],
10 | plugins: [
11 | new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/)
12 | ]
13 | },
14 | srcDir: __dirname,
15 | head: {
16 | title: gustavoConfig.title,
17 | meta: [
18 | { charset: 'utf-8' },
19 | { hid: 'og:title', name: 'og:title', content: gustavoConfig.title },
20 | { hid: 'og:description', name: 'og:description', content: gustavoConfig.description || gustavoConfig.title },
21 | { hid: 'viewport', name: 'viewport', content: 'width=device-width, initial-scale=1' }
22 | ],
23 | link: [
24 | { rel: 'icon', type: 'image/x-icon', href: gustavoConfig.favciconUrl || '/favicon.png' }
25 | ]
26 | },
27 | /*
28 | ** Global CSS
29 | */
30 | css: [
31 | 'normalize.css',
32 | { src: '~assets/css/main.scss', lang: 'scss' }
33 | ],
34 | loading: {
35 | color: gustavoConfig.loadingColor || 'black'
36 | },
37 | modules: [
38 | '@nuxtjs/pwa',
39 | '@nuxtjs/component-cache',
40 | {
41 | src: '@nuxtjs/google-analytics',
42 | options: {
43 | ua: gustavoConfig.googleAnalyticsId
44 | }
45 | }
46 | ],
47 | plugins: [
48 | '~plugins/vue-moment',
49 | '~plugins/to-iso-date'
50 | ],
51 | router: {
52 | middleware: 'hide-nav'
53 | },
54 | gustavo: gustavoConfig
55 | }
56 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gustavo",
3 | "version": "1.0.0",
4 | "description": "A (mostly) headless blogging platform built atop Nuxt & Gist.",
5 | "author": "Brian Gonzalez /g, '')
32 |
33 | const firstSentence = content.slice(3)
34 | .split('.')[0] + '.'
35 |
36 | return {
37 | id,
38 | content,
39 | path,
40 | meta,
41 | firstSentence
42 | }
43 | },
44 |
45 | parsePost (rawHtml) {
46 | return this.parseItem(rawHtml, '.post.md')
47 | },
48 |
49 | parsePage (rawHtml) {
50 | return this.parseItem(rawHtml, '.page.md')
51 | },
52 |
53 | parsePosts (files) {
54 | return files
55 | .filter(file => file.filename.includes('.post.md'))
56 | .map(raw => this.parseItem(raw, '.post'))
57 | .sort((current, other) => new Date(other.meta.date) - new Date(current.meta.date))
58 | }
59 | }
60 |
--------------------------------------------------------------------------------