Yiyang Sun

Love for life and frontend tech.


Hello World from VitePress Theme Linear


A dream theme for VitePress blogs.



Follow guide on the official site to build up your site with default theme first.

Install Theme

  • Install the NPM package.
pnpm i -D vitepress-theme-linear
  • Modify scripts config in your package.json.
  "scripts": {
    "theme": "cd docs/.vitepress/ && rm -rf theme && ln -s ../../node_modules/vitepress-theme-linear/src theme && cd ../../",
    "dev": "npm run theme && vitepress dev docs",
    "build": "npm run theme && vitepress build docs"

Config Theme


Refer to official guide to create the config.ts file.

Theme Config

  • links:
    • type: Array;
    • item:
      • name: String - name of the link item;
      • link: String - url of the link item;
      • icon: String - path to the icon (public assets should be placed at public folder in docs folder);
  • posts: Use getPosts function to generate.

Sample Configuration

Don't worry if module ./theme/config is not found.

import { defineConfigWithTheme } from 'vitepress'
import { ThemeLinearConfig, getPosts } from './theme/config'

const locale = 'en-US'
const timezone = 'Asia/Shanghai'

async function load() {
  return defineConfigWithTheme<ThemeLinearConfig>({
    themeConfig: {
      posts: await getPosts(locale, timezone),
      links: [
        { name: 'GitHub', link: 'https://github.com/syy11cn', icon: '/assets/images/github.svg' },

export default load()

Write Posts

Create posts folder in docs and add markdown files to it.

For Individual pages, create markdown files directly in docs folder.

For static assets, take github.svg as example, place it in docs/public/assets/images/ folder, and then config the icon property in docs/.vitepress/config.ts to '/assets/images/github.svg'.


npm run dev


Design inspired by Evan's and Anthony's blogs.


MIT © 2022 - PRESENT Yiyang Sun

cd ../