【个人网站开发 · 记录四】开发阶段一 —— 原生VuePress开发（上）手动搭建个人博客网站的详细记录

最新推荐文章于 2022-07-28 22:54:21 发布

Code_Zevin_J

最新推荐文章于 2022-07-28 22:54:21 发布

阅读量951

点赞数 1

本文链接：https://blog.csdn.net/JZevin/article/details/108857149

版权

个人网站专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

当下的自媒体时代，体现在一个爱折腾的程序猿身上，那么最好的方式莫过于 —— 搭建自己的个人网站。网站上可以有自己的个人介绍，技术博客，项目总结，生活分享等等。简直是COOL ！（面试神器有木有🐶）

在这里插入图片描述
就像上图这样，绝对原创设计，盗图必究！🐶

有了想法就去实现它！这里就做成一个链接合集，记录一下我本次项目的开发历程（有觉悟的童鞋建议跟我一起动手哦）：

【个人网站开发 · 记录一】立项分析阶段 —— 产品角度分析如何去做一个个人网站
【个人网站开发 · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站
【个人网站开发 · 记录三】制定开发方案阶段 —— 技术角度分析如何去做一个个人网站
【个人网站开发 · 记录四】开发阶段一 —— 原生VuePress开发（上）手动搭建个人博客网站的详细记录

🏆 开发阶段一 —— 原生VuePress开发（上） 🏆

文章目录

初次开发的这个阶段推荐大家参考着官方文档一块来：VuePress官方文档 👈

一. VuePress环境搭建

这一步要确保你的电脑上已经安装好了Node.js（version >= 8.6）和npm环境，有需要的童鞋可以先去补课：
（一个优秀的程序猿必备的环境，不会吧 ? 真有人需要补课？好好反省一下！🐶 ）

【 windows10系统】npm（cnpm）简介 + 最新版详细安装教程

在这里插入图片描述
VuePress框架可以使用npm命令全局安装：

npm install -g vuepress

这里官网上有说明，不推荐全局安装 VuePress 框架。 因为后续开发过程中可能会出现诡异的BUG。这时如果你是全局安装的VuePress环境，可以试试在该项目中再局部安装一次VuePress环境，看能否解决问题。

当然使用全局安装的优点也很明显，不用每次都安装，等到出问题了大不了再局部安装呗！是吧？🐶

二. 手动搭建VuePress项目

不管你是否选择了全局安装VuePress环境，都可以继续接下来的开发（铺垫了仿佛一个世纪，终于要来了吗！？）

2.1 创建并进入项目

在你认为合适的路径下创建项目文件（名字随意，我这里为vuepress-demo ）。

mkdir vuepress-demo && cd vuepress-demo

这里继续使用cmd键入命令或者直接打开IDE工具（推荐vscode）都可。

2.2 npm初始化项目

使用npm命令初始化该项目，-y 代表所有配置项均设为默认值的快速初始化。

npm init -y

在这里插入图片描述
配置完成后项目内会生成一个package.json文件。打开你的IDE工具（可在命令行中使用code . 命令，即使用你的默认IDE工具快速打开当前文件），继续在其中添加如下的配置信息：

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

当然，你会发现，我这个和官网版本不一样。对比也只是命令的关键字不同，无伤大雅。

2.3 局部安装VuePress（可跳过）

之前全局安装过的可跳过这一步：

npm install -D vuepress

安装完成后，会出现一个node_modules的文件夹。（全局安装的VuePress这里是没有的）

2.4 创建基本项目结构

由于我们这一节中选择的是使用VuePress原生开发，并未借助CLI工具（后续阶段会用到）。所以项目的目录结构还是需要我们自己手动创建的。

在官网文档中有推荐的目录结构，对小小白来说还是挺繁琐的。这里我们可以简单如下创建：
（有后缀的是文件，没后缀的是文件夹）

vuepress-demo
├─package.json
├─docs  
|  ├─README.md
|  ├─.vuepress  //用于存放全局的配置、组件、静态资源等。
|  |     ├─config.js  //配置文件的入口文件

2.4.1 编辑README.md文件

这一步中我们还需要简单编辑这个README.md文件，它是VuePress框架优先识别的，必备的，类似首页一样的存在。（这里就默认你已经简单掌握了编辑.md文档要使用的markdown语法，不懂的请自觉补课）：

在这里插入图片描述
相应的命令如下：

echo '# Hello VuePress' > docs/README.md

2.4.2 配置config.js文件

config.js文件是项目中最重要的配置文件，几乎所有的配置项都是在此进行。官网中只给出了简单的网站标题和描述的配置：

module.exports = {
  title: 'CODE ZEVIN JIA',
  description: 'A personal website focused on sharing knowledge'
}

有关config.js文件详细的可配置项信息请看 —— 官网文档中的config.js可配置项

2.5 启动项目

这个时候，一个最最简单的博客网站就完成啦！赶紧来启动项目看看效果~ 在vscode终端中运行此命令：

npm run dev

默认服务会启动在你本地的8080端口：http://localhost:8080/，效果如下：

在这里插入图片描述

三. 进阶配置

当然，如果只是这么简单一个小demo是没什么卵用的。重点是他要具备一个个人博客网站该有的个人元素和基本的博客功能。 所以请继续跟我做如下的配置🐶

3.1 默认主题配置

我们上一篇中介绍过，VuePress框架中给我们提供了一个简单的默认主题，正如我们刚刚看到的那样，即使我们现在没做任何有关主题的配置。

现在我们就来在config.js文件中继续添加有关默认主题的配置：

个人元素 —— 左上角应该有自己的logo和名称；
博客网站 —— 自由的导航链接，侧边栏…

这里就能用到我们记录二 —— UI设计篇里准备好的LOGO啦~❀ （不会设计的程序猿不是一个好的搬运工🐶）。

在这里插入图片描述

现在我们的目录结构需要扩充一下，在.vuepress文件夹下新建一个public文件夹，用来存放图片等静态资源。

vuepress-demo
├─package.json
├─docs  
|  ├─README.md
|  ├─.vuepress  //用于存放全局的配置、组件、静态资源等。
|  |     ├─config.js  //配置文件的入口文件
|  |     ├─public
|  |     |   └logo-nav.png

最后我们在config.js文件中添加如下的配置信息：

module.exports = {
    title: 'CODE ZEVIN JIA',  // 网站的标题
    description: 'A personal website focused on sharing knowledge',
    head: [ // 注入到当前页面的 HTML <head> 中的标签
      ['link', { rel: 'icon', href: '/logo-nav.png' }], 
      // 自定义的网页标签图标
    ],
    themeConfig: {
      logo: '/logo-nav.png',  // 左上角logo
      nav:[ // 导航栏配置
        {text: '首页', link: '/' },
        {text: 'CSDN主页', link: 'https://blog.csdn.net/JZevin'}      
      ],
      sidebar: 'auto', // 侧边栏配置
    }
  };

注意：路由根路径为docs文件夹，静态资源（图片）根路径为public文件夹。

然后就可以重启项目：终端中先Ctrl + C 停止服务，然后再npm run dev重启，最终效果如下：

在这里插入图片描述
可以看到一个个人博客网站已经初具形态了，目前有的版块为：

顶部导航栏（navbar）
- 左侧的 logo与title
- 右侧的全局搜索框与nav导航栏
左侧的侧边栏（sidebar）（自动将md一级标题设置为导航文案）
右侧的markdown内容

之后我们修改README.md文件的内容，相应的页面就会热更新；如果我们修改config.js等跟项目结构有关的文件，热更新就会失败，需要我们手动重启项目。

有关默认主题的更多配置可以看官网 —— VuePress官网默认主题配置

3.2 配置首页（可选）

类似于VuePress官网首页那样，默认主题也支持我们配置一个简单的首页。当然，你也可以选择不。

在这里插入图片描述
我们看到的都是可以替换为自定义内容的，所以我们再来找一张图，放到public文件下：

在这里插入图片描述
这部分的配置需要写在README.md文件中，所以说它是VuePress框架优先识别的首页文件。复制以下配置代码替换原先的内容：

---
home: true
heroImage: /logo-index.png
heroText: CODE ZEVIN JIA
tagline: HELLO Welcome!
actionText: 了解更多 →
actionLink: /
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: Copyright © 2019-2020 Zewen(Zevin) Jia
---

重启项目，效果如下：

在这里插入图片描述
对比页面效果，就可以简单分析出我们刚才配置的代码分别都是什么意思啦。

四. 变更主题（可选）

平心而论，VuePress框架给我们提供的这套默认主题还是很简洁大方的。可是我们想换个主题怎么办？安排！

4.1 更换主题

这部分的官网的文档中有详细的讲解，不过我们也只需要知道以下这种最基础常用的配置形式即可：

// .vuepress/config.js
module.exports = {
  theme: 'vuepress-theme-xx'
}

要了解的是，VuePress中的主题开发完成后都会上传为npm资源。 所以我们就可以直接去npm官网搜索vuepress-theme：

在这里插入图片描述
搜索结果大致有以下三种：

@vuepress/theme-xxx —— 官方主题；
@vuepress-xxx/vuepress-plugin-xxx —— 官方主题插件；
vuepress-theme-xxx —— 个人主题；

这就自由选择了，官方主题 / 个人主题均可，你可以都点开看看，通常都会有详细的使用步骤。不再赘述。

4.2 自定义主题

有没有跟我一样，看了一圈，也没挑出一个喜欢的主题？别忘了我们有准备好的一套UI界面好吧！自定义主题才是我们的终极目标！

在这里插入图片描述
然鹅，就现在的了解程度还远远不够，这部分我们留到开发的第三阶段再来做。可以先了解了解官方文档都说了些啥 —— 开发自定义主题

4.3 修改默认主题

现在开发个人主题显然不太实际，一个折中的办法自然就是尝试修改默认主题啦（其实很多个人主题都是基于默认主题二次开发的）。比如我们想修改某个组件的样式或布局，就需要调出默认主题的相关文件了。

局部安装VuePress环境

之前局部安装VuePress环境的童鞋可以按.\node_modules\@vuepress\theme-default路径直接找到默认主题的源文件；

在这里插入图片描述

全局安装VuePress环境

全局安装的童鞋就需要命令来调出：

vuepress eject docs

如果你直接在vscode的终端中执行，他会报错，原因是vuepress属于全局环境变量，vscode的终端默认不会去寻找电脑的全局环境变量。

在这里插入图片描述
这个时候加上npx的前缀即可。他代表先去项目本地寻找环境变量；找不到就会去全局寻找。

npx vuepress eject docs

在这里插入图片描述
执行完毕后会在目标路径下多出一个theme文件夹，即为默认主题的源文件。如果你之前有过Vue的开发经验，就会很熟悉这部分的配置。

官网中一个约定的主题目录结构如下：

theme
├── global-components  //自动注册为全局组件
│   └── xxx.vue
├── components  //Vue 组件
│   └── xxx.vue
├── layouts  //布局组件
│   ├── Layout.vue (必要的)
│   └── 404.vue
├── styles  //全局的样式和调色板
│   ├── index.styl
│   └── palette.styl
├── templates  //修改默认的模板文件
│   ├── dev.html
│   └── ssr.html
├── index.js  //主题文件的入口文件
├── enhanceApp.js  //主题水平的客户端增强文件
└── package.json

打开theme/components文件夹，可以看到很多的Vue布局组件。这里根据具体需求选择性修改即可。

在这里插入图片描述
比如：我们想在导航栏中添加一个欢迎访问的字样。 就可以在Narbar.vue文件中做如图修改：

重启项目后的效果如下：

在这里插入图片描述

五. md文件中使用vue组件（可选）

查看VuePress官网的介绍中，说到他一个很明显的特点：Vue驱动，支持直接在 Markdown文件中使用 Vue 组件。 这里可以简单演示一下。
在这里插入图片描述

我们可以在.vuepress文件夹下新建一个components文件夹（其中的vue组件会自动注册到全局）。比如我们简单写一个my-button的组件，绑定一个点击输出click！的事件：

在这里插入图片描述
之后我们新建一个与.vuepress文件夹同级的blog文件夹，这就相当于是我们的博客列表页。继续来添加第一篇博客README.md，并在其中引用刚才的my-button全局组件。

然后我们还需要在首页的导航栏中加入博客（BLOG）的链接。配置写在config.js文件中：

nav:[ // 导航栏配置
  {text: '首页', link: '/' },
  {text: 'BLOG', link: '/blog/' },
  {text: 'CSDN主页', link: 'https://blog.csdn.net/JZevin'}      
]

最后重启项目，查看效果如下：

在这里插入图片描述

写在最后

本来打算这一篇中就说完项目搭建和部署上线两部分的。 奈何写着写着光是项目搭建的篇幅就已经过万字了。。。索性就拆成上下两篇吧！老折磨人了，啊哈哈🐶
在这里插入图片描述
最后非常感谢南宫大佬的教学视频和资源，受益匪浅，给了我无限的灵感和方向！

参考资源一：简书 —— VuePress搭建技术网站与个人博客（南宫）
参考资源二：B站视频 —— VuePress搭建技术网站与个人博客（饥人谷前端）

Code_Zevin_J

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【个人网站开发 · 记录四】开发阶段一 —— 原生VuePress开发（上）手动搭建个人博客网站的详细记录

文章目录一. 第一部分1.1 xxx1.2 xxx二. 第二部分2.1 yyy2.2 yyy前言部分一. 第一部分1.1 xxx1.2 xxx二. 第二部分2.1 yyy2.2 yyy
复制链接

扫一扫