Skip to content

Commit

Permalink
Added back deleted content to fix build issues
Browse files Browse the repository at this point in the history
  • Loading branch information
ChristianPavilonis committed Dec 4, 2019
1 parent 21b7184 commit 2724969
Show file tree
Hide file tree
Showing 13 changed files with 646 additions and 1 deletion.
33 changes: 33 additions & 0 deletions content/posts/2019-03-02-authors.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: "Adding a post author"
description: "Assigning authors to your blog posts in Bleda for Gridsome"
date: 2019-02-26 15:07:17
tags:
- getting-started
- content
cover:
---

Just like with tags, you can also organise your posts by author.

Simply add an `author: some-name` to your posts' Front Matter, and the author collection and URLs will be automatically generated.

## Multi-author blogs

You can use unique author names to create a 'multi-author' blog. Checkout the [getting started post](/getting-started-with-gridsome-and-bleda/), it's written by a different author.

Note: a post can only have one author.

## Author avatars

Add author avatars in the `/static/images/authors` directory. The name of the file must match the author name in your Front Matter, and it must be a PNG.

For example, `author: john-doe` will use `/static/images/authors/john-doe.png`

If a matching avatar image is not found, or it failed to load, Bleda will try to use `default.png` from the same directory.

## No authors? That's OK.

You don't _have_ to add an author to a post. Posts with no author will simply not show the author name anywhere, and will not be included in the author archive pages.

As you can see, this post was written by a ghost 😉
24 changes: 24 additions & 0 deletions content/posts/2019-03-02-deploying-your-site.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
title: "Deploying your site"
description: "How to deploy and host your static site"
date: 2019-02-25 18:23:53
author: gridsome
tags:
- getting-started
cover: https://images.unsplash.com/photo-1533279443086-d1c19a186416?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&h=900&q=80
---

Seriously, this is a static site.

You could just run `gridsome build` and then upload the entire `dist` folder to any web host.

## Deploy to Netlify 🔥

Simply connect Netlify to your GitHub repo and trigger a site rebuild every time you push to `master`.
Click this wonderful button to get started:

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/hellocosmin/gridsome-starter-bleda)

## Other services

For other services, such as GitLab Pages or Amazon S3, checkout the [Gridsome deploy docs](https://gridsome.org/docs/deploy-to-amazon-s3).
147 changes: 147 additions & 0 deletions content/posts/2019-03-02-getting-started.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
---
title: "Getting started"
slug: getting-started-with-gridsome-and-bleda
description: "Getting started with the Bleda blog starter theme for the Gridsome static site generator"
date: 2019-03-01 14:43:24
author: bleda
tags:
- getting-started
cover: https://images.unsplash.com/photo-1521321205814-9d673c65c167?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80
---

**Bleda** is a minimal blog starter theme for Gridsome, inspired by the design of the [Attila](https://github.com/zutrinken/attila) Ghost theme, and styled with [Tailwind CSS](https://tailwindcss.com).

[Gridsome](https://gridsome.org) 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](https://github.com/cossssmin/gridsome-starter-bleda).

## 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](/2/), [tag](https://gridsome-starter-bleda.netlify.com/tag/dummy/), and [author](/author/gridsome/) 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`:

```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:

```js
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](https://gridsome.org/plugins/@gridsome/plugin-sitemap).

#### RSS Feed

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

```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:

<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-900 leading-normal p-4 md:mx-6 mb-6" role="alert">
This post is over a year old, some of this information may be out of date.
</div>

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

```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 <span class="inline-block bg-blue-lightest border-l-4 border-blue text-blue-darker px-2 py-px stext-sm">blue</span> as a fallback.

#### Post dates in your language

Open `/src/components/PostItem.vue` and `import` your [locale](https://github.com/moment/moment/tree/develop/locale "List of all moment.js locales") after the `moment` import:

```vue
<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](https://gridsome.org/docs) 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.
45 changes: 45 additions & 0 deletions content/posts/2019-03-02-tags.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
title: "Organise content with tags"
description: "Using the tags taxonomy, defined as a collection in Gridsome, to categorise content"
slug: organise-content-tags
date: 2019-02-26 16:44:21
author: gridsome
---

Tags in Bleda are defined in your posts's Front matter.

You can specify them in either YAML format:

```yaml
---
# ... other fields
tags:
- getting-started
- content
---
```

Or in array format:

```yaml
---
# ... other fields
tags: ['getting-started', 'content']
---
```

On archive pages (homepage, tags page, author page), only the first tag will be shown. The single post view will show all tags at the bottom.

## Slug format

Each tag must be written in 'slug' format: `lowercase-words-separated-by-a-dash`

## Case-sensitive

Tag names are case-sensitive. Because of this, you can't have a post tagged `design` and and another one tagged `Design`.

## No tags? No problem!

You don't _have_ to add tags to your posts: if you don't, the archives and single post views will simply not show them.

This post has no tags 😎
Loading

0 comments on commit 2724969

Please sign in to comment.