10分钟部署一个个人博客

关于vuepress这里没必要过多介绍,感兴趣的可以直接去官网了解,下面是官网首页地址截图 :https://v2.vuepress.vuejs.org/zh/

image-20240615160422538

透过这张图,我们也可以大致的对这个框架的特点有一定的认识,这就够了。其他的东西我们在使用过程中用到了会介绍。

本文就是基于他来进行的博客搭建以及部署。从搭建到部署10分钟绰绰有余了。


安装搭建

1. 环境依赖

安装之前务必先检测自己的环境:

image-20240615162007868

这一步很重要,他自己决定了你搭建的速度和舒适度,不管是做前端还是后端环境出错都是非常痛苦的事情,为了不必要的返工,请保证这一步顺利。


2. 项目创建

根据官方文档的描述,创建一个vuepress项目的方式不唯一,这里推荐使用懒人式一键创建,看下面命令:

npm init vuepress vuepress-starter

vuepress-starter就是你博客项目的项目文件夹名称,自己想怎么写就怎么写。

创建完之后,你的项目大致的目录结构差不多是下面这样的:

├─ docs
│  ├─ .vuepress
│  │  └─ config.js
│  └─ README.md
└─ package.json

docs/.vuepress 目录,即源文件目录下的 .vuepress 目录,是放置所有和 VuePress 相关的文件的地方。当前这里只有一个配置文件。默认还会在该目录下生成临时文件、缓存文件和构建输出文件。建议你把它们添加到 .gitignore 文件中。

# VuePress 默认临时文件目录
.vuepress/.temp
# VuePress 默认缓存目录
.vuepress/.cache
# VuePress 默认构建生成的静态文件目录
.vuepress/dist

pacjage.json中添加下面的script:

{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}
  • dev:本地运行
npm run docs:dev

下面的命令类似,但在本文中并不会用到,就不再赘述。

  • build: 部署打包

自定义博客信息

确保到这一步之前,你的项目可以通过npm run docs:dev命令成功跑起来。

首先,自定义我们能看到的首页一切,比如:下面是我自己博客的截图示例

image-20240615163231242

  • 修改主页按钮信息

找到项目中的那个README文件,修改其中的内容,效果如下,根据自己的需求修改之后,再次运行项目查看效果,你就知道具体改动了哪些东西。

image-20240615164601883

  • 修改主页logo和名称

找到项目中一个名为config.js的文件,这里可以修改右上角的功能导航栏、主页名称和座右铭;

image-20240615164804978


写博客

核心内容来了,这些外在的东西打理好之后,我们如何书写并上传自己的博文内容呢?

其实,在项目中有一个posts的文件夹,里面存放的就是我们的博客文章,他对应博客中右上角的Article路由;比如这样:

image-20240615165313620

需要注意的是,文章支持markdown语法,因此如果你了解一些他的语法基础,那将会如虎添翼,其中有一些写法格式是相对固定的。看下图,这是每一篇文章开头必须要写的,他将决定你的文章如何展示。

image-20240615165832850


其他个性化

如果你有其他自定义的需求,请参考下面的修改建议:

  1. 新增主题和插件

config.js中进行调整。

  1. 自定义文章列表的样式

请在docs>components>ArticleList.vue进行修改;

  1. 其他…

不懂就问.


自动部署

节约成本,一切从简,这里直接部署在GitHub上,通过强大的Actions,借助脚本一键自动部署,你要做的就是更新完博客记得git push更新你的项目即可,其他的构建流程由脚本完成,无需干预。

看下面的目录:

如果没有自行创建一个dedploy-docs.yml;

image-20240615170745806

workflows脚本内容如下:

name: 部署文档on:push:branches:# 确保这是你正在使用的分支名称- masterpermissions:contents: writejobs:deploy-gh-pages:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v3with:fetch-depth: 0# 如果你文档需要 Git 子模块,取消注释下一行# submodules: true- name: 设置 Node.jsuses: actions/setup-node@v3with:node-version: 20cache: npm- name: 安装依赖run: npm ci- name: 构建文档env:NODE_OPTIONS: --max_old_space_size=8192run: |-npm run docs:build> docs/.vuepress/dist/.nojekyll- name: 部署文档uses: JamesIves/github-pages-deploy-action@v4with:# 这是文档部署到的分支名称branch: gh-pagesfolder: docs/.vuepress/dist

项目上传到github之后,等待一段时间,脚本会创建一个名为gh-page的分支,我们在settings中找到Pages,选择该分支作为部署分支,并且如果你有自定义域名的需求,也可以在这里进行设置;

image-20240615171454324

image-20240615171740944


流程大致就是这样,下面列两个需要注意的问题:

  • 部署完成之后,你可以通过你的项目地址直接访问博客首页,如果没有自定义域名的情况下,此时你可能会遇到首页CSS样式没有加载的情况;

我们就需要在config.js中新增一个base字段,内容为/vblog/这里的vblog指的是你github上的那个项目名称;

  • 如果你使用了自定义域名,访问时就将该字段留空字串即可,如下:

image-20240615172042617


本文到此结束,有问题欢迎留言讨论。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go TOKEN机制与跨域处理方式

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

Web前端

1.HTML html语言就是一种标记语言&#xff0c;提供许多的标签&#xff0c;不同的标签功能不同&#xff0c;网页就是通过这些描述出来的。最终由浏览器 <!-- html注释 <!DOCTYPE html> 声明html语言的版本信息&#xff0c;为html5版本&#xff0c;告诉浏览器以html5…

亲测几十款随身wifi,全网最全随身WiFi避坑指南!最值得买的随随身wifi品牌推荐!

关于随身wifi我认为我是比较有发言权的&#xff0c;历经三年测评了几十种随身wifi&#xff0c;便宜的贵的&#xff0c;大牌的小厂的&#xff0c;电池款USB款等各种随身wifi。根据测试结果以及通过电商平台搜索、粉丝反馈、社交平台评价等综合测评结果。今天就跟大家分享一下&am…

设计模式-装饰器模式Decorator(结构型)

装饰器模式(Decorator) 装饰器模式是一种结构模式&#xff0c;通过装饰器模式可以在不改变原有类结构的情况下向一个新对象添加新功能&#xff0c;是现有类的包装。 图解 角色 抽象组件&#xff1a;定义组件的抽象方法具体组件&#xff1a;实现组件的抽象方法抽象装饰器&…

Vue45-分析脚手架结构

一、脚手架项目结构一览 二、src、public文件夹外的文件 2-1、babel.config.js文件 详细的配置规格&#xff1a;babel官网。 2-2、package.json包的说明书 build命令&#xff1a;代码写完了&#xff0c;最后使用build命名构建整个工程&#xff0c;将其变成浏览器能够运行的项…

2024.6.14 作业 xyt

使用手动连接&#xff0c;将登录框中的取消按钮使用第二中连接方式&#xff0c;右击转到槽&#xff0c;在该槽函数中&#xff0c;调用关闭函数 将登录按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c…

java:spring actuator添加自定义endpoint

# 项目代码资源&#xff1a; 可能还在审核中&#xff0c;请等待。。。 https://download.csdn.net/download/chenhz2284/89437274 # 项目代码 【pom.xml】 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId&…

基于Matlab的人脸表情识别系统(GUI界面)【W5】

简介&#xff1a; 该系统是一个基于Matlab开发的人脸表情识别应用程序&#xff0c;旨在识别输入图像中的人脸表情&#xff0c;并通过直观的图形用户界面&#xff08;GUI&#xff09;向用户展示识别结果。系统结合了图像处理、机器学习和用户交互技术&#xff0c;使用户能够轻松…

第2章 Rust初体验7/8:错误处理时不关心具体错误类型的下划线:提高代码可读性:猜骰子冷热游戏

讲动人的故事,写懂人的代码 2.6.6 用as进行类型转换:显式而简洁的语法 贾克强:“大家在查看Rust代码时,可能会注意到这一句。在这里,如果我们不使用as i32,编译器会报错,因为它在u32中找不到abs()方法。这是因为prev和sum_of_two_dice都是u32类型,u32类型并不支持abs(…

Leetcode 力扣117. 填充每个节点的下一个右侧节点指针 II (抖音号:708231408)

给定一个二叉树&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点&#xff0c;则将 next 指针设置为 NULL 。 初始状态下&#xff0c;所有 next 指针都…

讲透计算机网络知识(实战篇)01——计算机网络和协议

一、计算机网络和协议 1、网络和互联网络 1.1 网络、互联网、Internet 用交换机、集线器连接在一起的计算机构成一个网络。 用路由器连接多个网络&#xff0c;形成互联网。 全球最大的互联网&#xff1a;Internet。 1.2 网络举例 家庭互联网 图中的无线拨号路由器既是路由…

JAVAWEB--Mybatis02

Maven项目导入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/…

【代码随想录】【算法训练营】【第35天】[134]加油站 [135]分发糖果 [860]柠檬水找零 [406]根据身高重建队列

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 35&#xff0c;连休两天~ 题目详情 [134] 加油站 题目描述 134 加油站 解题思路 前提&#xff1a;数组 思路&#xff1a;全局贪心算法&#xff1a;最小累加剩余汽油为负数&#xff0c;说明…

师彼长技以助己(6)递归思维

师彼长技以助己&#xff08;6&#xff09;递归思维 递归思维-小游戏 思维小游戏 思维 小游戏&#xff1a;1 玩一个从1或2开始往上加的游戏&#xff0c;谁加到20就赢 如何保证一定赢呢&#xff1f;我们倒推&#xff0c;要先到20的话&#xff0c;谁先到17就赢&#xff0c;如此…

深入理解 Java 中的 synchronized 代码块

目录 前言 一、synchronized的工作原理 二、使用synchronized代码块的场景 三、编写synchronized代码块的最佳实践 四、何时使用 synchronized 代码块&#xff1f; 同步&#xff1a; 不同步&#xff1a; 五、Demo讲解 1.使用synchronized代码块减小锁的粒度&#xff0c…

勒索病毒剖析

2016年不自己勒索了 卖病毒 让别人勒索 傻瓜式勒索 黑客用的是非对称加密 全世界只有黑客有那把私钥 反向解密不了 传统爆破容易被检测&#xff0c;黑客慢速爆破&#xff0c;利用超级多的僵尸进行试错&#xff0c;慢慢试出来账号密码 因为一般运维设备在防火墙的白名单里&…

增值税发票OCR识别API在Java、Python、PHP中的使用教程

​增值税发票OCR识别是一种利用光学字符识别&#xff08;OCR&#xff09;技术&#xff0c;自动提取和识别增值税发票上的文字信息的过程。增值税发票是企业在销售商品或提供服务过程中产生的一种税务凭证&#xff0c;包含了关键的财务信息&#xff0c;如商品明细、金额、税率等…

HTTP文件下载

1. 简介 前后端版本下载的主要区别&#xff1f; 后端版本&#xff1a;浏览器直接访问下载链接&#xff0c;服务器响应头包含Content-Type: application/octet-stream&#xff0c;浏览器自动弹出下载框。前端版本&#xff1a;前端JS使用Ajax发起请求获取数据&#xff0c;完成过…

【Spine学习09】之导入皮肤两种方式[skin]

第一种&#xff1a;明确项目中某个角色是有两套皮肤的情况下 直接导入两套皮肤 1、添加SKIN皮肤指令 2、在ps中-文件-脚本-浏览【打开选中jsx脚本】 3、打开Spine 点击左上角&#xff0c;选择导入数据 就可以看到该角色的两套皮肤啦&#xff01; 第二种&#xff1a;刚开始角…

btstack协议栈实战篇--A2DP Sink - Receive Audio Stream and Control Playback

btstack协议栈---总目录_bt stack是什么-CSDN博客 目录 1.Main Application Setup 2.Handle Media Data Packet 3.log信息 这个 A2DP 接收端示例展示了如何使用 A2DP 接收端服务从远程 A2DP 源设备接收音频数据流。此外,还使用了 AVRCP 控制器来获取当前播放媒体的…