个人博客网站搭建

VuePress介绍

本人的个人博客网站&＃xff0c;网站地址&＃xff0c;是基于VuePress进行搭建。

什么是VuePress

根据官网&＃xff1a;VuePress 由两部分组成&＃xff1a;第一部分是一个极简静态网站生成器&＃xff0c; 它包含由 Vue 驱动的主题系统和插件 API&＃xff0c;另一个部分是为书写技术文档而优化的默认主题&＃xff0c; 它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress 生成的页面都带有预渲染好的 HTML&＃xff0c; 也因此具有非常好的加载性能和搜索引擎优化(SEO)。

同时&＃xff0c;一旦页面被加载&＃xff0c;Vue 将接管这些静态内容&＃xff0c;并将其转换成一个完整的单页应用(SPA)&＃xff0c; 其他的页面则会只在用户浏览到的时候才按需加载。

VuePress 工作原理

事实上&＃xff0c;一个 VuePress 网站是一个由 Vue、Vue Router 和 webpack驱动的单页应用。 如果你以前使用过 Vue 的话&＃xff0c;当你在开发一个自定义主题的时候&＃xff0c;你会感受到非常熟悉的开发体验&＃xff0c; 你甚至可以使用 Vue DevTools 去调试你的自定义主题。

在构建时&＃xff0c;我们会为应用创建一个服务端渲染(SSR)的版本&＃xff0c; 然后通过虚拟访问每一条路径来渲染对应的HTML。

快速开始

前置条件

1、在开始之前我们需要确保你的本地是由nodejs的环境&＃xff0c;我们先来验证一下&＃xff0c; 打开的命令行工具&＃xff0c;我的是mac所以打开的终端(Windows打开cmd)&＃xff0c;输入一下命令&＃xff1a;

node -v

说明&＃xff1a;出现版本号&＃xff0c;说明你本地是有环境。

2、接着我们来验证是否有npm工具&＃xff1a;

npm -v

如果有的小伙伴没有相关环境&＃xff1a;请按如下提示进行环境准备

1、下载nodejs

登录nodejs官网&＃xff1a;nodejs官网

下载符合你个人系统的软件&＃xff0c;进行安装&＃xff0c;安装过程很简单&＃xff0c;这里就不过多赘述。 安装完成后&＃xff0c;继续上面所说的进行验证node的版本和npm的版本

正式开始

1、创建目录

在你的终端执行进行入的放放置项目的目录&＃xff0c;创建一个目录&＃xff0c;如下命令&＃xff1a;

// 进入一个目录cd 你的目录//创建一个 blog_web 目录mdkir blog_web

2、初始化目录

//进入 blog_webcd blog_web//初始化目录npm init -y

根据提示设置一些必要的信息&＃xff0c;无需设置直接回车&＃xff0c;最后输入yes&＃xff0c;设置完成后&＃xff0c;如下图所示&＃xff1a;

此时&＃xff0c;blog_web目录先会有一个package.json文件,打开文件看一下有什么信息。

//编辑文件vi packag.json

{  "name": "blog_web",  "version": "1.0.0",  "description": "我的博客网站",  "main": "index.js",  "scripts": {    "test": "echo "Error: no test specified" && exit 1"  },  "author": "北漂码农有话说",  "license": "ISC"}

可以看到&＃xff0c;就是我们刚才设置的一些信息。

3、安装VuePress

//安装在你的目录下npm install -D vuepress

也可以进行全局安装

npm install -g vuepress

全局安装以后在任何目录下都可以使用VuePress

安装完成后可以看到项目下多了一个目录node——modules&＃xff0c;这里都是我们需要依赖的文件。

4、创建你的博客相关目录

在blog_web目录下创建一个docs目录&＃xff0c;进入docs目录创建.vuepress目录&＃xff0c; 创建一个README.md文件&＃xff0c;涉及的命令如下&＃xff1a;

mkdir docscd docsmkdir .vuepress

5、配置网站头

进入.vuepress目录下创建&＃xff0c;config.js文件&＃xff0c;配置以下信息

module.exports &＃61; {    title: &＃39;北漂码农优化说&＃39;,    description: &＃39;欢迎来到我的博客&＃39;}

6、配置网站首页

进入docs目录&＃xff0c;打开README.md文件&＃xff0c;配置如下内容&＃xff1a;

---home: trueheroImage: http://cdn.triumphxx.com.cn/img/%E9%A1%B5%E5%A4%B4.jpgheroText: 北漂码农有话说tagline: Java 全栈技术交流平台actionText: 开始学习 →actionLink: /features:- title: 纯原创  details: 不做互联网的搬运工&＃xff0c;我们踏实搞技术。- title: 成系列  details: 成系列的教程合集&＃xff0c;告别碎片化学习&＃xff0c;Java 学习一步到位&＃xff01;- title: 有案例  details: 文章都有配套案例&＃xff0c;搜索微信公众号【北漂码农有话说】&＃xff0c;及时获取文档更新通知&＃xff01;footer: 关注微信公众号【北漂码农有话说】&＃xff0c;众多技术呈现给你&＃xff01;---

7、启动项目

进入到blog_web目录&＃xff0c;加入如下脚本

  "scripts": {    "test": "echo "Error: no test specified" && exit 1",    "dev": "vuepress dev docs",    "build": "vuepress build docs" }

在终端执行如下命令&＃xff0c;启动项目&＃xff1a;

npm run dev

出现如下信息说明启动成功

进行访问http://localhost:8080/

出现上面的画面&＃xff0c;那么恭喜你&＃xff0c;你想网站已经启动成功。

持续优化

1、配置网站角标

现在网站的头部很单调&＃xff0c;我们需要进行优化

进入.vuepress目录下&＃xff0c;在config.js文件下设置hand的信息&＃xff0c;如下&＃xff1a;

module.exports &＃61; {    title: &＃39;北漂码农有话说&＃39;,    description: &＃39;欢迎来到我的博客&＃39;,    head: [        [&＃39;link&＃39;, {rel: &＃39;icon&＃39;, href: &＃39;http://cdn.triumphxx.com.cn/img/%E5%85%AC%E4%BC%97%E5%8F%B71.jpeg?s=#39;}],    ],}

2、配置网站logo、导航栏、侧边栏

进入.vuepress目录下&＃xff0c;在config.js文件下信息&＃xff0c;如下&＃xff1a;

module.exports &＃61; {    title: &＃39;北漂码农有话说&＃39;,    description: &＃39;欢迎来到我的博客&＃39;,    head: [        [&＃39;link&＃39;, {rel: &＃39;icon&＃39;, href: &＃39;http://cdn.triumphxx.com.cn/img/%E5%85%AC%E4%BC%97%E5%8F%B71.jpeg?s=#39;}],    ],    themeConfig: {        logo: &＃39;http://cdn.triumphxx.com.cn/img/%E5%85%AC%E4%BC%97%E5%8F%B71.jpeg?s=#39;,        nav: [            {text: &＃39;首页&＃39;, link: &＃39;/&＃39;},            {text: &＃39;Java&＃39;, link: &＃39;/java/&＃39;},            {text: &＃39;前端&＃39;, link: &＃39;/web/&＃39;},            {text: &＃39;GitHub&＃39;, link: &＃39;https://github.com/triumphxx&＃39;}        ],        sidebar: {            &＃39;/java/&＃39;: [                &＃39;&＃39;,                &＃39;java1&＃39;,                &＃39;java2&＃39;            ],            &＃39;/web/&＃39;: [                &＃39;&＃39;,                &＃39;web&＃39;,            ]        }    }}

配置完成后&＃xff0c;需要在docs目录先创建java目录&＃xff0c;并且在java目录下创建&＃xff0c;READNE.md、 java1.md、java2.md文件&＃xff0c;同理创建web目录。项目目录结构图如下&＃xff1a;

.├── docs│   ├── README.md│   ├── java│   │   ├── README.md│   │   ├── java1.md│   │   └── java2.md│   └── web│   ├── README.md│   └── web.md├── package-lock.json├── package.json└── tree.txt

3、查看网站效果

首页

java

找一篇文章我们看一下效果

这样我们的静态博客网站就搭建完成了

小结

好啦&＃xff0c;小伙伴们&＃xff0c;到此我们的静态博客网站就基本搭建完成了。至于如何部署上线&＃xff0c;微信搜一搜【北漂码农有话说】 我们下回分享。