手把手教你搭建个人技术博客,半小时搞定

一、写在前面

我是猿人,一个热爱技术、热爱编程的IT猿。技术是开源的,知识是共享的!

写作是对自己学习的总结和记录,如果您对Java、分布式、微服务、中间件、Spring Boot、Spring
Cloud等技术感兴趣,可以关注我的动态,我们一起学习,一起成长!

用知识改变命运,让家人过上更好的生活,互联网人一家亲!
— 公众号【猿码天地】

相信很多人都想拥有一个自己的个人博客,现有的个人博客搭建框架已经有很多了,例如 hexovuepressjekyll等等,这里我选用vuepress 来快速搭建个人博客。

猿人在搭建博客之前,也收集了很多不同的方案,最终选择了基于vuepress来搭建个人博客。

这里先放上 vuepress 的官网链接:https://www.vuepress.cn

网上教程千千万,但总归都是零零散散的,没人会给你讲解得清清楚楚,所以我这里就手把手来讲解一下如何从零搭建个人技术博客。

二、准备工作

在搭建之前,我们需要准备下必要的环境,比如nodegitvuepress等。

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 ,猿人搭建个人博客其页面效果大致是这样的:

手把手教你搭建个人技术博客,半小时搞定_第1张图片

步骤如下:

在D盘创建一个目录D:\localCode\ymtd-blog ,然后在命令行切到该目录下,输入npm install @vuepress-reco/theme-cli -g,等待下载完成后,输入theme-cli init blog初始化项目。

在初始化时,会让你填写一些信息,例如:博客名称、博客标题、博客描述…

你只需要全部按回车先跳过即可,后续这些信息都还可以自己填写的,等项目全部初始化好了以后,文件目录是这个样子的:

手把手教你搭建个人技术博客,半小时搞定_第2张图片

了解完文件目录结构以后,我们需要启动一下项目看一眼,因为刚生成的项目很多依赖包还没安装,并且当前的路径也没在项目中,所以我们要按下面的指令依次执行,进行启动项目。

启动步骤就是vue项目标准启动步骤了,用过vue的都很熟悉,这里给大家贴出来:

// 第一步,进到项目根目录中
cd blog

// 第二步,安装依赖包(这个过程很慢,需要等待)
npm install

// 第三步,等依赖包下完了以后再执行该指令启动项目
npm run dev

启动好以后会自动打开网页,我们可以看到这样的画面了,可以说这个主题的脚手架已经帮我们做了很多工作了,页面也非常的漂亮。

手把手教你搭建个人技术博客,半小时搞定_第3张图片

接下来,我们就需要按照官方的一些配置,去修改定制成我们想要的博客,包括博客名字、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

该属性表示的是博客的标题,我们将 title 值修改为猿码天地 ,我们会发现页面的博客名字变了。

  • description

该属性表示该网站的一些描述信息,我们将description 的值改为 一个在互联网打拼的工具人 Java研究猿 程序员日常工作生活分享官 ,重新加载页面,会发现介绍页发生了改动。

  • dest

该属性表示的是项目打包以后文件生成的目录,例如我们将该 dest 的值改成 ./dist ,那么当我们执行 npm run build 打包文件后,会在当前根目录下生成一个 dist 文件夹,打包好的项目文件都在该文件夹中。

  • head

该属性表示的是 html 文档的 head 标签中需要额外插入的其它标签,猿人修改后为:

"head": [
[
  "link",
  {
    "rel": "icon",
    "href": "/favicon.ico"
  }
],
[
  "meta",
  {
    "name": "description",
    "content": "该网站用于记录Java知识、互联网相关技术、程序员日常"
  }
]
]
  • theme

该属性表示的是当前项目使用的主题,这里我们是用 vuepress-theme-reco 主题的脚手架生成的,所以它默认就是 reco ,我们可以不用修改,当然后续你想使用别的主题也可以,可以参考一下 vuepress 的官网。

  • themeConfig

该属性表示的是主题的配置信息,这里东西有点多,我们慢慢来讲。

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": "标签"
  }
}

设置完后,我们会发现导航栏有了“文章分类”和“标签”。

手把手教你搭建个人技术博客,半小时搞定_第4张图片

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": "链接"
},
]

添加完配置后就会出现如下信息:

手把手教你搭建个人技术博客,半小时搞定_第5张图片

logo

该属性表示的是导航栏最左侧的 logo 图片。在写该值时的根路径是 public ,即 /logo.png 表示的就是 public 下的 logo.png

search

该属性表示是否有搜索功能

searchMaxSuggestions

该属性官网也没做过多说明,所以我也不知道有什么用,暂且可以不用管

lastUpdated

该属性表示每篇文章底部显示的 “最后一次更新时间” 的文案

author

该属性表示作者的名称,在每一篇文章的作者署名中都会沿用该名称

authorAvatar

该属性表示作者的头像,与 logo 一样的路径规则,头像显示位置如下图所示:

手把手教你搭建个人技术博客,半小时搞定_第6张图片

record && recordLink && cyberSecurityRecord && cyberSecurityLink

record: ICP备案号

recordLink: ICP 备案指向的链接

cyberSecurityRecord: 公安部备案文案

cyberSecurityLink: 公安部备案指向链接

如果项目不是部署在个人服务器上的话,这四个属性可以忽略不管

startYear

该属性表示博客的开始时间(只需要写年份就可以了),在网站上的会有展示。

  • markdown

该属性里存储着一些对于 markdown 解析的配置,例如脚手架自动生成的 lineNumbers 表示的就是代码块显示行号,其实还有其它很多的 markdown 配置,详细参考 vuepress官方。

五、写文章

按照上面进行配置,一个基本的博客就搭建好了,现在就可以开始疯狂输入文章了,所有的文章只需要以.md文件格式放在docs文件夹下即可。

---
title: 1000+本Java开发精华电子书,学习Java就靠它了
date: 2021-05-01
categories:
 - Java
 - 电子书
tags:
 - Java
 - 电子书
---

文章内容.........................

页面显示具体信息如下:

手把手教你搭建个人技术博客,半小时搞定_第7张图片

另外,我们本文使用的主题框架还为文章提供了一个很不错的功能:加密,只需要在文章中给keys属性赋值一个md5加密后的字符串即可

比如我们将密码设为9527,那么打开在线md5加密 (opens new window)网站,将密码输入到框中,就能得到一串密文,该密文就是我们要设置的keys的值,以其中一篇文章为例:

---
title: 月薪3万Java优秀简历模板
date: 2021-06-01
categories:
 - 简历
 - Java
 - 程序人生
tags:
 - 简历
 - Java
 - 程序人生
keys:
 - '52569c045dc348f12dfc4c85000ad832'
 
---

简历是对你过往学习和工作的一个总结,一份好的简历容易给人留下深刻印象,更容易被企业发现,创造更多的就业机会。优秀的简历可以把你推销给优秀的企业,看看别人的优秀简历范文,让自己的简历更加优秀吧。

在需要看文章时需要输入密钥。

手把手教你搭建个人技术博客,半小时搞定_第8张图片

六、评论模块

其实这个主题框架已经内置了评论插件@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
    },
  }
  // ...
}

这样我们就能看到我们每篇文章的最底部都有留言功能了

手把手教你搭建个人技术博客,半小时搞定_第9张图片

当然如果我们不想让某篇文章有留言板,也可以设置isShowComments属性为false即可

---
title: 我的第一篇文章
date: 2021-05-07
categories:
 - 分类1
tags:
 - 标签1
 - 标签2
keys:
 - 'ababf713be53f3d10366196bf0297c30'
isShowComments: false
---

这是我的第一篇文章

到这里,我们就基本完成了博客的搭建,我们只需要把精力花到具体的技术文章输出上面了。

完整的博客截图如下:

手把手教你搭建个人技术博客,半小时搞定_第10张图片
手把手教你搭建个人技术博客,半小时搞定_第11张图片
手把手教你搭建个人技术博客,半小时搞定_第12张图片
手把手教你搭建个人技术博客,半小时搞定_第13张图片
手把手教你搭建个人技术博客,半小时搞定_第14张图片

七、服务器部署

最终,我们搭建的个人博客都是需要部署在公网上,再申请个域名,进行域名解析,最终我们就可以在浏览器打开我们的个人技术博客了。

这里猿人是将搭建好的个人博客部署在了阿里云的服务器上,直接在阿里云上安装nginx,然后部署下打包后的代码,命令是:npm run build,就会生成一个静态资源文件,我们将这个文件拷贝到nginx服务器上即可。

由于猿人申请的域名还在备案中,这里贴上我的个人阿里云外网地址,大家可以参考学习下,也希望猿人博客上的知识分享能给大家带来收获。

猿码天地博客地址:http://47.114.172.141:81/

域名申请下来了,猿人会告诉大家如何通过域名访问,如果在部署过程中有不清楚的地方,都可以咨询猿人。

八、获取源码

如果不想自己按照上述步骤部署,想获取猿人的博客源码,可以联系猿人获取源码,方式如下图:上面有猿人联系方式。

关注公众号【猿码天地】回复关键字“博客”即可获取源码和文档。

手把手教你搭建个人技术博客,半小时搞定_第15张图片

你多学一样本事,就少说一句求人的话,现在的努力,是为了以后的不求别人,实力是最强的底气。记住,活着不是靠泪水博得同情,而是靠汗水赢得掌声。
——《写给程序员朋友》

你可能感兴趣的:(跟着猿人学Java,工具,粉丝福利,java,程序人生)