From 2724969c63673cc5b63228e18f6ed94e14e67033 Mon Sep 17 00:00:00 2001 From: Christian Date: Wed, 4 Dec 2019 14:48:31 -0600 Subject: [PATCH] Added back deleted content to fix build issues --- content/posts/2019-03-02-authors.md | 33 +++ .../posts/2019-03-02-deploying-your-site.md | 24 +++ content/posts/2019-03-02-getting-started.md | 147 +++++++++++++ content/posts/2019-03-02-tags.md | 45 ++++ content/posts/2019-03-02-writing-posts.md | 193 ++++++++++++++++++ .../posts/dummy/adventures-sherlock-holmes.md | 38 ++++ content/posts/dummy/bleda-the-hunnic-ruler.md | 28 +++ content/posts/dummy/bob-ross-quotes.md | 26 +++ .../posts/dummy/extraterrestrial-sightings.md | 27 +++ content/posts/dummy/jeffsum.md | 32 +++ .../posts/dummy/key-to-prototyping-tool.md | 28 +++ content/posts/dummy/sweetest-ipsum.md | 23 +++ src/pages/Index.vue | 3 +- 13 files changed, 646 insertions(+), 1 deletion(-) create mode 100755 content/posts/2019-03-02-authors.md create mode 100755 content/posts/2019-03-02-deploying-your-site.md create mode 100755 content/posts/2019-03-02-getting-started.md create mode 100755 content/posts/2019-03-02-tags.md create mode 100755 content/posts/2019-03-02-writing-posts.md create mode 100755 content/posts/dummy/adventures-sherlock-holmes.md create mode 100755 content/posts/dummy/bleda-the-hunnic-ruler.md create mode 100755 content/posts/dummy/bob-ross-quotes.md create mode 100755 content/posts/dummy/extraterrestrial-sightings.md create mode 100755 content/posts/dummy/jeffsum.md create mode 100755 content/posts/dummy/key-to-prototyping-tool.md create mode 100755 content/posts/dummy/sweetest-ipsum.md diff --git a/content/posts/2019-03-02-authors.md b/content/posts/2019-03-02-authors.md new file mode 100755 index 0000000..c9c2d38 --- /dev/null +++ b/content/posts/2019-03-02-authors.md @@ -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 😉 diff --git a/content/posts/2019-03-02-deploying-your-site.md b/content/posts/2019-03-02-deploying-your-site.md new file mode 100755 index 0000000..3f3f49b --- /dev/null +++ b/content/posts/2019-03-02-deploying-your-site.md @@ -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). diff --git a/content/posts/2019-03-02-getting-started.md b/content/posts/2019-03-02-getting-started.md new file mode 100755 index 0000000..bba93e7 --- /dev/null +++ b/content/posts/2019-03-02-getting-started.md @@ -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: + + + +This is a flexible alert component, defined in `/src/components/Alert.vue` and pulled into `/src/templates/Post.vue`: + +```vue + +``` +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](https://github.com/moment/moment/tree/develop/locale "List of all moment.js locales") after the `moment` import: + +```vue + +``` + +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. diff --git a/content/posts/2019-03-02-tags.md b/content/posts/2019-03-02-tags.md new file mode 100755 index 0000000..4613d5d --- /dev/null +++ b/content/posts/2019-03-02-tags.md @@ -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 😎 diff --git a/content/posts/2019-03-02-writing-posts.md b/content/posts/2019-03-02-writing-posts.md new file mode 100755 index 0000000..c11e231 --- /dev/null +++ b/content/posts/2019-03-02-writing-posts.md @@ -0,0 +1,193 @@ +--- +title: "Writing posts" +description: "Writing posts in Markdown with Bleda for Gridsome" +date: 2019-02-28 15:16:11 +author: gridsome +slug: writing-posts-markdown +tags: + - getting-started + - content +cover: https://images.unsplash.com/photo-1539815913963-92c9bfeb9d1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&h=900&crop=bottom&q=80 +--- + +The starter uses Gridsome's filesystem source plugin, which means blog posts are Markdown files that exist in the `/content/posts` directory. + +## Creating a new post + +There are 2 ways you can create a new post with Bleda: + +1. Simply add a new, uniquely-named `*.md` file in the `/content/posts` directory - duh! +2. In your terminal, navigate to the project root and run this command: + + ```sh + npm run newpost "My post title" + ``` + + The quotes around the title are mandatory. + + This will create a new file named `YYYY-MM-DD-my-post-title.md` under `/content/posts`. + +## Supported Front Matter keys + +You can use the following Front Matter keys when creating a post: + +```yaml +--- +title: "Post title" # required +slug: post-title-custom-url # optional, override the auto-generated post slug +description: "Lorem ipsum description sit amet" # required, used in meta tags and RSS feed +date: 2019-03-01 17:54:43 # required; time is optional, but recommended for the