VuePress+Github 部署一个零成本静态站点(博客)

VuePress链接:Home | VuePress (vuejs.org)https://vuepress.vuejs.org/

一.运行环境准备

需要准备安装VSCode(编辑器)和前端运行环境(nvm,node.js和npm)

• VSCod安装链接:Visual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/
• 前端环境:注意需要先安装nvm,而nodejs版本最好装20以上nvm安装详细教程（卸载旧的nodejs，安装nvm、node、npm、cnpm、yarn及环境变量配置）-CSDN博客

二.初始化项目

1.在选定的文件夹中打开终端

2.在终端输入:npm init vuepress-theme-hope@latest 文件名

我取的名字为blog

npm init vuepress-theme-hope@latest blog

3.初始化完成

这样子就是在本机搭建起来了,我们只需要把代码发布到github,每次发布让github自动编译我们的代码进行访问

把代码发布到GitHub,需要来到github创建一个仓库用来存储这个博客对应的代码

三.GitHub创建仓库

首先需要一个GitHub账号,打开github去注册如何注册GitHub账号？——一步一步教你轻松上手！_github账号注册教程-CSDN博客

1.新建仓库

2.填写仓库信息

README 通常是访问者在访问您的仓库时看到的第一项。README 文件通常包括以下信息：

• 项目的作用
• 为什么该项目有用
• 用户如何开始使用该项目
• 用户可以在何处获得有关项目的帮助
• 谁维护项目并为项目做出贡献

3.创建分支

仓库创建完之后还需要创建一个新的分支

• main分支

main这个分支主要用来存储刚刚生成的blog的代码

• 存储静态htm分支

还需要一个新的分支来存储静态的html编译好的代码

所有的html静态页面都存储在blog.pages里面

4.对外访问Gitpages

需要让我们的github支持对外访问,需要点击setting设置,设置完成后点击save

博客发布到GitHub上面之后也同样是通过这个地址来进行访问

四.GitHub Actons

1.access TOKEN(访问令牌
)

什么是 Access Token_accesstoken-CSDN博客

需要将代码发布到对应的分支里面就需要access TOKEN

这就是生成的密钥

• 进入创建的仓库

• 接下来用VScode打开blog文件

2.本地连接远程

这个文件就是的作用就是
文件发布到github上面,他就会自动根据这个文件去编译代码然后进行部署

• 这个文件需要改两个地方

• 将本地的代码绑定到远程仓库

• 复制远程仓库的地址

• 绑定成功后将本地的代码跟远程的main分支进行合并

这样就是合并成功

输入需要发布的信息

点击同步

这就部署好了

就可以在编辑器里更改配置