个人博客网站搭建
个人博客网站搭建
VuePress介绍
本人的个人博客网站,网站地址,是基于VuePress进行搭建。
什么是VuePress
根据官网:VuePress
由两部分组成:第一部分是一个极简静态网站生成器, 它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题, 它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress
生成的页面都带有预渲染好的 HTML, 也因此具有非常好的加载性能和搜索引擎优化(SEO)。
同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA), 其他的页面则会只在用户浏览到的时候才按需加载。
VuePress 工作原理
事实上,一个 VuePress
网站是一个由 Vue
、Vue Router
和 webpack
驱动的单页应用。 如果你以前使用过 Vue
的话,当你在开发一个自定义主题的时候,你会感受到非常熟悉的开发体验, 你甚至可以使用 Vue DevTools
去调试你的自定义主题。
在构建时,我们会为应用创建一个服务端渲染(SSR)的版本, 然后通过虚拟访问每一条路径来渲染对应的HTML。
快速开始
前置条件
1、在开始之前我们需要确保你的本地是由nodejs的环境,我们先来验证一下, 打开的命令行工具,我的是mac所以打开的终端(Windows打开cmd),输入一下命令:
说明:出现版本号,说明你本地是有环境。
2、接着我们来验证是否有npm工具:
如果有的小伙伴没有相关环境:请按如下提示进行环境准备
1、下载nodejs
登录nodejs
官网:nodejs官网
下载符合你个人系统的软件,进行安装,安装过程很简单,这里就不过多赘述。 安装完成后,继续上面所说的进行验证node的版本和npm的版本
正式开始
1、创建目录
在你的终端执行进行入的放放置项目的目录,创建一个目录,如下命令:
2、初始化目录
根据提示设置一些必要的信息,无需设置直接回车,最后输入yes
,设置完成后,如下图所示:
此时,blog_web目录先会有一个package.json
文件,打开文件看一下有什么信息。
可以看到,就是我们刚才设置的一些信息。
3、安装VuePress
也可以进行全局安装
全局安装以后在任何目录下都可以使用VuePress
安装完成后可以看到项目下多了一个目录node——modules
,这里都是我们需要依赖的文件。
4、创建你的博客相关目录
在blog_web目录下创建一个docs
目录,进入docs
目录创建.vuepress
目录, 创建一个README.md
文件,涉及的命令如下:
5、配置网站头
进入.vuepress
目录下创建,config.js
文件,配置以下信息
6、配置网站首页
进入docs
目录,打开README.md
文件,配置如下内容:
7、启动项目
进入到blog_web
目录,加入如下脚本
在终端执行如下命令,启动项目:
出现如下信息说明启动成功
出现上面的画面,那么恭喜你,你想网站已经启动成功。
持续优化
1、配置网站角标
现在网站的头部很单调,我们需要进行优化
进入.vuepress
目录下,在config.js
文件下设置hand
的信息,如下:
2、配置网站logo
、导航栏、侧边栏
进入.vuepress
目录下,在config.js
文件下信息,如下:
配置完成后,需要在docs
目录先创建java
目录,并且在java
目录下创建,READNE.md
、 java1.md
、java2.md
文件,同理创建web
目录。项目目录结构图如下:
3、查看网站效果
首页
java
找一篇文章我们看一下效果
这样我们的静态博客网站就搭建完成了
小结
好啦,小伙伴们,到此我们的静态博客网站就基本搭建完成了。至于如何部署上线,微信搜一搜【北漂码农有话说】 我们下回分享。
版权声明: 本文为 InfoQ 作者【北漂码农有话说】的原创文章。
原文链接:【http://xie.infoq.cn/article/603720ca5acea3cb7fcc6b5e2】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论