快速操作——博客项目构建与GitHub部署_github线上部署教程
🦩博客需求选型
博客是一个项目，由此需要简单的项目开发流程
解释
博客项目简单流程实施示例
🦩从博客搭建到上线的全流程原理
两个步骤
项目文件的本地开发（内容生产）
- 生产环境准备：项目开发语言/环境确定、项目文件结构规划、测试环境搭建
- 开始生产：项目开始构建（写代码）
- 后续测试改进、生成部署文件
项目的服务部署（线上访问）
- 项目部署环境准备
- 项目线上部署测试
- 后续监控更新
你需要做的可以划分为这三步
- 生成博客项目结构
- 编写代码内容
- 上线博客项目
注意，这里使用最原始的手动操作，目的是掌握本质原理，工具只是使得更加便捷而不改变原理（不提工具是怕学的时候误以为工具才是重点）
- 掌握原理后才学习工具
- 所以以下的教程都会用最接近原始的手段操作，帮助理解原理
🦩实操指导上线你的博客项目到GitHub
只将原理，具体的内容细节自己丰富（如，设计自己博客的样式当然是自定义的，也没办法讲解）
🪶生成博客项目结构
- 项目结构是啥 ?为啥需要？
- 为了让你高效管理项目内容（不然文章东一块西一块自己都分不清楚啊/还有，前端页面有好多个，得整理好吧，不然给你一坨文件，分也分不清楚）
- 详细解释
- 总之，你需要建立一个有序的文件夹结构管理内容
- 在电脑上记笔记还要分几个文件夹呢，项目文件结构也是这个道理
- 所以，手动建立这个文件夹结构（文件夹里面是空的，就像你建立笔记文件夹的时候先建立结构后填充内容啊）
总文件夹名字自定义，能分辨出是你的博客项目就行（可以看到我这里用的是sea）
- 此外，建立好后继续再博客项目的根目录下添加以下两个文件
🪶编写代码内容
和你记笔记一样，建立好了文件夹就要记内容了，以下操作是完成博客界面的建立（不动的话要去学习一点前端和项目结构的知识）
使用编辑器编辑刚刚index文件里的内容（如果你知道如何使用vscode这类编辑器，想必编辑文件内容没问题）
- 如果不知道如何编辑，那么把文件后缀改为txt，复制以下内容到文件里保存后后缀改回html
复制以下内容到index.html里保存
<!DOCTYPE html> <html> <head> <title>我的网页</title> <style> body { background-image: url(\'https://haowallpaper.com/link/common/file/previewFileImg/17112428137401728\'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; height: 100vh; margin: 0; padding: 20px; color: white; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); } </style> </head> <body> <h1>欢迎来到我的网站！</h1> </body> </html>
这是一个博客首页的简单构建，本质是体会代码如何就创造出了前端界面，此后你想要什么结构自己改呗，没任何限制
🪶上线博客项目
项目构建完后（实际项目复杂，但我们是为了体会流程，所以学个简单示例就好），你就要上线项目到GitHub了
首先，注册GitHub账号（登不上是网络问题，自己去看相关访问教程）
接着建立一个仓库（注意是public就行，其它设置随意）
一些教程特别要求了仓库名字，其实随意起名就行，不碍事（原因一会儿会讲解）接着，上传你的项目文件（就是上述两个步骤建立的整个文件夹）
- 注意，拖动整个项目文件夹到GitHub文件上传界面就行
接着，选择分支，自定义一个分支
（如果你使用了.io的哪个仓库名不用这一步），选择这个分支点击上传
- 上传完后点击设置，选择pages选项，选择分支（如果你用io命名，就不用选择），选择branch为你自定义的分支，接着选择/root就行
然后点击 Visit site就行
试着用其它设备访问你的博客，如果电脑可以访问，其它设备不可以一般是GitHub还没部署的问题，不担心，睡一觉就好了
🦩解释
🪶GitHub项目博客托管不需要特定仓库名也可以的原因？
🪶githubpage必需要index.html在项目根目录下的原因
🦩总结
这就是构建上线博客的全流程
博客项目结构 和 代码内容你都可以自定义， 上线博客的平台也一样，学会了原理其他的本质都是相同手段
