1. Install VuePress
First, execute the following command on the command line to install VuePress globally:
npm install -g vuepress
2. Initialize VuePress
Execute the following command to create a new VuePress project locally:
mkdir my-blog && cd my-blog npm init -y npm install -D vuepress
Then, create a docs directory in the my-blog directory, and create a new README.md file in it as the homepage content.
3. Write blog content
In the docs directory, you can create multiple Markdown files for writing blog or other document content. VuePress uses Markdown to write documents. You can refer to the Markdown syntax for writing.
4. Configure VuePress
Create a new .vuepress directory in the project root directory and create a config.js file to configure VuePress.
module.exports = { title: 'My Blog', // 博客标题 description: 'This is my blog', // 博客描述 themeConfig: { nav: [ { text: '首页', link: '/' }, { text: '博客', link: '/blog/' }, { text: '关于我', link: '/about/' }, ] } }
In the code above, we define the title and description of the blog and configure the navigation bar. Then, create two new directories, blog and about, in the docs directory, and create index.md files in them to display the blog list and personal profile.
5. Start VuePress
Execute the following command on the command line to start VuePress:
vuepress dev docs
Then visit http://localhost:8080/ in the browser , and you can see the locally built blog website.
6. Deploy blog website
When using VuePress to build a blog website, the static files generated by VuePress compilation need to be deployed to the server. It is recommended to use GitHub Pages for deployment.
First, create a repository with the same name as the blog website on GitHub and submit the code to the master branch of the repository.
Then, execute the following command in the project root directory to publish the static files generated by compiling the blog website to GitHub Pages:
npm run deploy
Note that before executing this command, you need to add the deploy script in package.json as follows:
{ "scripts": { "deploy": "vuepress build docs && gh-pages -d docs/.vuepress/dist" } }
After the execution is completed, you can see the successfully deployed blog website in the settings page of the GitHub repository.