个人博客网站搭建VuePress简介
本人的个人博客网站,其地址基于VuePress框架进行构建与开发。
VuePress概述
VuePress工作机制方面,它实际上是一个由Vue、Vue Router和webpack驱动的单页应用(SPA)。如果你有过使用Vue的经验,当你在定制主题时,你会感受到熟悉的开发体验,甚至可以使用Vue DevTools来调试你的自定义主题。
快速上手的前置条件
1. 开始之前请确保你的本地环境安装了Node.js。你可以通过命令行工具(如Mac上的终端或Windows的cmd)来验证。输入以下命令查看版本号,如果出现则说明环境已安装。
2. 接着我们需要验证npm工具是否已安装。如果没有相关环境,请按照以下指引进行准备:
a. 访问Node.js(/)下载符合你个人系统的软件进行安装。
b. 安装完成后,重复上述步骤验证Node.js和npm的版本。
正式开始搭建博客网站
1. 创建项目目录
在终端中进入你打算放置项目的目录,并执行命令创建新目录。
2. 初始化目录
根据提示设置必要信息,若无需设置则直接回车。最后输入"yes"完成设置。
blog_web目录下将生成一个包含相关信息的package.json文件。
3. 安装VuePress
你可以选择全局安装VuePress,这样在任何目录下都可以使用它。
安装完成后,你可以在项目目录下看到新增的node_modules目录,这里包含了所有必要的依赖文件。
4. 创建博客相关目录结构
在blog_web目录下创建docs文件夹,然后在docs文件夹内创建.vuepress文件夹以及一个README.md文件。涉及的命令如下。
持续优化与扩展
1. 网站头部优化
.vuepress文件夹下的config.js文件中进行相关设置以优化网站头部信息。
2. 网站细节配置与优化
.vuepress/config.js文件里继续进行logo、导航栏、侧边栏的配置设置等。之后,还需要在docs目录下按需创建其他子目录和文件。
查看网站效果
启动项目后,访问localhost:8080/查看首页效果。
同时可以浏览其他页面如“java”等来检查效果。至此,我们的静态博客网站搭建工作基本完成。
小结
至此,小伙伴们已经成功搭建了一个静态博客网站。关于如何进行部署上线等后续操作,请关注我们的公众号“北漂码农有话说”,我们将在后续分享中详细介绍。