一、写在前面
我是猿人,一个热爱技术、热爱编程的IT猿。技术是开源的,知识是共享的!
写作是对自己学习的总结和记录,如果您对Java、分布式、微服务、中间件、Spring Boot、Spring
Cloud等技术感兴趣,可以关注我的动态,我们一起学习,一起成长!用知识改变命运,让家人过上更好的生活,互联网人一家亲!
— 公众号【猿码天地】
相信很多人都想拥有一个自己的个人博客,现有的个人博客搭建框架已经有很多了,例如 hexo
、vuepress
、jekyll
等等,这里我选用vuepress
来快速搭建个人博客。
猿人在搭建博客之前,也收集了很多不同的方案,最终选择了基于vuepress
来搭建个人博客。
这里先放上 vuepress 的官网链接:https://www.vuepress.cn
网上教程千千万,但总归都是零零散散的,没人会给你讲解得清清楚楚,所以我这里就手把手来讲解一下如何从零搭建个人技术博客。
二、准备工作
在搭建之前,我们需要准备下必要的环境,比如node
、git
、vuepress
等。
node安装
1、NodeJS安装
下载:https://nodejs.org/en/download/ 选择对应版本
安装:直接点击安装
运行测试:
node -v 显示Node.js版本说明安装成功
npm -v 自带的npm安装成功
2、安装cnpm(淘宝镜像,节省安装时间)
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装webpack(前端资源加载/打包工具)或gulp
webpack
安装:cnpm install webpack -g
测试:webpack -v
gulp
安装:cnpm install gulp -g
测试:gulp -v
依赖安装:cnpm install gulp -g
4、安装vue-cli(构建工具-生成Vue工程模板)
安装:npm install vue-cli -g
测试:vue -V(V大写)
git安装
git安装是很简单的,自行搜索安装即可,不会的再来咨询猿人,找到猿人的方式VX:zhangbowen125
三、脚手架安装
Vue 驱动的静态网站生成器,主要有三大特性:
简洁至上
以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
Vue 驱动
享受 Vue + webpack 的开发体验,可以在 Markdown 中使用 Vue 组件,又可以使用 Vue 来开发自定义主题。
高性能
VuePress 会为每个页面预渲染生成静态的 HTML,同时,每个页面被加载的时候,将作为 SPA 运行。
这里推荐一个大佬制作好的主题 vuepress-theme-reco ,猿人搭建个人博客其页面效果大致是这样的:
步骤如下:
在D盘创建一个目录D:\localCode\ymtd-blog
,然后在命令行切到该目录下,输入npm install @vuepress-reco/theme-cli -g
,等待下载完成后,输入theme-cli init blog
初始化项目。
在初始化时,会让你填写一些信息,例如:博客名称、博客标题、博客描述…
你只需要全部按回车先跳过即可,后续这些信息都还可以自己填写的,等项目全部初始化好了以后,文件目录是这个样子的:
了解完文件目录结构以后,我们需要启动一下项目看一眼,因为刚生成的项目很多依赖包还没安装,并且当前的路径也没在项目中,所以我们要按下面的指令依次执行,进行启动项目。
启动步骤就是vue项目标准启动步骤了,用过vue的都很熟悉,这里给大家贴出来:
// 第一步,进到项目根目录中
cd blog
// 第二步,安装依赖包(这个过程很慢,需要等待)
npm install
// 第三步,等依赖包下完了以后再执行该指令启动项目
npm run dev
启动好以后会自动打开网页,我们可以看到这样的画面了,可以说这个主题的脚手架已经帮我们做了很多工作了,页面也非常的漂亮。
接下来,我们就需要按照官方的一些配置,去修改定制成我们想要的博客,包括博客名字、logo、输入我们的文章(markdown格式,这里需要学习下markdown的语法,也是非常简单的),这些都是有一定的语法和规则的。
四、配置信息
博客页面的一切都是可以由我们的配置文件来控制的,也就是 .vuepress/config.js
,我们来看看它具体的配置信息具体含义是什么(这里非常重要,因为后续如果你要改动页面的什么东西,都要在这里改的,所以必须非常熟悉各个属性的作用)
这里贴上猿人已经修改好的配置文件目录(大家可以参考下):
module.exports = {
"title": "猿码天地",
"description": "一个在互联网打拼的工具人 Java研究猿 程序员日常工作生活分享官",
"dest": "./dist",
"head": [
[
"link",
{
"rel": "icon",
"href": "/favicon.ico"
}
],
[
"meta",
{
"name": "descr