How to construct a VuePress website

Category:

Tags:

Last Updated: 2021/12/13 12:40:54

I built this site after re-constructing VuePress 4 times.

If you want to construct a VuePress site as a blog or something, you need to try a various customizations, but at first , in this article, I'll write how to construct a basic VuePress site.

For your information, the reasons for three failures are following:

Try to use npm forcibly on Vitepress. (Official site says yarn is more recommended)
Didn't realize VitePress does not support plugins. (written in Differences from VuePress (opens new window))
I tried to customize category and tags like WordPress and I made source code full of mess.

# Install VuePress

You can do it just like this.

$ yarn create vuepress-site press
$ cd press/docs/
$ yarn install 
$ yarn dev

1
2
3
4

First, I tried to use VitePress, but I need some plugins, so I re-construct VuePress. If you don't need any plugins and you don't care other rectrictions, VitePress is also one of good options.

# Modify config.js

Reading Official Guide (opens new window), modify configurations.

module.exports = {
	title: 'Web Ninja Press',
	description: 'WEB最適化のための技術的な情報発信をしています。',
	base: '/press/', // Optional 
	lang: 'en-US', // Language

	head: [
		// meta tags or something.
		// On `yarn dev`, tags are not written in source code itself and dynamically added to <head> element.
		// However, on `yarn build`, tags are added Statically onto HTML files.
		['meta', { name: 'theme-color', content: '#3eaf7c' }],
	],
	themeConfig: {
		logo: '/logo.png',
		nav: [
			{
				text: 'Home',
				link: '/',
			},
		],
		sidebar: 'auto', 
		footer: "Copyright © 合同会社ups-and-downs All Rights Reserved.",
	}, 
	markdown: {
		// true if you want to show line numbers on markdown
		lineNumbers: true,

		// @see https://vuepress.vuejs.org/plugin/option-api.html#extendmarkdown
		extendMarkdown: (md) => {
			md.set({ breaks: true }); // whether <br /> tags are necessary
		},
	},
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

You can put static files such as logo.png in themeConfig.logo into .vuepress/public/, then they are copied into the root directory.

# modify index.md (Home)

docs/index.md will be index.html (Home).

---
home: true
heroImage: /logo.png
heroAlt: Logo image
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started
actionLink: /guide/
features:
- title: Simplicity First
	details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
	details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
	details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2019-present Evan You
---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

heroImage is a image file and its path should be from the root directory, so if you write /logo.png in heroImage , you need to put logo.png in .vuepress/public/. Actually I tried various ways, and I suppose this heroImage is just joined to base in config.js.

# Build

Then type yarn dev and　you can access to http://localhost:8080/.

$ yarn dev

You can build the site by yarn build and built files are created in .vuepress/dist directory, and you can upload this files to your server.

$ yarn build
$ rsync ... # upload

1
2