搭建博客过程回忆以及我的问题-解决
记录自己搭建博客的过程
why
先搞懂博客是啥
可以把博客理解成“你的个人网页”——它本质是一堆“静态文件”(就是普通的 HTML、CSS、JS、图片这些文件)，只要把这些文件放到“能被公网访问的地方”，别人就能通过网址打开你的博客。
问题来了：怎么得到这堆 “静态文件”？怎么让它们被公网访问？
这就是搭建博客的核心：生成静态文件，托管静态文件
补充
把博客页面想象成 “你写的一篇带格式的作文”，这HTML、CSS、JS、图片文件就是组成这篇作文的不同部分：
HTML 文件:HyperText Markup Language（超文本标记语言）
是 “作文的文字内容本身”
比如博客的标题、你的文章内容、导航栏的 “首页 / 分类 / 关于我” 这些文字信息，都是写在 HTML 文件里的 —— 它是页面的 “骨架”，决定了页面里 “有什么内容”。
“HyperText（超文本）”：指的是不仅能放普通文字，还能放链接、图片、视频这些 “超越
纯文本” 的内容；
“Markup Language（标记语言）”：就是用
<title>、<p>、<img>这类 “标记标签” 来义内容的结构（比如哪段是标题、哪段是正文）。
CSS 文件：Cascading Style Sheets（层叠样式表）
是 “作文的排版和样式”
比如标题要多大字号、正文是什么颜色、导航栏要放在页面顶部还是侧边、背景要不要加颜色 —— 这些 “美观和排版” 的规则，都是写在 CSS 文件里的，它是页面的 “皮肤”，决定了内容 “长什么样子”。
“Cascading（层叠）”：多个 CSS 样式可以叠加生效（比如你给文字设了红色，又设了加
粗，两个样式会一起显示）；
“Style Sheets（样式表）”：就是把所有样式规则写在一个文件里，统一管理页面的外观。
JS 文件：JavaScript（和java没关系）
是 “作文的互动功能”
比如你点 “评论” 按钮会弹出输入框、点 “回到顶部” 按钮页面会自动滚到顶部、博客的访问量会实时变化 —— 这些 “点一下就有反应” 的功能，是靠 JS 文件实现的，它是页面的 “手脚”，决定了页面 “能做什么互动”。
如果说HTML 和 CSS 是 “静态的剧本”，页面加载出来就按剧本摆好样子；而 JS 是 “导演”，在页面运行时动态修改HTML的内容、CSS的样式，更具你的点击、输入等操作，执行对应的交互逻辑。
总之：
JS能动态修改HTML、CSS，实现页面的交互逻辑。
图片文件：
是 “作文里贴的照片”
比如你博客的头像、文章里插入的截图、背景图 —— 这些可视化的内容，就是普通的图片文件（比如 JPG/PNG 格式），是页面的 “装饰素材”。
“生成静态文件的逻辑”（为啥需要hexo和node.js）
如果不用工具，你就得自己写HTML/CSS/JS/来做博客页面–但对新手来说太麻烦了。而Hexo 就是帮你 “自动生成静态文件” 的工具：
你只需要写 Markdown 格式的文章（比如
我的第一篇博客.md），Hexo 会帮你把 Markdown 转换成 HTML 页面；你选个 Hexo 主题（比如 Fluid），Hexo 会自动把主题的 CSS/JS 和你的文章拼接成完整的博客页面；
最终 Hexo 会把这些 “拼接好的页面、样式、脚本” 打包成一堆静态文件——“带样式、带互动、能直接打开的文件”（存在你电脑的
public文件夹里）。但 Hexo 是 “用 Node.js 写的工具”—— 就像 “用英语写的说明书，得懂英语的人才读”，Hexo 的代码只有在`Node.js环境`里才能运行，所以你必须先装 Node.js，Hexo 才能 “听懂” 你输入的`hexo init`/`hexo s`这些命令。
“让静态文件被公网访问”的逻辑(为啥我们需要git和GitHub)
你电脑里的public文件夹里已经有了博客的静态文件，但别人没法直接访问你电脑里的文件 —— 得把这堆文件放到 “公网服务器” 上。
而GitHub就是免费的”公共服务器“
你现在GitHub上创建一个仓库(名字必须是 你的用户名+github.io)，把public里的静态文件传到这个仓库里）
GitHub就会把你给的文件托管起来，给你一个网址(就是你的用户名+github.io),让别人可以访问你的博客。
但怎么把public里的静态文件传到GitHub仓库里呢，就用到了Git——Git是”电脑和GIthub传文件之间的桥梁“，你输入git push或者（hexo 封装的 hexo d），就能把静态文件传到仓库里）
综上!!!我们需要的工具有：
hexo 静态博客框架，把你写的Markdown文章、主题样式自动打包成博客需要的静态文件，不用手写HTML/CS/JS
node.js hexo的运行环境，有了它，hexo才能解析你输入的命令，完成静态文章的生成
Github：提供免费的静态文件托管服务，让静态文件能被公网服务，同时还能备份这些文件
Git：连接你的电脑和GitHub的“传输工具”，负责把Hexo生成的静态文件传到GitHub仓库里
那么过程就是
准备工具
node.js
- 先下载node.js 长期维护版 从官网上正常安装即可
之后可以在打卡powershell 中检查一下是否安装成功
（两个命令）
node -v
npm -v
补充：
Node Package Manager ，Node包管理器
npm是**“前端 / Node.js 领域的应用商店”**，搭建博客的整个过程中，它的作用贯穿始终，，Hexo 就被开发者上传到了这个仓库里
编辑系统环境变量
- 其实对这一步我到没那么好奇了，查了一下，知识盲区有点多，先挖个坑吧，以后再补这个why
简单说：这一步是为了让 Node.js 和 npm “全局可用”，避免后续搭建 Hexo 时因为命令无法识别而卡壳。
Git
官网下载 基本默认 next >>安装
有个初始化新项目（仓库）主干名字设置为：main
配置终端模拟器以与 Git Bash 一起使用 选择minTTY
打开git 配置名字和邮箱
git config --glabal user.name "你的git用户名"
git config --glabal user.email "你的git登陆邮箱"
GitHub
- 注册
- 添加和生成密钥
ssh-ketgen - 将公钥添加到GitHub中 头像-settings-SSH and GPG keys-New SSH key-写title&刚刚生成的公钥
GitHub 是远程仓库，你的电脑是本地设备，两者通信需要 “身份验证”（证明 “你是你”）。常用的验证方式有 2 种：账号密码验证和SSH密钥验证。后续你用hexo d部署博客时，电脑会用私钥和 GitHub 通信，GitHub 用存的公钥验证身份，验证通过就会接收你的部署文件。这两步是 “给电脑办个 GitHub 的‘通行证’”，省得每次部署都输密码
具体过程
流程
- 安装hexo Powershell
npm install -g hexo-cli
验证安装 hexo -v
cd到要创建项目文件夹的目录 执行
hexo init blogcd到刚才新建的目录安装依赖，命令
npm install装 Hexo 博客的 “依赖包”创建静态文件和本地浏览
个性化
主题
项目根文件夹中的themes打开刚才安装好的Git，克隆主题
git clone git@github.com:fluid-dev/hexo-theme-fluid.git
克隆后将文件夹重命名为fluid并在根目录_config.yml文件更改主题名为fluid
评论插件
注册LeanCloud，新建开发版应用，进去应用凭证后复制好id key在主题配置中找到comments配置项设置好
关于页
新建文章
hexo new post "文章名"
Front-matter https://hexo.io/zh-cn/docs/front-matter
Markdown https://markdown.cn/
草稿
hexo new draft aaa
hexo s --draft
hexo p aaa
推送到GitHub
新建仓库 仓库名必须是 你的GitHub ID.github.io
安装部署插件 bash中
npm install hexo-deployer-git --save更改项目根目录的配置文件
根目录配置中
deploy:
type: git
repo: （你的项目HTTPS地址）
branch: main（你的默认分支）推送到GitHub仓库
hexo d打开网站查看效果 <你的GitHub ID>.github.io
我出现的问题以及解决
- 输入npm -v
显示无法识别，执行不了
原因：该命令需要以管理员身份打开
解决：点击下标 找到”Windows Powershell“ 按住Ctrl 点击，进去之后就可以正常输出版本
- 打开网站404
原因：仓库名不是自己的 github用户名.github.io
问题：更改后仍然404
原因：仓库page分支未配置
解决：仓库→Settings→Pages：选择main分支部署，路径选/root
