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

最新推荐文章于 2024-08-16 14:41:55 发布

猿码天地

最新推荐文章于 2024-08-16 14:41:55 发布

阅读量3.9k

点赞数 5

分类专栏：跟着猿人学Java 工具粉丝福利文章标签： java 程序人生

本文链接：https://blog.csdn.net/zbw125/article/details/117400303

版权

本文详细介绍了如何使用VuePress搭建个人技术博客，包括Node和Git的安装、VuePress的配置、文章写作、评论模块的设置，以及服务器部署的步骤。适合初学者快速建立自己的技术博客。

摘要由CSDN通过智能技术生成

一、写在前面

我是猿人，一个热爱技术、热爱编程的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