只需简单三步，教你使用Vuepress搭建一个漂亮博客

最终效果，可以到我博客查看my blog

需要工具

• node
• Git
• Github账号

image-20211027214245140

VuePress

VuePress是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。

Vuepress不止可以这样

image

还可以是这样

image-20211027214739567

开始

运行环境需要依赖node，所以在安装之前，请确保操作系统已经安装了node，我运行时的版本为v14.17.3

安装node可查看node 安装

初始化博客

• 在本地创建一个新文件夹blog-demo,在此文件夹进入cmd，使用npm init命令初始化，你会得到一个package.json文件

image

image

安装依赖及主题

在此blog-demo文件夹内，进入cmd窗口中，运行下面两个命令

• 安装依赖

  npm i [email protected]
  npm i vuepress-theme-aurora
  

image

配置package.json

• 将下面内容复制替换package.json中的scripts项(如果你没有编辑器，那么推荐下载notepad++)notepad++

  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "vuepress dev docs",
      "build": "vuepress build docs",
      "deploy": "bash deploy.sh"
    },
  

image

使用主题

1.配置config.js

在docs/.vuepress/config.js下，添加下面内容(docs,.vuepress,config.js都需要你自己创建)

module.exports = {
    //设置head 一定要加入项配置，否则一些图标不能正常显示
    head: [
        [
            "script",
            {
                src: "https://at.alicdn.com/t/font_2849934_v6y652peian.js",
            },
        ]
    ],
    theme: 'aurora',
    themeConfig: {
        darkMode: false,
    }
};

image

2.使用

运行

npm run dev

image

运行成功之后，会出现一个地址，你只需要在浏览器中，输入这个地址，就可以看到下面的页面

image-20211010232918219

恭喜你，你已经搭建成功了，是不是很简单!!

接下来，你可以简单的发布第一篇文章

发布文章

因为Vuepress会自动将docs/xx.md文件，解析成xx.html，在此docs文件夹下，创建.md文件就可以了

image-20211027220025857

然后在此我的第一篇Vuepress文章.md中，随便写点什么

# 这是一个标题

随便写点啥

记得创建一个新md文件之后，需要重新运行npm run dev命令

然后你便可以在站点首页看到这篇文章了

image-20211027220843170

image-20211027220902018

配置博客

你如果按照上面步骤进行搭建，那么你博客什么也没有，你看到的都是默认配置

为了更好的对博客进行配置，你可以到GitHub的config.js，复制所有的配置，进行更改

Vuepress的配置文件为docs/.vuepress/config.js

我从github中，复制下来之后，在浏览器中看到的最终效果为

image-20211027221834768

修改导航栏

这里演示导航栏的修改

在config.js内，找到navbar项，此项便是修改导航栏的，具体配置，可以查看Vuepress navbar的配置

image-20211027222204941

修改站点logo文字

image-20211027222253292

1. 根据aurora主题文档的描述
2. 在config.js下，找到此项，然后对该项进行修改

image-20211027222437502

image-20211027222551847

成功修改

image-20211027222727521

如果你们修改之后，在浏览器中，打开没有效果，这是因为你们没有重新运行npm run dev命令，每次修改config.js内容，都需要重新运行npm run dev命令

结束

使用Vuepress搭建博客，只需要简单的几步便可以了，下面是用到的所有链接

• Vuepress
• Aurora Theme
• Github
• Aurora主题所有配置

关于如何部署，我改天的时候，再写一篇关于部署的文章，你也可以看一下这篇部署
，如果你有任何疑问，可以在我博客中，联系我