如何十分钟拥有自己的个人网站

前言

最近想记录一下自己的笔记，于是打算搭建一个博客网站。由于自己对vue比较熟悉，选择了VuePress进行搭建。VuePress是以Vue 驱动的静态网站生成器，以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。最后整理自己的搭建过程形成了本篇博客。

实现的技术栈

• VuePress
• vuepress-theme-reco

起步

初始化

• 创建一个文件夹并命名为myblog,在编辑器打开
• 打开终端窗口进行初始化

npm init

• 安装VuePress

npm install -D vuepress

• 在根目录下创建一个文件夹命名为docs,文件夹中创建文件命名为README.md，在文件中写上hello world保存
• 在package.json中加入下面内容

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

• 启动项目，终端运行下面的命令

npm run dev

最后在浏览器中的http://localhost:8080打开项目

项目配置

在docs文件夹下创建文件夹命名为.vuepress,并在其下创建文件config.js,这是整个项目的配置文件。在config.js配置网站标题和描述，添加网站导航栏配置

module.exports = {
    title: 'myblog',
    description: 'myblog',
    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            { 
                text: '我的博客', 
                items: [
                    { text: 'Github', link: 'https://github.com/by3679512' },
                    { text: '掘金', link: 'https://juejin.cn/user/1799217731347255/posts' }
                ]
            }
        ]
    }
}

在浏览器打开效果如下：

更换主题

为了让页面更加美观，实现更多功能和效果，我们将用第三方主题辅助开发，本项目使用的主题是vuepress-theme-reco

vuepress-theme-reco是一个vuepress主题，旨在添加博客所需的分类、TAB墙、分页、评论等能；
主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用；
本文只配置了基础内容，更多主题配置请看官网

• 下载vuepress-theme-reco

npm install vuepress-theme-reco --save-dev

• 引入主题
  在config.js添加

module.exports = {
  // ...
  theme: 'reco'
  // ...
} 

刷新页面，会发现增加了部分内容

仔细发现hello world出现了两次，这是因为vuepress-theme-reco会获取每篇md的第一个大标题作为自己的标题

我们只要在md头部加上以下内容即可

---
title: 标题
author: 舟羽
date: '2023-3-26'
categories:
 - 网站
tags:
 - 网站
---

categories和tags标签会在下面导航栏部分介绍

此时页面效果更新如下

• 导航栏优化

在config.js下配置导航栏的分类和标签

module.exports = {
  // ...
  themeConfig: { 
      blogConfig: {
        category: {
          location: 2,     // 在导航栏菜单中所占的位置，默认2
          text: '分类' // 默认文案 “分类”
        },
        tag: {
          location: 3,     // 在导航栏菜单中所占的位置，默认3
          text: '标签'      // 默认文案 “标签”
        },
    },
  }
  // ...
} 

在文章顶部添加的category和tags标签，reco会自动更新到对应位置

• 首页主题优化

找到README.md文件，更改内容为

---
home: true
heroText: null
---

然后在config.js配置代码如下

module.exports = {
  // ...
  themeConfig: { 
    type: 'blog'
  }
  // ...
} 

首页优化后的效果如下

• 添加头像

在.vuepress目录下创建public目录,在这里存放头像

在config.js配置代码如下

module.exports = {
  // ...
  themeConfig: { 
      authorAvatar: '/avatar.jpg',
  }
  // ...
} 

一个基础的博客网站搭建完成