Minimal @vuepress/theme-blog setup

daggerok

2020-01-01

Create blog project
Reference

# Create blog project

Create project dir

mkdir -p /tmp/vuepress-theme-blog && cd $_

Initialize npm project
```
npm init -y
```

Install required packages

npm i -E vuepress @vuepress/theme-blog
npm i -E @vuepress/plugin-back-to-top
npm i -E @vuepress/plugin-medium-zoom

Prepare blog files structure

mkdir -p src/.vuepress -p src/_posts
touch src/.vuepress/config.js
touch _posts/2021-01-01-minimal-blog-setup.md

src
├── .vuepress
│   └── config.js
└── _posts
    └── 2021-01-01-minimal-blog-setup.md

Update next files like presented to complete task:

src/.vuepress/config.js

const { name: title, description } = require(`${process.cwd()}/package.json`);
const base = process.env.BASE || '';

module.exports = {
  markdown: {
    extendMarkdown: md => {
      md.use(require('markdown-it-vuepress-code-snippet-enhanced'));
    },
  },
  plugins: [
    '@vuepress/plugin-back-to-top',
    '@vuepress/plugin-medium-zoom',
  ],
  theme: '@vuepress/theme-blog',
  themeConfig: {
    smoothScroll: true,
    dateFormat: 'YYYY-MM-DD',
  },
  evergreen: true,
  description,
  title,
  base,
};

src/_posts/2021-01-01-minimal-blog-setup.md

---
title: Minimal @vuepress/theme-blog setup
summary: |
  This post contains simple instructions and steps which can help you
  to get started with your own blog. This guide was added to demonstrate
  minimal setup needed to build personal blog very fast and cheap
date: 2020-01-01
author: daggerok
tags:
- JavaScript
- VuePress
---

[[toc]]

## Create blog project

* Create project dir
  ```bash
  mkdir -p /tmp/vuepress-theme-blog && cd $_
  ```
* Initialize npm project
  ```bash
  npm init -y
  ```
* Install required packages
  ```bash
  npm i -E vuepress @vuepress/theme-blog
  npm i -E @vuepress/plugin-back-to-top
  npm i -E @vuepress/plugin-medium-zoom
  ```
* Prepare blog files structure
  ```bash
  mkdir -p src/.vuepress -p src/_posts
  touch src/.vuepress/config.js
  touch _posts/2021-01-01-minimal-blog-setup.md
  ```
  ```
  src
  ├── .vuepress
  │   └── config.js
  └── _posts
      └── 2021-01-01-minimal-blog-setup.md
  ```
* Update next files like presented to complete task:
  * `src/.vuepress/config.js`
     
    @[code lang=js](@/src/.vuepress/config.js)
     
  * `src/_posts/2021-01-01-minimal-blog-setup.md`

    @[code lang=js](@/src/_posts/2021-01-01-minimal-blog-setup.md)
     
  * `package.json`
    
    @[code lang=json](@/package.json)

## Reference
* Read according blog post [https://daggerok.github.io/vuepress-theme-blog/]() for details
* [https://vuepress-theme-blog.ulivz.com/#installation]()
* [https://vuepress-theme-blog.ulivz.com/config/]()
* [https://billyyyyy3320.com/en/2020/01/25/intro-to-vuepress-blog-theme-and-plugin/]()
* [https://github.com/billyyyyy3320/Billy]()
* [https://z3by.github.io/vuepress-tools/plugins/]()

package.json

{
  "name": "vuepress-theme-blog",
  "version": "1.0.0",
  "description": "VuePress official blog theme usage example",
  "main": "index.js",
  "scripts": {
    "dev": "vuepress dev src --no-clear-screen --debug --open",
    "prebuild": "rimraf src/.vuepress/dist",
    "build": "vuepress build src --no-cache",
    "build-github-pages": "cross-env BASE='/vuepress-theme-blog/' npm run build",
    "preserve-github-pages": "npm run build-github-pages -- -- --dest src/.vuepress/dist/vuepress-theme-blog",
    "serve-github-pages": "npx browser-sync start --config test/bs-config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "rimraf",
    "vuepess",
    "cross-env",
    "browser-sync",
    "@vuepress/theme-blog",
    "@vuepress/plugin-medium-zoom",
    "@vuepress/plugin-back-to-top",
    "markdown-it-vuepress-code-snippet-enhanced"
  ],
  "author": "Maksim Kostromin <daggerok@gmail.com> (https://github.com/daggerok)",
  "license": "MIT",
  "dependencies": {
    "@mr-hope/vuepress-types": "1.17.0",
    "@vuepress/plugin-back-to-top": "1.8.2",
    "@vuepress/plugin-medium-zoom": "1.8.2",
    "@vuepress/theme-blog": "2.3.3",
    "cross-env": "7.0.3",
    "markdown-it-vuepress-code-snippet-enhanced": "1.0.1",
    "rimraf": "3.0.2",
    "vuepress": "1.8.2"
  }
}