我是猿人,一个热爱技术、热爱编程的IT猿。技术是开源的,知识是共享的!
写作是对自己学习的总结和记录,如果您对Java、分布式、微服务、中间件、Spring Boot、Spring
Cloud等技术感兴趣,可以关注我的动态,我们一起学习,一起成长!用知识改变命运,让家人过上更好的生活,互联网人一家亲!
— 公众号【猿码天地】
相信很多人都想拥有一个自己的个人博客,现有的个人博客搭建框架已经有很多了,例如 hexo
、vuepress
、jekyll
等等,这里我选用vuepress
来快速搭建个人博客。
猿人在搭建博客之前,也收集了很多不同的方案,最终选择了基于vuepress
来搭建个人博客。
这里先放上 vuepress 的官网链接:https://www.vuepress.cn
网上教程千千万,但总归都是零零散散的,没人会给你讲解得清清楚楚,所以我这里就手把手来讲解一下如何从零搭建个人技术博客。
在搭建之前,我们需要准备下必要的环境,比如node
、git
、vuepress
等。
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安装是很简单的,自行搜索安装即可,不会的再来咨询猿人,找到猿人的方式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": "description",
"content": "该网站用于记录Java知识、互联网相关技术、程序员日常"
}
]
],
"theme": "reco",
"themeConfig": {
"nav": [
{
"text": "首页",
"link": "/",
"icon": "reco-home"
},
{
"text": "Java",
"link": "/docs/java/",
"icon": "reco-message"
},
{
"text": "SpringBoot",
"link": "/docs/springboot/",
"icon": "reco-message"
},
{
"text": "猿人时间",
"link": "/timeline/",
"icon": "reco-date"
},
{
"text": "架构",
"icon": "reco-message",
"items": [
{
"text": "SpirngCloud",
"link": "/docs/jiagou/spirngcloud/"
},
{
"text": "微服务",
"link": "/docs/jiagou/weifuwu/"
},
{
"text": "分布式",
"link": "/docs/jiagou/fenbushi/"
},
]
},
{
"text": "粉丝福利",
"icon": "reco-message",
"items": [
{
"text": "电子书",
"link": "/docs/welfare/books/"
},
{
"text": "BAT面试资料",
"link": "/docs/welfare/meeting/"
},
{
"text": "简历模板",
"link": "/docs/welfare/resume/"
},
{
"text": "脑图",
"link": "/docs/welfare/naotu/"
},
]
},
{
"text": "程序人生",
"icon": "reco-message",
"link": "/docs/code-life/"
}
],
valineConfig: { // valine 评论功能配置信息
appId: 'Q33svK9kUC19IGvMIboDy7tQ-gzGzoHsz',// your appId
appKey: 'EQXMWgUiXSGbzUmlTSV2ul9E', // your appKey
placeholder: '尽情留下你想说的话吧', // 评论框占位符
avatar: 'wavatar', // 评论用户的头像类型
highlight: true, // 代码高亮
recordIP: true, // 记录评论者的IP
},
"sidebar": {
"/docs/java/": [
"",
"java-1",
"java-2",
"java-3",
"java-3",
"java-4",
"java-5",
"java-6",
"java-7",
"java-8",
"java-9"
],
"/docs/springboot/": [
""
],
"/docs/jiagou/spirngcloud/": [
""
],
"/docs/jiagou/weifuwu/": [
""
],
"/docs/jiagou/fenbushi/": [
""
],
"/docs/welfare/books/": [
""
],
"/docs/welfare/meeting/": [
""
],
"/docs/welfare/resume/": [
""
],
"/docs/welfare/naotu/": [
"",
"welfare-naotu-1"
],
"/docs/code-life/": [
"",
"code-life-1",
"code-life-2",
"code-life-3"
]
},
"type": "blog",
"blogConfig": {
"category": {
"location": 2,
"text": "文章分类"
},
"tag": {
"location": 3,
"text": "标签"
}
},
"friendLink": [
{
"title": "电子书",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
{
"title": "Java知识学堂",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
{
"title": "码云",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
{
"title": "CSDN博客",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
{
"title": "头条",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
{
"title": "B站",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
],
"logo": "/logo.png",
"search": true,
"searchMaxSuggestions": 10,
"lastUpdated": "Last Updated",
"author": "猿人",
"authorAvatar": "/avatar.png",
"record": "我的备案号",
"startYear": "2019"
},
"markdown": {
"lineNumbers": true
}
}
其中包含有评论模块的配置文件:在评论模块会做详细讲解。
valineConfig: { // valine 评论功能配置信息
appId: 'Q33svK9kUC19IGvMIboDy7tQ-gzGzoHsz',// your appId
appKey: 'EQXMWgUiXSGbzUmlTSV2ul9E', // your appKey
placeholder: '尽情留下你想说的话吧', // 评论框占位符
avatar: 'wavatar', // 评论用户的头像类型
highlight: true, // 代码高亮
recordIP: true, // 记录评论者的IP
},
接下来按顺序讲解一下各个属性的作用吧!
该属性表示的是博客的标题,我们将 title
值修改为猿码天地
,我们会发现页面的博客名字变了。
该属性表示该网站的一些描述信息,我们将description
的值改为 一个在互联网打拼的工具人 Java研究猿 程序员日常工作生活分享官
,重新加载页面,会发现介绍页发生了改动。
该属性表示的是项目打包以后文件生成的目录,例如我们将该 dest 的值改成 ./dist ,那么当我们执行 npm run build 打包文件后,会在当前根目录下生成一个 dist 文件夹,打包好的项目文件都在该文件夹中。
该属性表示的是 html 文档的 head 标签中需要额外插入的其它标签,猿人修改后为:
"head": [
[
"link",
{
"rel": "icon",
"href": "/favicon.ico"
}
],
[
"meta",
{
"name": "description",
"content": "该网站用于记录Java知识、互联网相关技术、程序员日常"
}
]
]
该属性表示的是当前项目使用的主题,这里我们是用 vuepress-theme-reco
主题的脚手架生成的,所以它默认就是 reco
,我们可以不用修改,当然后续你想使用别的主题也可以,可以参考一下 vuepress 的官网。
该属性表示的是主题的配置信息,这里东西有点多,我们慢慢来讲。
nav
该属性表示导航栏的配置信息,猿人修改后的配置如下,大家可以参考修改成自己想要的即可。
"nav": [
{
"text": "首页",
"link": "/",
"icon": "reco-home"
},
{
"text": "Java",
"link": "/docs/java/",
"icon": "reco-message"
},
{
"text": "SpringBoot",
"link": "/docs/springboot/",
"icon": "reco-message"
},
{
"text": "猿人时间",
"link": "/timeline/",
"icon": "reco-date"
},
{
"text": "架构",
"icon": "reco-message",
"items": [
{
"text": "SpirngCloud",
"link": "/docs/jiagou/spirngcloud/"
},
{
"text": "微服务",
"link": "/docs/jiagou/weifuwu/"
},
{
"text": "分布式",
"link": "/docs/jiagou/fenbushi/"
},
]
},
{
"text": "粉丝福利",
"icon": "reco-message",
"items": [
{
"text": "电子书",
"link": "/docs/welfare/books/"
},
{
"text": "BAT面试资料",
"link": "/docs/welfare/meeting/"
},
{
"text": "简历模板",
"link": "/docs/welfare/resume/"
},
{
"text": "脑图",
"link": "/docs/welfare/naotu/"
},
]
},
{
"text": "程序人生",
"icon": "reco-message",
"link": "/docs/code-life/"
}
]
sidebar
该属性表示的是侧边栏的导航信息,默认生成的是:
"sidebar": {
"/docs/theme-reco/": [
"", // 空字符串对应的是 README.md
"theme", // 对应 theme.md
"plugin", // 对应plugin.md
"api" // 对应api.md
]
}
该配置信息表示的是当路径为 /docs/theme-reco/
时,侧边栏会自动找路径./docs/theme-reco/
下的README.md 、theme.md 、plugin.md 、api.md
文件进行识别生成侧边栏。
type
该属性表示的是当前项目的类型,默认的是 blog
,也就是我们现在看到的样式,其实还有别的值可以设定,例如 docs
,其对应的就是比较简约化的文档样式了,当然了这些都是脚手架帮我们处理好了的。
blogConfig
该属性表示的是导航栏的配置信息,其是 reco 主题设置的。
"blogConfig": {
"category": {
"location": 2,
"text": "文章分类"
},
"tag": {
"location": 3,
"text": "标签"
}
}
设置完后,我们会发现导航栏有了“文章分类”和“标签”。
friendLink
该属性是用于设置友链的。配置的话也比较简单,模仿默认的配置去做就可以了。
"friendLink": [
{
"title": "电子书",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
{
"title": "Java知识学堂",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
{
"title": "码云",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
{
"title": "CSDN博客",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
{
"title": "头条",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
{
"title": "B站",
"desc": "",
"email": "[email protected]",
"link": "链接"
},
]
添加完配置后就会出现如下信息:
logo
该属性表示的是导航栏最左侧的 logo 图片。在写该值时的根路径是 public ,即 /logo.png 表示的就是 public 下的 logo.png
search
该属性表示是否有搜索功能
searchMaxSuggestions
该属性官网也没做过多说明,所以我也不知道有什么用,暂且可以不用管
lastUpdated
该属性表示每篇文章底部显示的 “最后一次更新时间” 的文案
author
该属性表示作者的名称,在每一篇文章的作者署名中都会沿用该名称
authorAvatar
该属性表示作者的头像,与 logo 一样的路径规则,头像显示位置如下图所示:
record && recordLink && cyberSecurityRecord && cyberSecurityLink
record: ICP备案号
recordLink: ICP 备案指向的链接
cyberSecurityRecord: 公安部备案文案
cyberSecurityLink: 公安部备案指向链接
如果项目不是部署在个人服务器上的话,这四个属性可以忽略不管
startYear
该属性表示博客的开始时间(只需要写年份就可以了),在网站上的会有展示。
该属性里存储着一些对于 markdown 解析的配置,例如脚手架自动生成的 lineNumbers 表示的就是代码块显示行号,其实还有其它很多的 markdown 配置,详细参考 vuepress官方。
按照上面进行配置,一个基本的博客就搭建好了,现在就可以开始疯狂输入文章了,所有的文章只需要以.md文件格式放在docs文件夹下即可。
---
title: 1000+本Java开发精华电子书,学习Java就靠它了
date: 2021-05-01
categories:
- Java
- 电子书
tags:
- Java
- 电子书
---
文章内容.........................
页面显示具体信息如下:
另外,我们本文使用的主题框架还为文章提供了一个很不错的功能:加密,只需要在文章中给keys属性赋值一个md5加密后的字符串即可
比如我们将密码设为9527,那么打开在线md5加密 (opens new window)网站,将密码输入到框中,就能得到一串密文,该密文就是我们要设置的keys的值,以其中一篇文章为例:
---
title: 月薪3万Java优秀简历模板
date: 2021-06-01
categories:
- 简历
- Java
- 程序人生
tags:
- 简历
- Java
- 程序人生
keys:
- '52569c045dc348f12dfc4c85000ad832'
---
简历是对你过往学习和工作的一个总结,一份好的简历容易给人留下深刻印象,更容易被企业发现,创造更多的就业机会。优秀的简历可以把你推销给优秀的企业,看看别人的优秀简历范文,让自己的简历更加优秀吧。
在需要看文章时需要输入密钥。
其实这个主题框架已经内置了评论插件@vuepress-reco/vuepress-plugin-comments
,我们需要做的就是做一些额外的配置。
首先去Valine官网(https://console.leancloud.cn/register)注册一下Valine账号,注册好后进行登录,然后进入控制台,点击左下角创建应用。
应用创建好以后,进入刚刚创建的应用,选择左下角的设置>应用Key,然后就能看到你的APP ID和APP Key了。
拿到APP ID和APP Key后,我们来到我们项目中.vuepress/config.js中的themeConfig属性中,按如下设置即可:
module.exports = {
// ...
themeConfig: {
// ....
valineConfig: { // valine 评论功能配置信息
appId: '在这输入你的appid',// your appId
appKey: '在这输入你的appKey', // your appKey
placeholder: '尽情留下你想说的话吧~', // 评论框占位符
avatar: 'wavatar', // 评论用户的头像类型
highlight: true, // 代码高亮
recordIP: true, // 记录评论者的IP
},
}
// ...
}
这样我们就能看到我们每篇文章的最底部都有留言功能了
当然如果我们不想让某篇文章有留言板,也可以设置isShowComments属性为false即可
---
title: 我的第一篇文章
date: 2021-05-07
categories:
- 分类1
tags:
- 标签1
- 标签2
keys:
- 'ababf713be53f3d10366196bf0297c30'
isShowComments: false
---
这是我的第一篇文章
到这里,我们就基本完成了博客的搭建,我们只需要把精力花到具体的技术文章输出上面了。
完整的博客截图如下:
最终,我们搭建的个人博客都是需要部署在公网上,再申请个域名,进行域名解析,最终我们就可以在浏览器打开我们的个人技术博客了。
这里猿人是将搭建好的个人博客部署在了阿里云的服务器上,直接在阿里云上安装nginx,然后部署下打包后的代码,命令是:npm run build,就会生成一个静态资源文件,我们将这个文件拷贝到nginx服务器上即可。
由于猿人申请的域名还在备案中,这里贴上我的个人阿里云外网地址,大家可以参考学习下,也希望猿人博客上的知识分享能给大家带来收获。
猿码天地博客地址:http://47.114.172.141:81/
域名申请下来了,猿人会告诉大家如何通过域名访问,如果在部署过程中有不清楚的地方,都可以咨询猿人。
如果不想自己按照上述步骤部署,想获取猿人的博客源码,可以联系猿人获取源码,方式如下图:上面有猿人联系方式。
关注公众号【猿码天地】回复关键字“博客”即可获取源码和文档。
你多学一样本事,就少说一句求人的话,现在的努力,是为了以后的不求别人,实力是最强的底气。记住,活着不是靠泪水博得同情,而是靠汗水赢得掌声。
——《写给程序员朋友》