Build a blog with Peco

Peco is a static website generator which is similar to Hexo except that it’s built upon webpack and Vue server renderer.

To get started:

mkdir my-blog
cd my-blog
yarn init -y
yarn add peco

Then you can create a config file peco.config.yml here:

title: My Blog
description: I'm writing some bs here.

Run yarn peco dev in this directory and you can see your lively blog in seconds.

For actual writing, it’s actually the same as Hexo, you populate pages at source/*.md and posts at source/_posts/*.md . For example:

📝 source/about.md:

---
title: About me
---
Let me introduce myself, my name is __EGOIST__
...

Then you can visit this page via /about .

📝source/_posts/hello-world.md

---
title: Hello World
date: 2018-04-30
---
> Just saying...

This post will also be available at /2018/04/30/hello-world .

Theming

You can use custom layout component for pages and posts, Peco currently does not have a fancy default theme (but an ugly one), but it’s pretty easy to write your own themes.

📝 peco.config.yml:

theme: ./theme

Then Peco will use ./theme/layouts/index.vue for homapge, ./theme/layouts/page.vue for pages and ./theme/layouts/post.vue for posts.

Every layout component accepts a page prop which is basically parsed front-matter and markdown body:

interface Page {
  // front-matter
  attributes: {
    [k: string]: any
  }
  // html
  body: string
  // link to the page
  permalink: string
  // slugified filename
  slug: string
}

For the layout component of homepage, the page has two extra keys:

// An array of posts
posts: Page[]
pagination: {
  hasPrev: boolean
  hasNext: boolean
  prevLink: string
  nextLink: string
  total: number
  current: number
}

For reference, my blog has been migrated to Peco, you can check out the source here, or visually see how fast/performant it is (hosted on Netlify.com).

For advanced usages, please check out the docs.