Vuepress build your own blog from scratch

What is vuepress?

Vuepress is a static website builder driven by vue. It is a single-page application driven by Vue, vue router, and webpack. In vuepress, you can use markdown to write a document and then generate a webpage. Every page generated by vuepress contains pre-rendered HTML, which provides excellent loading performance and search engine optimization. At the same time, once the page is loaded, vue takes over the static content and converts it into a complete single-page application, other pages are loaded only when the user browses them.

For more information, see vuepress official documentation.

Vuepress features

• Built-in markdown expansion optimized for technical documents
• Ability to use vue components in markdown files
• Vue-driven custom theme System
• Automatically generate service worker (PWA supported)
• Google Analytics Integration
• Git-based "Last Update Time"
• Multi-language support
• Responsive Layout

Environment setup and Installation

Vuepress supports the use of yarn and NPM for installation. The node. js version must be greater than or equal to 8.

Install vuepress globally

Yarn global add vuepress # Or: NPM install-G vuepress

Create a project directory

mkdir projectcd project

Initialize a project

Yarn init-y # Or NPM init-y

Create a Docs folder

As the root directory of the project documentation, the docs folder mainly contains articles of the markdown type and the. vuepress folder.

mkdir docs

Set package. JSON

Vuepress has two commands. The vuepress Dev docs command runs the local service and you can preview the website by accessing http: // localhost: 8080. The vuepress build docs command is used to generate static files. By default, placed in docs /. vuepress/Dist directory, of course, you can also /. vuepress/config. modify the default storage directory by using the Dest field in Js. Here, we can encapsulate the two commands as scripts and directly use NPM run docs: Dev and NPM run docs: build.

{  "scripts": {    "docs:dev": "vuepress dev docs",    "docs:build": "vuepress build docs"  }}

Create a. vuepress directory

Create the. vuepress directory in the docs directory. The. vuepress directory is mainly used to store files related to vuepress.

mkdir .vuepress

Create config. js

Go to the. vuepress directory, and create config. js. config. JS is a necessary configuration file for vuepress, which exports a JavaScript Object of Y.

touch config.js

Create a public folder

Go to the. vuepress directory and create a public folder. This folder mainly contains static resource files, such as the icons of favicons and PWA.

mkdir public

At this point, the project structure is almost out.

project├─── docs│   ├── README.md│   └── .vuepress│       ├── public│       └── config.js└── package.json

The above is just a simple setup of the blog development environment, followed by the main basic configuration of the blog config. JS, it is also necessary.

Basic Configuration

The main configuration of a config. js file includes the website title, description, and other basic information, as well as the configuration of the topic. Here we will briefly list common configurations.

Website Information

Module. exports = {Title: 'Personal homepage ', Description: 'jiang shuaijie's blog', head: [['link', {rel: 'icon ', href: '/img/logo. ICO '}], ['link', {rel: 'manifest', href: '/manifest. JSON '}],]}

• Title: website title
• Description: website description
• Head: additional tags that need to be injected into the HTML "head" of the current page. The path "/" is the public resource directory.

For specific configuration details, see the document: Configuration

Topic Configuration

Module. exports = {themeconfig: {NAV: [{text: 'homepage', link: '/'}, {text: 'blog', items: [{text: 'android ', link: '/Android/'}, {text: 'ios ', link:'/IOS/'}, {text: 'web', link: '/web/'}]}, {text: 'about ', link:'/about/'}, {text: 'github', link: 'https: // www.github.com/codeteenager'},], sidebar: {'/Android/': ["", "android1",...], "/IOS/": ["", "ios1",], "/web/": ["", "web1",...],}, sidebardepth: 2, lastupdated: 'Last updated ',},}

• NAV: navigation bar configuration. This configuration is mainly used to configure the link of the navigation bar. For example, if the link of the preceding homepage is "/", the default value is readme. MD in the root directory. "/Android/" link to the readme. md file in the android folder under the root directory docs.

• Sidebar: configure the sidebar. You can omit the. md extension name and the path ending with/will be treated as */readme. md. '/Android/', '/IOS/', and '/web/' are the headers of each page by routing. "/Android/" indicates the routes in the android folder under the root directory. Each route link must have readme. md. The directory structure is as follows:

  ├─── docs├── README.md└── android│   └── README.md└── ios   └── README.md

• Sidebardepth: Nested title link depth. The default depth is 1.
• Lastupdated: The Last Update time.

Sidebar

For details about topic configuration, see the document: topic configuration.

PWA Configuration

Vuepress supports the PWA configuration by default. You need to enable serviceworker in the basic configuration.

module.exports = {     serviceWorker: true,}

Then add the icons and manifest configurations, and add the manifest. JSON configurations and icons to the public. If you do not know PWA, you can go to PWA configuration to view relevant information.

{"Name": "Jiang Shuai Jie", "short_name": "Jiang Shuai Jie", "start_url": "index.html", "display": "standalone", "background_color ": "#2196f3", "Description": "personal homepage of Jiang shuaijie", "theme_color": "blue", "icons": [{"src ":". /logo.png "," sizes ":" 144x144 "," type ":" image/PNG "}]," related_applications ": [{" Platform ": "Web" },{ "Platform": "play", "url": "https://play.google.com/store/apps/details? Id = cheeaun. hackerweb "}]}

Add manifest. JSON to config. js configuration. Because iPhone 11.3 does not support manifest icons, add the apple-touch-icon configuration.

module.exports = {    head: [            [‘link‘, { rel: ‘manifest‘, href: ‘/manifest.json‘ }],            [‘link‘, { rel: ‘apple-touch-icon‘, href: ‘/img/logo.png‘ }],          ]}

Finally, visit the website on the iPhone and add the home screen.

Custom page

The default topic provides a home page layout (used for the home page of this website ). To use it, you need to add data in the home: true of your root-level readme. md.

--- Home: trueheroimage:/hero.png actiontext: Quick Start → actionlink:/zh/GUIDE/features:-title: Concise to details: project structure centered on markdown, helps you focus on writing with minimal configuration. -Title: Vue-driven details: Enjoy the development experience of Vue + webpack, use the Vue component in markdown, and use vue to develop custom themes. -Title: high-performance details: vuepress generates static HTML for each page pre-rendering, and runs as a spa when the page is loaded. Footer: MIT licensed | copyright? 2018-present Evan you ---

The effect is as follows:

If you want to customize the homepage or other pages, you can add the Vue file in the MD file on the page. The vue file is stored in the docs/. vuepress/components directory.

---layout: HomeLayout---

For example, the custom homepage of my blog:

Deployment online

Because static pages are generated during building, you can deploy the content in the DIST folder on pages of GitHub or pages of coding. If you use git to upload files to GitHub, the operations are cumbersome. Here, you can use scripts to automatically deploy the files to GitHub.

Create a deploy. Sh

Create deploy. Sh in the project.

touch deploy.sh

Write scripts

#! /Usr/bin/ENV sh # Make sure the error set-E is thrown by the script # generate the static file NPM run docs: build # enter the generated folder CD docs /. vuepress/Dist # If it is published to a custom domain name # echo 'www .example.com '> cnamegit initgit add-agit commit-m'ploy' # If it is published to https: // <username>. gitHub. io # git push-f [email protected]: <username>/<username>. gitHub. io. git master # If published to https: // <username>. gitHub. IO/<repo> # git push-f [email protected]: <username>/<repo>. git master: GH-pagescd-

Set package. JSON

{    "scripts": {        "deploy": "bash deploy.sh"      },}

Run NPM run deploy to automatically build and deploy on GitHub.

Vuepress build your own blog from scratch