Getting started

This post is over a year old, some of this information may be out of date.

Bleda is a minimal blog starter theme for Gridsome, inspired by the design of the Attila Ghost theme, and styled with Tailwind CSS.

Gridsome is a Vue.js-powered, modern site generator for building the fastest possible websites for any Headless CMS, APIs or Markdown-files. Gridsome makes it easy and fun for developers to create fast, beautiful websites without needing to become a performance expert.

Installation

After installing Gridsome, run:

gridsome create my-website https://github.com/cossssmin/gridsome-starter-bleda.git

Then, cd my-website and gridsome develop to start a local development server.

Alternatively, you can clone or download the repo on GitHub.

Features

Sitemap
RSS Feed
Google Analytics
Custom 404 Page
Open Graph meta tags
Code syntax highlighting
Parallax post image covers
Option for fullscreen covers
Medium-like image lightbox
Taxonomies: Tags and Authors
Aproximate read time for posts
Post excerpts: automatic or user-defined
Paginated blog, tag, and author archives
Easily show post dates in your locale (moment.js)
Posts show a warning if they're older than 1 year (configurable)

Configuration

You'll need to change some Bleda defaults before deploying your own site.

Google Analytics

If you want to use Google Analytics, make sure to change the default tracking code in gridsome.config.js:

{
use: '@gridsome/plugin-google-analytics',
  options: {
    id: 'UA-135446199-1' // <- change this
  }
}

To disable GA, simply comment out or delete that entire code block.

Sitemap

Bleda uses Gridsome's official sitemap plugin. Simply change the default siteUrl in gridsome.config.js, and you're all set:

siteUrl: 'https://gridsome-starter-bleda.netlify.com',

When you build the site, a sitemap.xml will be automatically generated at the root of your site. Read more in the plugin's documentation.

RSS Feed

Update the feed title and all the default URLs, in gridsome.config.js:

{
  use: 'gridsome-plugin-rss',
  options: {
    contentTypeName: 'Post',
    feedOptions: {
      title: 'Bleda, a Gridsome blog starter', // <- update
      feed_url: 'https://gridsome-starter-bleda.netlify.com/feed.xml',  // <- update, leave the file name
      site_url: 'https://gridsome-starter-bleda.netlify.com'  // <- update
    },
    feedItemOptions: node => ({
      title: node.title,
      description: node.description,
      url: 'https://gridsome-starter-bleda.netlify.com/' + node.slug,  // <- update
      author: node.author,
      date: node.date
    }),
    output: {
      name: 'feed.xml' // <- if you change this, also change it in the `feed_url` above
    }
  }
},

Customisation

Old content alert

Posts that are over one year old will show a warning like this one:

This post is over a year old, some of this information may be out of date.

This is a flexible alert component, defined in /src/components/Alert.vue and pulled into /src/templates/Post.vue:

<template>
    ...
    <alert v-if="postIsOlderThanOneYear" color="orange">This post is over a year old, some of this information may be out of date.</alert>
    ...
</template>

The postIsOlderThanOneYear computed property uses moment.js, so you can customise it to any date you need.

The color prop can be any color name from your tailwind.js config. If you omit it, the alert will use blue as a fallback.

Post dates in your language

Open /src/components/PostItem.vue and import your locale after the moment import:

<script>
import moment from 'moment'
import 'moment/locale/ro' // <- add this

export default {
  // ...
}
</script>

For the single post view, do the same in /src/templates/Post.vue.

Advanced customisation

The Gridsome documentation is a great place to start. You will need to be familiar with Vue.js, mostly. Tailwind CSS is very easy to pick up. For advanced customisation, you'll also need to know a bit about GraphQL.