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分支进行合并
这样就是合并成功
输入需要发布的信息
点击同步
这就部署好了
就可以在编辑器里更改配置
原文地址：https://blog.csdn.net/qq_65966646/article/details/143858485
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！