怎样将网站项目迁移到其它电脑？
怎样跨平台管理更新网站？
怎样给网站DIY成最亮眼的崽？
网站的域名和备案怎么弄？
网站访问加载太慢怎么办？
欢迎收看从零开始的静态网站包工头生活😈

静态网站各种框架的搭建教程参考：

下面仅以本站Hexo方案为例展开。

一、新工地搭建步骤

⑴ 安装必要软件

安装 Node.js、Git Bash、GitHub Desktop，可能还需要安装你的本地 markdown 编辑器（例如 Obsidian）。

1、下载安装node JS 框架

下载安装node JS，配置环境变量：

2、安装 Git Bash（npm、cnpm）命令行
  1. 安装 Git 客户端：
  2. 新版的 Node.js 已经集成了 npm，可以分别执行 node -v，git -v，npm -v 查看当前版本号，验证是否成功安装。
  3. 将 npm 替换成 cnpm：npm使用国内淘宝镜像的方法
  4. npm 与 cnpm 的互相切换：npm太慢，淘宝npm镜像使用方法
3、连接 Github 远程与本地
  1. 将 Git 与 GitHub 帐号绑定：git初始化/配置/修改user.name 和user.email(文中还列举了 git、bash、cmd、shell 等命令行相关概念)
  2. 添加新电脑的密钥：
  3. 将本地仓库和远程仓库进行关联：
    • 执行 git remote add origin https://github.com/username/username.github.io.git
    • 安装 GitHub Desktop 软件也可以便捷地检查本地远程连接与同步状态。
    • 完成后你的网站文件夹就成功进驻新工地啦！
4、安装 Hexo 框架

参考 Hexo官方文档

  • 使用 npm 安装 Hexo：执行 npm install -g hexo-cli
    或仅安装必要部件：执行 npm install hexo
  • 或使用 hexoscript脚本 安装 Hexo
  • 执行 hexo -v 验证是否安装成功。

可能遇到的问题：

$ hexo -v
hexo-cli: 4.3.0
os: win32 10.0.19042
node: 14.17.4
v8: 8.4.371.23-node.76
uv: 1.41.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.17.1
modules: 83
nghttp2: 1.42.0
napi: 8
llhttp: 2.1.3
openssl: 1.1.1k
cldr: 39.0
icu: 69.1
tz: 2021a
unicode: 13.0

# 出现hexo-cli的版本号说明安装成功

⑵ 本地与远程同步

远端创建 master 和 hexo 两个分支，hexo 分支用来存放网站的原始文件 (站点目录)，master 分支用来存放生成的静态网页 (写作分支)。

参考 使用hexo，如果换了电脑怎么更新博客？ - 知乎，【GitHub】创建Git分支将Hexo博客迁移到其它电脑_remo0x的博客-CSDN博客

(❗以下 Git Bash 当前分支应为 hexo)

5、安装网站运行依赖插件
  1. 执行 Git 命令行
    • 进入网站文件夹：cd d:\SITE\FGH
    • 初始化文件夹：hexo init FGH
    • 安装必要依赖组件：cnpm install
    • 本地预览测试是否搭建成功：hexo s
  2. 在浏览器打开本地预览地址，看看你的网站是否还是熟悉的模样。
6、配置本地仓库的 Git 同步
  1. 本地切换当前分支为 hexo：执行 git checkout -b hexo
  2. 安装 Git 部署插件（若还没有这个插件）
    • 在网站根目录（D:\SITE\FGH）下安装 Git 部署插件：执行 npm install hexo-deployer-git --save
  3. 设置 git 管理文件夹：执行 git init 把网站根目录变成 Git 可管理的仓库（会增加一个隐藏文件夹.git，是 Git 用来跟踪和管理版本库的）
  4. （若远程仓库搬地方了）在 hexo网站根目录下的_config.yml 修改 部署配置：
deploy:
type: git
repo: git@github.com:username/username.github.io.git #建议使用git开头的ssh地址
branch: master
message: [message]

⑶ 网站源码更新工作流

7、本地仓库同步到远程 GitHub 仓库

  1. 在 .gitignore 文件（告诉 git 忽略部署的文件）内增加忽略推送到远端的文件路径。
  2. 提交站点源文件：

（切换分支到 master）

8、部署生成网页文件：

  • A、⭐依次执行 hexo clean、hexo g、hexo d
  • B、生成网页文件并推送至远程库 master 分支：执行 hexo clean && hexo deploy
  • 上新啦！马上打开浏览器在线访问网站看看。

二、⭐上新文章步骤

1、新建文章

  • A、网站根目录下执行 hexo n "文章标题"（在 \source\_posts\ 文件夹生成同文章标题名的 markdown 文件。文章标题必填，若含空格则用英文双引号包围）
  • B、自行在文章目录下（\source\_post）新建 md 文件，并配置自动生成 front-matter，或者手动复制 front-matter。

2、其他网站数据的迁移

3、使用 markdown 编辑器写作

目前推荐的本地markdown编辑器

参考文章：下了31个markdown编辑器，我就不信选不出一个好用的；
主流Markdown编辑器推荐

  • VS Code：超强全能，最适合于勘订代码和插入外挂标签，能满足常用需求。全格式支持，一个编辑器搞定代码和文章；支持多栏窗口预览，语法高亮、缩进参考线、标题折叠等功能。越用越习惯并且能发现其细节强大，目前主力使用。
  • Obsidian：最理想的 markdown 编辑器之一，除了其特色核心功能「双向链接」语法的通用性问题，几乎没有缺点，重要的是好看，有强大的第三方插件社区。目前主力使用。
  • Typora：主流的美丽的 markdown 编辑器，最适合惯用 word 撰写方法的人。最突出的功能是输入完一个 markdown 标签或 html 标签就能转为输出样式（代码立变富文本，即实时渲染功能）。被上文测评劝退所以未使用过，网上有许多使用教程和视频可供参考。
  • Mark Text：创作、配图、编辑样式、检查代码多模式一条龙的简洁美丽 markdown 编辑器。每种 markdown 标签都有快捷键；目前用着最舒服目前弃用的可选方案：一打开就会改变 Front-matter 内容以匹配默认的写作者模式的渲染显示，以及其他不支持渲染的标签，且打开程序要等 5 秒左右。
    • 写作者模式（Typewriter Mode）能像 Typora 一样实时预览，光标所在段落左侧的小图标 ⋮⋮ 集合了段落样式（即更改 markdown 标签），输入图片标签的开头会直接让你贴图片链接自动补全标签代码；
    • 专注模式（Focus Mode）除光标所在段落外的内容灰化，方便沉浸于当前输入文字；
    • 源码模式（Source Code Mode）能像 VSC 一样语法高亮。
  • Zettlr：专门为社科学生打造的开源 Markdown 编辑器。顶栏有类似 word 一样的编辑文字格式的按钮，同样方便修改标签，即使不懂 markdown 输入也可以排版。没有探索更多功能，因为在体验初期时就被主题颜色和字体丑到无法专注于内容，现弃用。
  • HexoEditor：代码小白优选，不用打开命令行而在文本编辑器里一键执行 hexo 新文章自动生成 front-matter、同步图床和代码仓库等 hexo 命令的开源 markdown 编辑器。窗口太小不适合长文编辑，只用过创建新文章时偷个懒不用复制 Front-matter，现弃用。

4、使用图片（两种方案）

  • A、本地链接（占 GitHub 网站仓库空间，占用加载网页时间）：小图、重要图。
    • 将图片放在跟文章同个目录下，在本地预览完成需要部署的时候，再将图片剪切到 /source/img/ 文件夹里，同时要修改博文中图片引用变成相对路径/img/picture.png。
  • B、⭐外部链接/图床（第三方存储服务失效则不显示）：大图、次要图。
部分图床上传工具

5、发布文章

  • A、⭐文章已在本地源码文件夹，执行命令：
    • hexo clean（清除之前生成的数据，仅需生成新文章网页时毋须清除）
    • hexo g（执行渲染，生成文章网页）
    • hexo s（本地预览网页效果，可跳过，但最好检查下）
    • hexo d（部署文章，发布到线上）
  • B、在语雀或其他在线平台保存的文章，按照自行配置的插件方案或自动部署方案来发布文章。

三、配置专属域名

⑴ 注册/转入/续费/赎回域名

万网（阿里云）域名服务

域名注册：

购买域名流程：域名查询 - 加入购物车（- 注册/登录账号）- 立即结算 - 选定年限、信息模板（- 创建个人/企业模板）、优惠、协议 - 立即支付 (优惠券 新人特惠 续费优惠 )

⭐阿里云域名控制台

⑵ 实名认证

域名管理 - 未实名认证域名 - 实名认证。

⑶ 域名解析

阿里云域名解析设置

记录类型解释
记录类型含义记录值填写
A（地址记录/IP 指向）将域名指向一个 IP 地址。服务器 IP
CNAME（别名指向）将一个域名指向另一个域名。空间商提供的域名
AAAA指定主机名/域名对应的 IPv6 地址记录。解析到 IPv6 的地址
NS（Name Server）向下授权 指定 该域名的解析权 。
购买域名后，NS 处默认的 NS 记录指向 域名提供商 。
想换 DNS 服务商时，修改 NS 记录域名授权对象即可。		DNS 服务器
MX（邮件交换记录）要设置邮箱让邮箱能收到邮件时添加。邮件服务器的 IP 地址
或企业邮局提供的域名
TXT大都用来做 SPF 记录（Google、QQ 等企业邮箱的反垃圾邮件设置）255 长度内的任何东西
显性 URL从一个地址 301 重定向到另一个地址时添加。要跳转到的网址
隐性 URL不会改变地址栏中的域名。要引用内容的网址

主机记录：

设置类型含义
www解析域名为 www.fgggh.cn
@直接解析主域名 fgggh.cn
*泛域名解析，用于匹配其他所有域名

线路类型：

线路名称选择
默认必须添加，否则只有单独指定的线路才能访问网站。如果双线解析，建议「默认」。若空间商只提供了一个 IP 地址或域名，选择「默认」。
联通单独为「联通用户」指定服务器 IP，其他用户依然访问「默认」。
搜索引擎指定一个服务器 IP 让蜘蛛抓取。

TTL：

（Time To Live）域名解析的生效时间。
指地方 dns 缓存域名记录信息的时间，缓存失效后会再次到域名解析服务商获取记录值。
数值越小，修改记录生效时间越快。添加新的解析记录，生效时间 5 分钟。修改已经添加的解析记录，生效时间 1 小时。修改为万网 DNS 服务器后首次进行域名解析，生效时间 1 小时。国内域名 DNS 修改，修改时间最长 6 小时。国际域名 DNS 修改，修改时间最长 48 小时。

TTL 变更时间含义
600（10 分钟）正常情况下使用。
60（1 分钟）若经常修改 IP，修改记录一分钟即可生效。
长期使用，解析速度会略受影响。
3600（1 小时）IP 极少变动（一年几次）的建议选择，解析速度快。
如果要修改 IP，提前一天改为 60，即可快速生效。

网站访问域名解析

添加两条记录，记录类型 CNAME，主机记录分别是 www 和@，记录值是主机/平台提供的 CNAME 地址。

判断域名解析是否生效：Win+R → 输入 cmd → 输入 ping https://www.fgggh.cn → 出现 ip✔

DNS 解析

DNSPod的动态域名解析
解析内网/外网/IPV6地址
搭建个人网站（2）：Github和Vercel建站以及配置DNS

以下这些都是可选的着手部分。

四、网站维护优化

⑴ CDN 加速

⑵ 源码优化

《一只照葫芦画瓢的小松鼠囤的干货》

⑶ 访问优化

1、网页加速

  • PWA 特性 pwa；
  • 配置 pjax 插件：基于jQuery框架，点击一个站内链接时， 不做页面跳转， 而只是页内部分区域刷新。
  • 自动为 CSS 增加前缀 css_prefix

2、对外推广

五、云服务器

阿里云服务器管理控制台
资金管理-收支明细续费管理