vuepress+gitee免费搭建个人在线博客（无保留版）

文章目录

  • 最终效果，一睹为快！
  • 一、工具选型
  • 二、什么是VuePress
  • 三、准备工作
    • 3.1 node 安装
    • 3.2 Git安装
    • 3.3 Gitee账号注册
  • 四、搭建步骤
    • 4.1 初始化VuePress
    • 4.2 安装VuePress
    • 4.3 初始化目录
    • 4.4 编写文章
  • 五、部署到Gitee
    • 5.1 创建仓库
    • 5.2 个人空间地址设置
    • 4.3 推送本地博客项目到Gitee仓库
    • 5.4 部署
  • 六、进阶
    • 6.1 优化项目目录结构
    • 6.2 配置文件
  • 七、终极之路
    • 7.1 最终效果，一睹为快
    • 7.2 快速搭建
    • 7.3 解决build失败
    • 7.4 解决上传本地代码到Gitee仓库后，没有“dist”目录
    • 7.5 解决GiteePage部署失败问题
    • 7.6 解决部署完成后，浏览器访问页面异常问题
  • 八、问题记录
  • 九、git 常见错误

最终效果，一睹为快！

在这里插入图片描述
在这里插入图片描述

一、工具选型

vuepress+gitee

二、什么是VuePress

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

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

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

官网地址：https://vuepress.vuejs.org/zh/

三、准备工作

环境搭建：

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

3.1 node 安装

Node官网地址：https://nodejs.cn/download/
选择自己电脑合适的版本安装即可，安装过程一直下一步。
比如Windows 64的电脑：
在这里插入图片描述

3.2 Git安装

Git官网地址：https://git-scm.com/
选择自己电脑合适的版本安装即可，安装过程一直下一步。
在这里插入图片描述

3.3 Gitee账号注册

Gitee官网地址：https://gitee.com/
我们会将博客网站部署到Gitee上面。
在这里插入图片描述

四、搭建步骤

4.1 初始化VuePress

电脑任意位置，创建空文件夹，用于存放我们的博客系统，你可以起任意名称。例如“blog”。
在这里插入图片描述

4.2 安装VuePress

  1. 在“blog”文件夹内，大概Git命令行，点击“git bash”。
    在这里插入图片描述
  2. 检查“node”是否安装成功，执行如下命令：
node -v

在这里插入图片描述

  1. 执行npm 初始化命令。
npm init -y

在这里插入图片描述
该命令执行完毕，在“blog”文件夹内，会生成一个“package.json”文件。

  1. 安装VuePress，执行安装命令。
npm install -D vuepress

由于网络可能安装会比较慢，耐心等待即可，失败的话重新多安装几次，出现下面的界面则代表安装成功。
在这里插入图片描述
当前目录如下图：
在这里插入图片描述

4.3 初始化目录

  1. 在“blog”目录下，新建“docs目录”，在“docs目录”下新建“README.md”文件，作为我们的博客首页。

在这里插入图片描述

  1. 然后修改README.md内容。
---
home: true
heroText: 一个分享互联网知识干货的老师傅
tagline: 抖音：划水老师傅
actionText: 查看知识 →
actionLink: /查看知识/查看知识
features:
- title: Gitee技术知识details: 所有知识，纯手工码字......
- title: 不建议报培训机构details: 因为2023年还在搞机构的，都是在割韭菜。
- title: 不建议入行details: 也许上一秒花费n个w学完，下一秒就失业了，再下一秒，你就又要转行了。
footer: 哪怕没钱赚 | 说些大实话 | 多点粉丝也是好的。
---
  1. 修改package.json文件，该文件用于项目的打包和运行，代码修改如下（新手第一次修改前，建议备份一份）：
{"name": "moyu178666","version": "1.0.0","description": "","main": "index.js","scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"},"keywords": [],"author": "","license": "ISC","devDependencies": {"vuepress": "^1.9.9"}
}
  1. 执行命令，将博客运行起来看看效果，执行命令：
npm run docs:dev

在这里插入图片描述
访问 http://localhost:8080/
页面效果：
在这里插入图片描述

该步骤执行失败的一些方案解决：
1. Error: error:0308010C:digital envelope routines::unsupported
解决：
卸载当前版本，下载安装低于17的node。下载地址：https://nodejs.org/dist/v16.19.0/

4.4 编写文章

页面上有一个按钮“查看知识”，此时点击该按钮，跳转的页面是“404”，因为我们还没有创建跳转页面。

打开“README.md”文件，“actionLink”，这个表示我们点击首页“查看知识”的按钮所要跳转的页面。

在“docs”目录下，新建“查看知识”文件夹，然后创建“查看知识.md”文件，然后随便写一些内容。
在这里插入图片描述
再次执行：npm run docs:dev之后，刷新浏览器，点击首页“查看知识 →”，页面跳转如下：
在这里插入图片描述

页面未跳转问题：
检查下README.md 中“actionLink: /查看知识/查看知识”，和你的文件目录路径是否一致。

五、部署到Gitee

我们本地将博客调试好后，就可以进行部署，让所有人都可以正常访问。

（目前博客实现为Demo版，之后我们进行导航栏等细节美化以及目录结构优化）

5.1 创建仓库

Gitee上，我们需要新建一个仓库，用于存放我们的博客系统。
在这里插入图片描述

需要注意：

  • 仓库名称建议与个人空间地址（下图）保持一致，这样我们的博客地址显示会比较友好。以[空间地址.http://gitee.io]的形式访问。
  • 仓库属性“公共”。（私有不能开启GiteePage服务）

5.2 个人空间地址设置

在这里插入图片描述

4.3 推送本地博客项目到Gitee仓库

  1. 进入blog目录，打开打开gitbash命令行工具，打包博客，执行命令：
   npm run docs:build

在这里插入图片描述

  1. 参考gitee仓库给我们的步骤操作，将代码推送到仓库。

    博客目录，打开Git bash依次执行下列命令。

    git init
git add .
git commit -m "Init"
git remote add origin https://gitee.com/xxxxxxx/myblog-demo.git 
git push -u origin "master"

执行玩上面的命令后，我们的代码就推到了仓库中去。
在这里插入图片描述

5.4 部署

在仓库页面点击服务菜单，选择gitpage选项：
在这里插入图片描述

选择部署分支和部署目录，然后点击启动：

  • 部署分支，不用改，默认master

  • 部署目录，选择docs/.vuepress/dist文件夹，刚刚我们执行打包命令生成的。

  • 建议勾选“强制使用HTTPS”。
    在这里插入图片描述

  • 点击“启动”，启动后，访问该连接。（老师傅已经关闭了自己的链接，所以已失效）

在这里插入图片描述
在这里插入图片描述

后续本地修改代码记得执行下面的命令，进入对应工作目录即可

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

六、进阶

6.1 优化项目目录结构

VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json
  • docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
  • docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
  • docs/.vuepress/theme: 用于存放本地主题。
  • docs/.vuepress/styles: 用于存放样式相关的文件。
  • docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
  • docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
  • docs/.vuepress/public: 静态资源目录。
  • docs/.vuepress/templates: 存储 HTML 模板文件。
  • docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
  • docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
  • docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
  • docs/.vuepress/enhanceApp.js: 客户端应用的增强。
当你想要去自定义 templates/ssr.html 或 templates/dev.html 时，最好基于 默认的模板文件 (opens new window)来修改，否则可能会导致构建出错。

对于上述的目录结构，默认页面路由地址如下：

文件的相对路径页面路由地址
/README.md/
/guide/README.md/guide/
/config.md/config.html

所以，看完目录结构后，我们可以着手去做一个多页面的静态博客网站了。

6.2 配置文件

  1. 创建config.js配置文件：docs.vuepress\config.js
  2. 修改配置内容，比如我们这一次想修改页签名称和加上一个title。
  3. 本地执行 npm run dev （给小白解释下，此处我从doc:dev 变成了dev，是因为我修改了"package.json"，后面不在赘述。）
  "scripts": {"dev": "vuepress dev docs","build": "vuepress build docs"},

module.exports = {title: '划水老师傅的博客',description: '一起摸鱼吧！'}

在这里插入图片描述

七、终极之路

7.1 最终效果，一睹为快

利用官方做好的模板“VuePress Theme Hope”，我们可以不需要动手写很多配置以及动脑子，就可以生成特别好看的“文档网站”或者“个人博客”。

官网地址：https://theme-hope.vuejs.press/zh/

文档类型网站示例：
在这里插入图片描述

博客类型网站示例：
在这里插入图片描述

7.2 快速搭建

建立在已经熟悉之前的基本使用前提下，我们不再赘述重复内容，直接进入正题。

  1. 首先，我建议你安装“pnpm”。
安装命令：npm install -g pnpm
  1. 进入任意目录，执行命令如下，表示在该目录下，生成”moyu178666“的项目，当然你也可以是“blog”或者“docs”：
pnpm create vuepress-theme-hope moyu178666

  1. 根据提示，选择对应选项即可，最后一步注意，选择你需要创建的类型“blog”或者“docs”。
    在这里插入图片描述

  2. 大功告成。

在这里插入图片描述

7.3 解决build失败

忘了截失败图…重新创建了项目，顺手将之前的“MyGitee”，改成了“my_gitee”。
在这里插入图片描述

使用package.json 更新包，就可以解决build失败问题，另外你可以用提供的其他命令进行我们之前提到的“run”等操作。
在这里插入图片描述

7.4 解决上传本地代码到Gitee仓库后，没有“dist”目录

需要删除标记的代码”src/.vuepress/dist/“。

在这里插入图片描述

7.5 解决GiteePage部署失败问题

在这里插入图片描述

部署目录未设置正确，比如如图，我的设置就是一次错误的尝试。正确的应该是“moyu178666/src/.vuepress/dist”。

7.6 解决部署完成后，浏览器访问页面异常问题

如果你是按照我的步骤，从第一步到现在，不会产生这个问题。

如果产生这个问题，你需要修改“src\.vuepress\config.ts”文件。

产生这个问题的原因是，你多创建了一个目录，比如“blog\src\.vuepress\”，导致路径错误，需要修改为：

base: "/src/",

在这里插入图片描述

八、问题记录

利用vuepress-theme-hope生成的项目。

config.js 修改 base: “/src/”,

Gitee马云的路径得设置。

打包失败时，利用package.json文件调试模式，更新安装包。

九、git 常见错误

error: failed to push some refs to ‘https://gitee.com/xxxxx/xxxxx.git’

产生该问题的原因：可能是因为在手动修改了远程仓库中的文件，导致一些文件在本地仓库和远程仓库上不一致，故而引发该错误。

解决方法：使用命令 git pull --rebase origin master 将远程仓库同步到本地，然后再重新add、commit、push就行了。当然引发这种错误的原因可能不是这个，但大家可以尝试一下。我就是通过该方法解决此错误的。

建议： 不要在远程仓库手动修改文件，应该要在本地仓库中进行修改，然后提交到远程仓库，从而保证本地仓库和远程仓库的一致性

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/140494.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

【JVM内存区域及创建对象的过程】

【JVM内存区域及创建对象的过程】

文章目录 JVM内存区域及创建对象的过程JVM内存区域JDK1.6、1.7、1.8内存区域的变化？创建对象的过程类的声明周期： JVM内存区域及创建对象的过程 JVM内存区域 JVM 内存区域最粗略的划分可以分为 堆 和栈，当然，按照虚拟机规范&…
阅读更多...
2023华为杯数学建模竞赛E题

2023华为杯数学建模竞赛E题

一、前言 颅内出血（ICH）是由多种原因引起的颅腔内出血性疾病，既包括自发性出血，又包括创伤导致的继发性出血，诊断与治疗涉及神经外科、神经内科、重症医学科、康复科等多个学科，是临床医师面临的重要挑战。…
阅读更多...
Linux 操作技巧

Linux 操作技巧

目录 一、shell-命令解释器 二、Linux中的特殊符号 三、命令历史--history 一、shell-命令解释器 shell——壳，命令解释器，负责解析用户输入的命令 ——内置命令（shell内置） ——外置命令，在文件系统的某个目录下&…
阅读更多...
如何取消显示Notepad++每行显示的CRLF符号

如何取消显示Notepad++每行显示的CRLF符号

新电脑中重新安装了Nodepad，打开记事本后发现出现了许多黑底的CR|LF标记，特别碍眼。 如何取消呢？ 视图 -> 显示符号 -> 取消勾选 显示行尾符操作步骤 预期效果
阅读更多...
SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据（包括删除多条数据）

SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据（包括删除多条数据）

本文适用对象：已有基础的同学，知道基础的SpringBoot配置和Vue操作。 在此基础上本文实现基于SpringBoot和Vue.js基础上的增删改查和数据回显、刷新等。 一、实时显示数据库数据 实现步骤： 第1步：编写动态请求响应类&#xff1a…
阅读更多...
Ubuntu上线一个JAVA环境微服务架构的系统

Ubuntu上线一个JAVA环境微服务架构的系统

项目介绍 项目背景： 已经有一套系统，迁移部署到新服务器，并使用不同数据，相同框架，提供对应业务服务 单机测试，从裸机-系统安装-软件架构-部署-数据迁移-发版-上线，整体流程与思路分享，包含后端、数据，测试、网络、运维等相关事务。 项目目的： 部署并迁移系统，…
阅读更多...
linux下CentOS安装mysql-5.7

linux下CentOS安装mysql-5.7

linux下安装mysql只需要在root用户下安装，普通用户也能使用 1.检查： 通过以下两条命令查看改系统下是否已存在mysql。 ps ajx | grep mysql ps ajx | grep mariadb通过指令如果只显示如下两条信息，则当前系统下不存在MySQL。 就可以直接进…
阅读更多...
【初阶数据结构】二叉树全面知识总结

【初阶数据结构】二叉树全面知识总结

二叉树详解 树的概念及其结构树的概念树的相关概念树的表示方法孩纸兄弟表示法双亲表示法（并查集） 树的实际应用 二叉树二叉树的概念二叉树的种类二叉树的性质二叉树的存储结构 二叉树顺序结构的实现堆的概念及结构堆向上、向下调整法堆的插入堆的删除堆…
阅读更多...
华为云云耀云服务器L实例评测 | 使用Docker快速搭建博客系统

华为云云耀云服务器L实例评测 | 使用Docker快速搭建博客系统

使用Docker快速搭建wordpress博客系统. 文章目录 使用Docker快速搭建wordpress博客系统.需要了解部署与管理工具介绍安装Docker配置镜像加速器下载镜像创建数据库容器创建wordpress博客容器访问博客初始化配置博客扩展和管理 WordPress总结 需要了解 本文主要讲述快速搭建自己的…
阅读更多...
Apache Doris 快速入门

Apache Doris 快速入门

1. 基本概念 FE，Frontend，前端节点，接收用户查询请求，SQL解析，执行计划生成，元数据管理，节点管理等 BE，Backend，后端节点，数据存储，执行查询计划…
阅读更多...
[npm]脚手架本地全局安装1

[npm]脚手架本地全局安装1

[npm]脚手架本地全局安装1 npm link 全局安装npm install 全局安装卸载全局安装的脚手架 该文章是你的脚手架已经开发完成的前提下，你想要本地全局安装该脚手架，便于本地使用脚手架的命令的情况 npm link 全局安装 如果本地开发的项目是个脚手架&#…
阅读更多...
Redis学习笔记--002

Redis学习笔记--002

Redis的JAVA客户端 文章目录 Redis的JAVA客户端一、Redis的Java客户端的种类二、Jedis2.1、使用步骤2.2、Jedis连接池 三、[SpringDataRedis](https://spring.io/projects/spring-data-redis)3.1、介绍3.2、RedisTemplate3.3、SpringDataRedis使用步骤3.4、SpringDataRedis的序…
阅读更多...
10.1网站编写(Tomcat和servlet基础)

10.1网站编写(Tomcat和servlet基础)

一.Tomcat: 1.Tomcat是java写的,运行时需要依赖jre,所以要装jdk. 2.建议配置好环境变量. 3.默认端口号8080(业务端口)可能会被占用,建议改一下(本人改成了9999). 4.另一个默认端口是8005(管理端口). 二Servlet基础(编写一个hello world代码): 整体分为7个步骤,分别是创建…
阅读更多...
linux安装mysql8.0

linux安装mysql8.0

最近在云服务器上部署服务，需要在linux端安装mysql8以上的版本，出现一些问题，记录一下。 1.首先卸载以前mysql版本。 （1）停止mysql服务。 systemctl stop mysqld.service (2)删除对应程序与文件。 查看安装…
阅读更多...
什么是机器学习？

什么是机器学习？

所谓的机器学习就是让机器去学习， 在这里关键词是学习两个字 在我们传统的学习算法的过程中， 我们真正要做的事情其实是让机器去执行，也就是说设计一个算法， 去让机器具体的完成一个任务，而不是学习一个任务 最早的机器…
阅读更多...
JumpServer开源堡垒机与爱可生云树数据库完成兼容性认证

JumpServer开源堡垒机与爱可生云树数据库完成兼容性认证

近日，中国领先的开源软件提供商FIT2CLOUD飞致云宣布，JumpServer开源堡垒机已经完成与爱可生云树数据库软件的兼容性认证。经过双方联合测试，云树数据库软件（简称：ActionDB）V1.0与杭州飞致云信息科技有限公司…
阅读更多...
雷达编程实战之静态杂波滤除与到达角估计

雷达编程实战之静态杂波滤除与到达角估计

雷达中经过混频的中频信号常常混有直流分量等一系列硬件设计引入的固定频率杂波，我们称之位静态杂波，雷达信号处理需要把这些静态杂波滤除从而有效的提高信噪比，实现准确的目标检测功能。 目标的到达角估计作为常规车载雷达信号处理的末端&am…
阅读更多...
针对敏感数据的安全转录服务

针对敏感数据的安全转录服务

即便在新冠肺炎疫情期间，继续保持了最高级别的机密性 新冠肺炎疫情带来的各种限制向所有服务提供商提出了挑战，促使提供商们想方设法采取更富想象力的新方法来满足客户的需求。澳鹏采用了一种由两种方案组成的工作机制，服务于客户机密材料的…
阅读更多...
解决Spring Boot 2.7.16 在服务器显示启动成功无法访问问题：从本地到服务器的部署坑

解决Spring Boot 2.7.16 在服务器显示启动成功无法访问问题：从本地到服务器的部署坑

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺 &a…
阅读更多...
【100天精通Python】Day69：Python可视化_实战：导航定位中预测轨迹和实际轨迹的3D动画，示例+代码

【100天精通Python】Day69：Python可视化_实战：导航定位中预测轨迹和实际轨迹的3D动画，示例+代码

目录 1. 预测的3D轨迹和实际轨迹的动画图，同时动态更新 2 真值轨迹设置为静态的，预测轨迹不断更新 3 网格的三维坐标系有旋转运动，以此全方位展示预测轨迹和真值轨迹之间的空间关系 1. 预测的3D轨迹和实际轨迹的动画图，同时动态更…
阅读更多...
最新文章

Copyright @ 2022~2023