关于前端:如何十分钟拥有自己的个人网站

前言

最近想记录一下本人的笔记，于是打算搭建一个博客网站。因为本人对 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',}
  // ...
} 

一个根底的博客网站搭建实现