如何在 Windows 系统下创建博客本文借鉴于爱扑 bug 的熊仅作为 Windows 系统搭建博客的补充记录。原文链接点击跳转文章作者睡觉时不困博客是个人输出的最好途径之一。一个属于自己的独立博客不仅可以沉淀知识还能作为一张个人名片。本文记录我从零搭建一个 Hexo 静态博客并配合 GitHub、Netlify、CloudFlare 上线、配域名、配 HTTPS 的完整流程。整个过程完全免费只要你有一个能上网的 Windows 电脑 一个稳定的 VPN 一个 Google 账号 一个 GitHub 账号。0. 前置准备0.1 必备工具工具用途下载地址VPN稳定访问 GitHub、Netlify、CloudFlare自备Google 账号注册 Netlify / CloudFlarehttps://google.comGitHub 账号代码托管 触发 Netlify 自动部署https://github.comGoHexo 依赖早期需要https://go.dev/doc/installGit推送代码到 GitHubhttps://git-scm.com/downloads/winNode.jsHexo 运行环境 npmhttps://nodejs.org/en/download0.2 基础命令行速查cmd为了方便后续操作先熟悉几个常用命令命令说明示例盘符名称 冒号切换盘符E:dir查看当前路径下的内容dircd 目录进入单级目录cd itheimacd 目录1\目录2\...进入多级目录cd itheima\JavaSEcd ..退回上一级目录cd ..cd \退回盘符根目录cd \cls清屏clsexit退出终端exit0.3 验证安装Win R→ 输入cmd打开终端依次执行node-vnpm-vgit--version只要都出现版本号就 OK 了。一、安装 Hexo全局安装 Hexo 命令行工具npminstallhexo-cli-g可能遇到的问题镜像源配置下载过程中如果报错多半是 npm 镜像源问题。解决方案# 重置为官方源npmconfigsetregistry https://registry.npmjs.org/# 或者切换到国内淘宝源npmconfigsetregistry https://registry.npmmirror.com查看当前镜像源是否正确npmconfig get registry返回https://registry.npmjs.org/或https://registry.npmmirror.com即可。这两个源只能保留一个不要混用。设置好后重新执行npm install hexo-cli -g看到正常下载日志即成功。二、初始化博客项目2.1 创建博客目录在 C 盘用户目录下新建一个Blog文件夹。建议直接放 C 盘其他盘符可能会有权限限制反而麻烦。2.2 初始化hexo initC:\Users\你的用户名\Blog执行后会自动从 GitHub 克隆hexo-starter模板安装依赖INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git INFO Install dependencies INFO Start blogging with Hexo!看到Start blogging with Hexo!就成功了。2.3 安装其余依赖cdC:\Users\你的用户名\Blognpminstall2.4 本地预览hexo server浏览器打开 http://localhost:4000看到 Hexo 默认界面说明本地跑起来了。2.5 给 package.json 加一条快捷命令打开 Blog 文件夹里的package.json在scripts里加上netlify这一行scripts:{build:hexo generate,clean:hexo clean,deploy:hexo deploy,server:hexo server,netlify:npm run clean npm run build// 新加这一行}这一行后面 Netlify 建站时要用到提前配好省事。三、推送到 GitHub3.1 创建 GitHub 仓库打开 https://github.com/右上角加号 →New repository给仓库起个名字建议英文小写比如my-blog点击Create repository。3.2 本地推送到远程# 进入博客目录cd你的博客目录路径# 初始化 Gitgitinit# 添加所有文件gitadd.# 提交gitcommit-mmy blog first commit# 添加远程仓库地址替换为你的仓库 URLgitremoteaddorigin https://github.com/你的用户名/你的仓库名.git# 重命名默认分支为 maingitbranch-Mmain# 推送gitpush-uorigin main3.3 首次推送认证第一次推送 GitHub 会要求登录HTTPS 地址终端会提示输入 GitHub 用户名和密码推荐用 Personal Access Token 当密码SSH 地址如果你配置过 SSH 密钥则直接通过3.4 常见坑坑 1远程仓库没添加成功gitremote-v如果没显示你的 GitHub 地址重新执行gitremoteaddorigin https://github.com/你的用户名/你的仓库名.gitgitpush-uorigin main正确结果类似origin https://github.com/quanshuyang/mu-blog (fetch) origin https://github.com/quanshuyang/mu-blog (push)坑 2开了 VPN 也推送失败让 Git 走代理端口根据你的 VPN 客户端调整常见是 7890gitconfig--globalhttp.proxy http://127.0.0.1:7890gitconfig--globalhttps.proxy http://127.0.0.1:7890然后再次git push -u origin main。认证通过后终端出现推送成功日志说明代码已经上云了。四、用 Netlify 建站Netlify 提供免费的静态网站托管服务能自动从 GitHub 拉取代码并构建。4.1 注册并登录打开 https://www.netlify.com/用 GitHub 账号一键登录这一步需要 VPN。4.2 新建站点进入控制台点击Add new site→Import an existing project选择GitHub授权 Netlify 访问你的仓库选中刚才创建的my-blog仓库4.3 配置构建命令这一步很关键填错就构建失败配置项填写内容Base directory留空Build commandnpm run netlifyPublish directorypublicFunctions directorynetlify/functions这里npm run netlify就是前面在package.json里加的那条命令本质是npm run clean npm run build确保每次部署都是干净的状态。4.4 部署点击Deploy mu-blog等待几分钟后 Netlify 会自动构建完成并给你一个免费域名例如blog-qsy.netlify.app。打开它看到 Hexo 默认首页博客就上线了。五、绑定自定义域名免费的.netlify.app域名虽然能用但太丑了。咱们花点小钱买个自己的域名。5.1 购买域名国内首推阿里云万网https://wanwang.aliyun.com/选个自己喜欢的后缀.cn、.com、.top等价格从几块到几十块一年不等。购买后会要求创建模板、提交审核注意不是实名认证后续还要单独做。5.2 配置域名解析在阿里云域名控制台 → 域名列表 → 找到你的域名 → 解析设置主机记录记录类型记录值CNAME你的域名.netlify.appwwwCNAME你的域名.netlify.app记录值就是 Netlify 给你分配的免费域名。⚠️ DNS 全球同步需要一段时间通常几分钟到几小时耐心等。5.3 在 Netlify 添加自定义域名回到 Netlify 站点设置 →Domain management→Custom domains→ 添加你的域名。因为前面已经做过解析一路默认下一步就行。5.4 启用 Netlify 全球 CDN在 Netlify 域名设置里点击Netlify DNS启用即可。这一步能让博客通过 Netlify 的海外 CDN 节点分发访问更快。六、用 CloudFlare 加速6.1 注册 CloudFlare打开 https://www.cloudflare.com/zh-cn/plans/注册账号并登录。6.2 添加站点输入你的域名选择免费套餐。6.3 添加 DNS 记录CloudFlare 通常会自动扫描到几条记录。重点检查CNAME 记录指向 Netlify 的那条缺失的话手动补上。6.4 更改名称服务器这一步 CloudFlare 会给教程核心是把阿里云默认的 DNS 服务器改成 CloudFlare 的打开阿里云域名控制台 → 域名列表找到你的域名 → DNS 修改把两个 DNS 服务器地址替换为 CloudFlare 提供的如xxx.ns.cloudflare.com提交CloudFlare 会发邮件通知配置完成。七、配置 HTTPS回到 Netlify配置完成后 CloudFlare 会自动签发证书。7.1 确认 DNS 解析Netlify →Domain settings→HTTPS→ 确认解析已经生效。7.2 自动安装证书Netlify 会通过 Let’s Encrypt 自动签发证书等待一段时间后看到绿色对勾就说明 HTTPS 配置完成了。八、验证成果打开你自己的域名例如 https://blog.quanshuyang.cn看到 Hexo 默认的星空界面说明博客已经全部配置成功可以试着在不开 VPN的情况下访问能正常打开就代表一切顺利。九、写在最后到这里一个独立的、带自定义域名 HTTPS CDN 加速的个人博客就彻底搭建完成了。整个流程零成本除了域名年费非常适合作为长期输出的载体。后续可以做什么换主题Hexo 官方有大量主题Next、Butterfly、Yilia 等可以在_config.yml里切换。写文章执行hexo new 文章名在source/_posts/下编辑 markdown 文件。配评论系统接入 Gitalk、Waline、Twikoo 等。图床用 GitHub jsDelivr 或腾讯云 COS 做图片托管。Hexo 博客的写作方法、主题配置、插件扩展内容很多建议去 Hexo 官方文档 自己摸索遇到问题再来搜。我以后也会不定期更新博客分享自己学到的知识和所见所闻。欢迎大家持续关注附录常用命令速查操作命令新建文章hexo new 标题本地预览hexo server清理缓存hexo clean生成静态文件hexo generate部署到 Netlifynpm run netlify推送代码到 GitHubgit add . git commit -m msg git push 关键命令汇总# 第一次安装npminstallhexo-cli-ghexo initC:\Users\你的用户名\BlogcdC:\Users\你的用户名\Blognpminstall# 本地预览hexo server# 推送到 GitHubgitadd.gitcommit-mupdategitpush