开发者社区> 小猪课堂> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Vuepress + gitee五分钟免费搭建个人博客(保姆级教程)

简介: 前言 作为一个程序员,没有折腾过个人博客是不算完整的。技术文章的输出是我们程序员能力的一种体现,也是一种非常好的个人总结。 市面上有很多搭建个人博客的工具或框架,包括hexo、wordpress等等。不可否认,市面上有些博客系统做得很好,博客主题也很丰富,但是往往存在一个问题:比较重。 作为一个Vue程序员,我就比较推荐使用vuepress搭建个人博客,因为它毕竟是Vue出品的,大家熟知的vue官方就是利用vuepress搭建的。 本篇文章就从零开始教大家搭建一个免费的博客,零基础小白也可以学习哦!
+关注继续查看

1. 什么是Vuepress?


Vuepress是官方出品的一款极简静态网站生成器,它的初衷就是为了用于方便快速的撰写文档。


它主要包含了以下几个特点:

  • 非常简洁
  • 良好的SEO
  • 加载性能很高
  • 可自定义主题
  • 可以在markdown中写vue组件


上面几点主要是Vuepress比较突出的几个特点。对于博客网站SEO无疑是非常重要的,要是我们写的文章没人看,很容易失去动力的,Vuepress有着良好的SEO,除此之外,它对于有Vue基础的小伙伴是很友好的,我们自定义主题或者组件都是非常方便的,市面上的一些博客系统虽然也支持自定义主题,但是往往改起来比较费劲,需要下功夫学习。


我们来看下Vuepress官网:Vuepress

58.png

2. 准备工作

今天我们搭建的这个博客无需花费一分钱,全程免费!所需要准备的东西也是很少的!

基础环境:

  • 电脑安装了git
  • 电脑具有Node环境
  • VScode编辑器(可选)
  • gitee账号


我们的准备工作非常的简单,如果你是程序员,上面的几个环境和软件相信我不用多说,可以直接跳到第3节去。如果你是小白,那么我们先把环境搭建好即可。


环境搭建步骤:


2.1 node安装


去Node官网下载安装包:Node官网

选择自己电脑合适的版本安装即可,安装过程一直下一步。

59.png

2.2 git安装

去git官网下载安装包:git官网

选择自己电脑合适的版本安装即可,安装过程一直下一步。image.png

2.3 gitee账号注册


到gitee官网注册一个账号一个,待会儿我们会把博客网站部署到gitee上面:git官网61.png


3. 搭建步骤

3.1 初始化Vuepress

第一步:

在电脑任意位置创建文件夹,用于存放我们的博客系统,我这里新建了一个blog文件夹,如下图:

62.png

第二步:

在blog文件夹下打开命令行工具,如果安装了git,鼠标右键菜单里面会有git菜单,点击git bash here:63.png64.png


第三步:

先检查下node是否安装好,执行命令:

node -v




65.png


出现版本号则安装成功。

然后在blog文件夹下利用npm初始化,执行命令:

npm init -y

66.png67.png


第三步:

安装vuepress,执行命令:

npm install -D vuepress

68.png

由于网络可能安装会比较慢,耐心等待即可,失败的话重新多安装几次,出现上述界面则代表安装成功。69.png


3.2 初始化目录

第一步:

在blog文件夹下新建docs目录,然后在目录下新建README.md文件作为我们博客的首页,doc目录用于存放我们的文章和相关配置文件。70.png


然后修改README.md内容,具体的配置项目可参考官网:配置项

---
home: true
heroText: 一个分享各类资源的地方
tagline: 公众号:资料分享大师
actionText: 查看资源 →
actionLink: /软件资源/软件资源
features:
- title: 网盘资源
  details: 所有网盘资源均来自互联网,本网站不生产任何网盘资源,网盘资源是否失效需要自行判断。
- title: 黑科技软件
  details: 主要分享一些实用性的工具类、影视类、音乐类等等各种软件,均由互联网大佬提供。
- title: 教程资源
  details: 分享各类教程,包括编程、各类证书考试资源等等,本网站所有教程资源均来自互联网,若涉及侵权立马删除!
footer: 科技趣玩 | 资料分享大师
---


第二步:

修改package.json文件,该文件用于我们项目的打包和运行,修改后的代码如下:

{
  "name": "blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^1.9.7"
  }
}

第三步:

执行命令,将博客运行起来看看效果,执行命令:

npm run dev


出现如下界面则代表运行成功:71.png

点击链接访问:http://localhost:8080/

72.png


我们一个最简单的博客就搭建成功了。


3.3 编写文章

大家可以仔细看看README.md文件内容中有一个actionLink字段,这表示我们点击首页的按钮跳转到哪个页面。

在docs目录下新建”软件资源“文件夹,然后在文件夹内新建”软件资源.md“文件,然后编写内容:73.png

点击首页按钮,跳转访问效果如下:74.png


3.4 添加侧边栏


虽然我们文章添加了,但是没有侧边栏,我们需要修改一些配置文件。

在docs文件夹下新建.vuepress文件夹,然后在此文件夹下新建config.js,用于配置我们的博客相关配置,编写代码如下:

// docs/.vuepress/config.js
module.exports = {
  title: "科技趣玩",
  description: "分享各类资源、教程、黑科技软件、工具等等",
  markdown: {
    lineNumbers: true,
  },
  themeConfig: {
    sidebar: [
      {
        title: '软件资源',
        children: ['/软件资源/软件资源' ],
        initialOpenGroupIndex: 1 // 可选的, 默认值是 0
      }
    ]
  },
};


其中themeConfig属性中的sidebar字段就是用来配置我们的侧边栏的,具体配置项可参考官网。

效果如下:75.png

虽然侧边栏有了,但是似乎标题不大对劲,这是因为侧边栏取的是文章的标题,因为我们的文章没有写标题,所以稍微改造一下软件资源.md:


76.png

4. 更换主题


上面的步骤已经让我们搭建出了一个最简单的博客系统了,就和Vue官网长得差不多,可能有些小伙伴不太喜欢,所以我们可以取网上找一个好看的主题改一下。


比如我们就是用下图的这种主题:77.png

主题官网:主题

在blog目录下执行命令:


npm install vuepress-theme-reco --save-dev

然后在.vuepress/config.js文件中配置主题,代码如下

module.exports = {
  title: "科技趣玩",
  description: "分享各类资源、教程、黑科技软件、工具等等",
  theme: 'reco',
  markdown: {
    lineNumbers: true,
  },
  // themeConfig: {
  //   sidebar: [
  //     {
  //       title: '软件资源',
  //       children: ['/软件资源/软件资源' ],
  //       initialOpenGroupIndex: 1 // 可选的, 默认值是 0
  //     }
  //   ]
  // },
};

这个时候我们的博客就好看了一些了,当然了,如果还要更加个性化,建议去主题的官网认真查看各种配置规则。

78.png


5. 部署到gitee

我们本地把博客大致弄好之后,就要去部署了,让所有人都可以访问,这里我们就借助gitee来实现这一步。


5.1 新建仓库

在gitee上面我们新建一个仓库,用于存放我们的博客系统。79.png

这里有一点两点需要注意:

  • 仓库名称建议与个人空间地址保持一致,这样就可以就可以通过个人[空间地址.gitee.io]的形式访问了。
  • 仓库私有或者共有根据个人情况而定。

个人空间地址设置:80.png

仓库创建成功后如下图:

81.png


5.2 推送至gitee

仓库建好后,就需要将我们本地的博客系统推送至仓库。


第一步:

进入blog目录,打开打开gitbash命令行工具,打包博客,执行命令:

npm run build



82.png

第二步:

我们可以参考gitee仓库给我们的步骤操作,将代码推送到仓库。

逐行执行下列命令:

git init
git add .
git commit -m "初始化"
git remote add origin https://gitee.com/sharemore52/myblog-demo.git
git push -u origin "master"

执行完上面的命令后,我们的代码就推到了仓库中去:83.png


5.3 部署

在仓库页面点击服务菜单,选择gitpage选项:

84.png

选择部署分支和部署目录,然后点击启动:

  • 部署分支,不用改,默认master
  • 部署目录,选择docs/.vuepress/dist文件夹,刚刚我们执行打包命令生成的。


85.png

部署好后就会出现一个我们的博客地址了,访问试试:86.png

5.4 修改配置文件

可以看到我们上面访问的页面似乎出问题了,不要着急,只是我们项目配置的相关问题,我们在config.js文件中新增一段代码:

base: "./"

然后重新打包,部署,依次执行下面的命令:

npm run build
git add .
git commit -m "修改"
git push


仓库中的代码更新后,我们重新进入gitpage目录,重新启动,这个时候就能正常访问了:87.png


6. 常见问题解答

6.1 仓库是否可以私有?

可以的


6.2 博客地址为何多了一个路径?

像这种:https://sharemore52.gitee.io/myblog-demo/

仓库名和个人空间地址一样即可


6.3 如何做侧边栏自动化生成?

可以使用插件:vuepress-plugin-autobar

官网:官网


总结


到这里我们基本上就搭建好了个人博客,可以尽情的写文章了,总结一下大致分为以下几步:

  1. 安装vuepress
  2. 根据vuepress官网创建目录
  3. 创建gitee仓库
  4. 推送代码到gitee仓库
  5. 使用giteepages部署


本篇文章只介绍了如何搭建博客,如果想要让自己的博客丰富起来,一点要去官网看各种配置项规则,包括vuepress和自定义主题的官网。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java编程集合之HashSet+TreeSet
1.集合的应用 集合就是一个小容器 增删改查 2.集合使用的情形 各自集合的特点 3.底层原理 数据结构的存储方式 4.自己尝试实现
10 0
Unity3d:Exception: JNI: Init'd AndroidJavaClass with null ptr!
Unity3d 错误:Exception: JNI: Init'd AndroidJavaClass with null ptr! 解决:需要运行在安卓真机上。
1781 0
重构——4以查询取代临时变量(Replace Temp with Query)
以查询取代临时变量(Replace Temp with Query):你的程序以一个临时变量保存某一个表达式的结果。将这个表达式提炼到一个独立函数中,将这个临时变量所有的引用点替换为对新函数的调用,此后,新函数就可以被其他函数使用
1340 0
走进JavaWeb技术世界5:初探Tomcat的HTTP请求过程
这位大侠,这是我的公众号:程序员江湖。 分享程序员面试与技术的那些事。 干货满满,关注就送。  初探Tomcat的HTTP请求过程   前言: 1.
1738 0
【Web API系列教程】3.6 — 实战:处理数据(创建JavaScript客户端)
在本节,你将使用HTML、JavaScript和Knockout.js库为应用程序创建客户端。我们将按如下步骤建立客户端应用: 1, 展示books列表 2, 展示book详细信息 3, 添加一本新书 Knockout.js库使用了模型-视图-视图模型(MVVM)模式: 1, 模型是在业务域(在本例中是books和authors)中数据在服务器端的表现形式。
951 0
【LeetCode从零单排】No104 Maximum Depth of Binary Tree
题目 Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the longest path from the root node down to the farthest leaf node. 代码 /** * Definition for binary
815 0
+关注
小猪课堂
公众号:【资料分享大师】 B站:【小猪课堂】
74
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载