-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added back deleted content to fix build issues
- Loading branch information
1 parent
21b7184
commit 2724969
Showing
13 changed files
with
646 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 😉 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 😎 |
Oops, something went wrong.