从零带你用VuePress来搭建个人网站

╰半夏微凉° 2023-07-05 14:48 13阅读 0赞

VuePress可以让你非常方便的在Markdown文档中编写Vue代码，VuePress会为每个页面预渲染生成静态的HTML,同时，每个页面被加载的时候，将作为SPA运行

这里我将带大家一步步用VuePress来搭建个人网站  
![cmd-markdown-logo][]

## 环境搭建 ##

### 查看node的版本号 ###

node -v

node.js的版本号必须要大于等于8才可以

### 全局安装vuepress ###

yarn global add vuepress

或者

npm install -g vuepress

### 检查vuepress是否安装成功 ###

vuepress -v

### 创建一个文件夹 ###

mkdir sxm_vuepress

### 切换到新建文件夹目录 ###

cd sxm_vuepress

### 初始化项目 ###

npm init -y

通过npm init快速创建项目的package.json文件

### 新建docs文件夹 ###

mkdir docs

新建的docs文件夹作为项目文档更目录，主要放置Markdown类型的文章和.vuepress文件

### 切换到docs目录 ###

cd docs

### 创建.vuepress文件夹 ###

mkdir .vuepress

.vuepress目录是放置所有的vuepress特有文件的地方

### 切换到.vuepress目录 ###

cd .vuepress

### 创建config.js文件 ###

touch config.js

用来放配置文件

### 再创建public文件夹 ###

mkdir public

用来存放公共图片

### 再创建README.md文件 ###

这个是在docs目录下创建README.md文件

touch README.md

用来存放首页配置文件

接下来就用编辑器打开

## 基础配置 ##

### 在config.js里面添加内容 ###

module.exports = {
        title: '小明同学的技术博客', 
        description: '查阅知识',
        themeConfig: {
            search: true,//搜索
            searchMaxSuggestions: 10,
        }
    }

这里的"title"是所有页面标题的前缀，显示在默认主题的导航栏中

这里的"description"是网站描述

### 在README.md里面添加内容 ###

---
    home: true # 标记此页面是否为首页
    lang: zh-CN # 表示本页面的语言为zh-CN(简体中文)
    heroText: 石小明的技术博客 # 首页的标题内容
    actionText: Get Started → # 首页跳转按钮的内容
    features: #  表明首页的特征，固定的格式为title + details，以三栏流式布局的方式展示
      - title: 博客
        details: 专注前端学习，记录点点滴滴
      - title: 关于我
        details: 一个前端工程师。
      - title: 技能
        details: Vue全家桶，React全家桶
    footer: shixiaoming | Copyright © 2020-present Evan You # 为底部内容，与普通的网页一样，我们可以在footer里面写版权信息
    ---

### 在package.json里面添加内容 ###

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

### 运行 ###

npm run docs:dev

### 运行效果 ###

![cmd-markdown-logo][cmd-markdown-logo 1]

## 导航配置 ##

### 在config.js里面添加 ###

// 导航栏
            nav: [
              { text: '首页', link: '/' },
              { text: '前端技术', link: 'page1/' },
              { text: '个人文章', items: [
                { text: '掘金', link: 'https://juejin.im/user/5c8f3303f265da612d633276' },
                { text: 'segmentfault', link: 'https://segmentfault.com/u/helloxiaoming' },
                { text: 'CSDN', link: 'https://blog.csdn.net/qq_40588413' }
              ]}
            ]

### 运行效果 ###

![cmd-markdown-logo][cmd-markdown-logo 2]

## 侧边栏配置 ##

### 创建一个page1文件 ###

在page1里面创建4了个文件

我的截图  
![cmd-markdown-logo][cmd-markdown-logo 3]

### 在config.js添加 ###

// 侧边栏
    sidebar: [
        {
          title: 'HTML',
          collapsable: true,
          children: [
            'page1/',
            'page1/新增标签',
            'page1/BOM',
            'page1/DOM'
          ]
        }
    ],

### 在README.md里添加 ###

actionLink: /page1/ # 页跳转按钮的路径

### 运行效果 ###

![cmd-markdown-logo][cmd-markdown-logo 4]

然后每个页面内容就用markdown语法来写

## 更改默认主题色 ##

### 创建一个override.styl文件 ###

在.vuepress目录下创建一个override.styl文件  
vuepress提供四个可更改的颜色：

$accentColor = #3eaf7c // 主题色
    $textColor = red // 文字颜色
    $borderColor = #eaecef // 边框颜色
    $codeBgColor = #282c34 // 代码背景颜色

### 运行效果 ###

![cmd-markdown-logo][cmd-markdown-logo 5]

## 部署 ##

命令行里面执行：

vuepress build

当出来下边这一行代码就说明打包成功了

Success! Generated static files in vuepress

再将打包好的vuepress目录上传到github，  
和github page配合，就可以配置好你的个人网站

## 最后 ##

如果本文对你有帮助得话，给本文点个赞❤️❤️❤️

欢迎大家加入，一起学习前端，共同进步！  
![cmd-markdown-logo][cmd-markdown-logo 6]  
![cmd-markdown-logo][cmd-markdown-logo 7]

[cmd-markdown-logo]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzE1LzE3MDQ4ZGUwZWFiYTc1MWM?x-oss-process=image/format,png
[cmd-markdown-logo 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzE1LzE3MDQ3MGRiNDhiZDFkYTI?x-oss-process=image/format,png
[cmd-markdown-logo 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzE1LzE3MDQ3MTMzMjUyMWMyNTc?x-oss-process=image/format,png
[cmd-markdown-logo 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzE1LzE3MDQ3MjE0YzMwN2JjNzA?x-oss-process=image/format,png
[cmd-markdown-logo 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzE1LzE3MDQ3MjJkYzBlOTM0Yjk?x-oss-process=image/format,png
[cmd-markdown-logo 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzE1LzE3MDQ3NDdhYjFlMjJlNGE?x-oss-process=image/format,png
[cmd-markdown-logo 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzIyLzE3MDZjNGUzNmNhZjkzZmI?x-oss-process=image/format,png
[cmd-markdown-logo 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8yLzIyLzE3MDZjNGU4YjExZDBjZTY?x-oss-process=image/format,png