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

news2024/10/4 6:37:26

文章目录

  • 最终效果，一睹为快！
  • 一、工具选型
  • 二、什么是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.coloradmin.cn/o/1033350.html

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

相关文章

APK的反编译，签名，对齐

APK的反编译，签名，对齐

APK的反编译，签名，对齐 – WhiteNights Site 2023年9月22日 标签：Android, 应用开发 记录下相关的命令行参数。 APK的打包与解包 java -jar apktool.jar 首先，需要一个jar包，以我在用的为例：apktool_2.8.…
阅读更多...
EasyWindow - Android 悬浮窗框架

EasyWindow - Android 悬浮窗框架

官网 https://github.com/getActivity/EasyWindow 项目介绍 本框架意在解决一些极端需求，如果是普通的 Toast 封装推荐使用 Toaster 集成步骤 如果你的项目 Gradle 配置是在 7.0 以下，需要在 build.gradle 文件中加入 allprojects {repositories {/…
阅读更多...
@DateTimeFormat 和 @JsonFormat 的详细研究

@DateTimeFormat 和 @JsonFormat 的详细研究

关于这两个时间转化注解，先说结论 一、介绍 1、DateTimeFormat DateTimeFormat 并不会根据得到其属性 pattern 把前端传入的数据转换成自己想要的格式，而是将前端的String类型数据封装到Date类型；其次它的 pattern 属性是用来规范前端传入…
阅读更多...
jenkins自动化部署springboot、gitee项目

jenkins自动化部署springboot、gitee项目

服务器需要安装jdk11、maven、gitee 1. jenkins安装 # yum源 sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo # 公钥 sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io-2023.key # 安装 yum install jenkins如果yum源报…
阅读更多...
java内嵌浏览器CEF-JAVA、jcef、java chrome

java内嵌浏览器CEF-JAVA、jcef、java chrome

java内嵌浏览器CEF-JAVA、jcef、java chrome jcef是老牌cef的chrome内嵌方案，可以进行java-chrome-h5-桌面开发，下面为最新版本（2023年9月22日10:33:07） JCEF（Java Chromium Embedded Framework）是一个基于…
阅读更多...
Websocket集群解决方案以及实战（附图文源码）

Websocket集群解决方案以及实战（附图文源码）

最近在项目中在做一个消息推送的功能，比如客户下单之后通知给给对应的客户发送系统通知，这种消息推送需要使用到全双工的websocket推送消息。 所谓的全双工表示客户端和服务端都能向对方发送消息。不使用同样是全双工的http是因为http只能由客户端主动发…
阅读更多...
如何借用敏捷实现IT对数字化转型支持 | 2023佛山敏捷之旅成功举办

如何借用敏捷实现IT对数字化转型支持 | 2023佛山敏捷之旅成功举办

9月17日，2023年佛山之旅暨DevOps Meetup在佛山圆满落幕。本次大会以助力大湾区金融和互联网企业敏捷DevOps实施和效能提升为主题，吸引了150余位来自各地的金融和互联网企业相关从业人员齐聚一堂，共同探讨行业最佳实践、最新发展趋势以及最新应…
阅读更多...
flask_apscheduler实现定时推送飞书消息

flask_apscheduler实现定时推送飞书消息

需求场景： 实现一个flask服务，通过接口控制一个定时任务任务（对酒店订房情况进行检查）的开启和停止。要求定时任务完成后，可以通过飞书机器人推送任务完成的消息。 展现效果： 启动定时任务 关闭定时任务…
阅读更多...
聊聊wireshark的进阶使用功能 | 京东云技术团队

聊聊wireshark的进阶使用功能 | 京东云技术团队

1. 前言 emmm，说起网络知识学习肯定离不来wireshark工具，这个工具能够帮助我们快速地定位网络问题以及帮助正在学习网络协议这块的知识的同学验证理论与实际的一大利器，平时更多的只是停留在初步的使用阶段。也是利用部门内部的网络兴趣小组…
阅读更多...
Webpack使用plugin插件自动在打包目录生成html文件

Webpack使用plugin插件自动在打包目录生成html文件

我们使用html-webpack-plugin插件可以自动在打包代码目录生成html文件 使用步骤： 一、安装依赖 在控制台中输入如下代码： npm i -D html-webpack-plugin 二、在webpack.config.js中配置插件 const HTMLPlugin require("html-webpack-plugin&q…
阅读更多...
Activiz 9.2 for Linux Crack

Activiz 9.2 for Linux Crack

Activiz 9.2 在 C#、.Net 和 Unity 软件中为您的 3D 内容释放可视化工具包的强大功能。 ActiViz 允许您轻松地将 3D 可视化集成到您的应用程序中。 ActiViz 功能 用 C# 封装的 3D 可视化软件系统 允许在 .NET 环境中快速开发可投入生产的交互式3D 应用程序 支持窗口演示基础 (…
阅读更多...
VS2015没有“Win32控制台应用程序”模块

VS2015没有“Win32控制台应用程序”模块

发现问题 成功安装VS2015专业版之后（安装期间遇到“安装包缺失或损坏的问题”，参考安装VS2015时提示“安装包丢失或损坏”成功解决），由于它没有在桌面创建快捷方式，于是我在“开始”处找到与VS2015有关的图标&#xf…
阅读更多...
设置github的默认分支

设置github的默认分支

设置github的默认分支 更换默认分支默认分支的作用 更换默认分支 之前默认的分支想main, 现在想更换默认的分支 点击main, 可以看到有两个分支: main和gpuVersion, 可以看到这里默认main分支为default 如果想设置gpuVersion作为default,可以点击View all branches, 进入下一个…
阅读更多...
【校招VIP】前端计算机网络之HTTP和HTTPS

【校招VIP】前端计算机网络之HTTP和HTTPS

考点介绍： 为了解决HTTP协议的缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL/TLS协议，SSL/TLS依靠证书来验证服务器的身份，并为浏…
阅读更多...
流媒体及直播相关知识

流媒体及直播相关知识

文章目录 前言一、流媒体1、基本概念2、流式传输3、流媒体技术原理4、流媒体传输模式5、H.264 流媒体传输系统框架 二、直播1、直播中使用的流媒体协议2、直播的模块划分3、视频直播流程①、推流到服务器②、服务器流分发 前言 本文主要讲解流媒体及其直播相关知识&#xff0c…
阅读更多...
Linux 线程属性相关函数

Linux 线程属性相关函数

pthread_attr_t就是对应线程的属性 /*#include <pthread.h>int pthread_attr_init(pthread_attr_t *attr);初始化线程属性变量int pthread_attr_destroy(pthread_attr_t *attr);释放线程属性资源int pthread_attr_getdetachstate(const pthread_attr_t *attr, int *deta…
阅读更多...
无人机“长坡”上，谁是滚出“厚雪球”的长期主义者?

无人机“长坡”上，谁是滚出“厚雪球”的长期主义者?

“股神”巴菲特&#xff0c;曾提出过“长坡厚雪”的理论&#xff1a; 人生就像滚雪球&#xff0c;重要的是发现很湿的雪和很长的坡。 运用到企业经营上&#xff0c;“长坡”指的是企业所布局的领域发展潜力足、空间大&#xff1b;而“湿雪”&#xff0c;指的是企业竞争力强、…
阅读更多...
Flowable主要子流程介绍

Flowable主要子流程介绍

1. 内嵌子流程 &#xff08;1&#xff09;说明 内嵌子流程又叫嵌入式子流程&#xff0c;它是一个可以包含其它活动、分支、事件&#xff0c;等的活动。我们通常意义上说的子流程通常就是指的内嵌子流程&#xff0c;它表现为将一个流程&#xff08;子流程&#xff09;定…
阅读更多...
发送实时音频数据到udp服务

发送实时音频数据到udp服务

由于浏览器不能直接连接udp服务&#xff0c;所以需要搭建一个websocket服务做中转&#xff0c;让websocket服务连接udp服务 1、vue开发获取实时音频数据并按4096分包后添加rtp协议头发送到websocket服务&#xff08;连接websocket自行编写连接到127.0.0.1:8889&#xff09; da…
阅读更多...
代码随想录算法训练营 动态规划part06

代码随想录算法训练营 动态规划part06

一、完全背包 卡哥的总结&#xff0c;还挺全代码随想录 (programmercarl.com) 二、零钱兑换 II 518. 零钱兑换 II - 力扣&#xff08;LeetCode&#xff09; 被选物品之间不需要满足特定关系&#xff0c;只需要选择物品&#xff0c;以达到「全局最优」或者「特定状态」即可。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023