type
status
date
slug
summary
tags
category
icon
password

第一部分

本文详细介绍了如何使用 Hexo 框架搭建一个个人博客,并将其部署到 GitHub Pages 和 Cloudflare Pages 上。主要内容包括:
  • 环境准备:安装 Node.js 和 Git
  • 配置 Git 和 GitHub:设置 SSH 密钥,创建 GitHub 仓库
  • 初始化 Hexo 项目:安装 Hexo,创建新博客
  • 部署到 GitHub Pages:配置部署设置,推送静态文件
  • 部署到 Cloudflare Pages:连接 GitHub 仓库,自动部署
  • 基本使用方法:创建新文章,本地预览,发布更新
这个教程适合那些想要快速搭建个人博客,但又不想花费太多成本的人。通过使用 Hexo、GitHub 和 Cloudflare 的免费服务,您可以轻松创建一个高效、简洁的博客网站。

1. 事前准备

  1. 域名(非必须,你也可以使用免费域名,或者GitHub.ioPages.dev分配的域名也可以)
  1. GitHub必须,你需要注册一个 GitHub 帐号)
  1. Cloudflare非必须,你需要注册一个 Cloudflare 帐号,这样你就可以将博客部署在 CF 的 CDN 里加速,但是你也可以直接使用GitHub.io分配的域名)

2. 软件支持

  1. Node必须
  1. Git必须
  1. VSCode非必须,这是一款轻量型的代码编辑器,可以帮助你养成一个很好的编程习惯)

2.1. 安装 Node

  1. 打开 Node 官网,下载和自己系统相配的 Node 的安装程序,否则会出现安装问题。下载地址:https://nodejs.org/en
  1. 下载后安装,安装的目录可以使用默认目录C:/Program Files/nodejs/
  1. 安装完成后,检查是否安装成功。在键盘按下 win + R 键,输入 CMD,然后回车,打开 CMD 窗口,执行node -v命令,看到版本信息,则说明安装成功。
    1. notion image
  1. 修改 npm 源。npm 下载各种模块,默认是从国处服务器下载,速度较慢,建议配置成华为云镜像源。打开 CMD 窗口,运行如下命令:

    2.2. 安装 Git

    1. 进入官网下载适合你当前系统的 Git:https://git-scm.com/downloads
      1. notion image
    1. 下载后傻瓜式安装 Git 即可,安装的目录最好使用默认目录C:/Program Files/Git
    1. 点击电脑左下角开始即可看见Git CMDGit BashGit GUI
        • Git CMD 是 windows 命令行的指令风格
        • Git Bash 是 linux 系统的指令风格(建议使用)
        • Git GUI是图形化界面(新手学习不建议使用)

    3. 配置 Git 密钥并连接至 Github

    常用 Git 命令
    notion image

    3.1. 配置用户名和邮箱

    通过git config -l 检查是否配置成功。
    notion image

    3.2. 配置公钥连接 Github

    1. 执行以下命令生成 ssh 公钥,此公钥用于你的计算机连接 Github
      1. 提示Enter file in which to save the key直接一路回车即可,新手小白不推荐设置密钥
        notion image
        之后打开 C 盘下用户文件夹下的. ssh 的文件夹,会看到以下文件
    1. 将 SSH KEY 配置到 GitHub
      1. 进入 github,点击右上角头像 选择settings,进入设置页后选择 SSH and GPG keys,名字随便起,公钥填到Key那一栏。
        notion image
        notion image
        notion image
        notion image
    1. 测试连接,输入以下命令
      1. 第一次连接会提示Are you sure you want to continue connecting (yes/no/[fingerprint])?,输入yes即可
        notion image
        出现连接到账户的信息,说明已经大功告成,至此完成了环境准备工作。
        notion image

    3.3. 创建 GitHub.io 仓库

    1. 点击右上角的+按钮,选择 New repository,创建一个<用户名>.github.io的仓库。
    1. 仓库名字的格式必须为:<用户名>.github.io (注意:前缀必须为用户名,此为预览博客需要,后期可修改仓库名)
    1. 可见性必须选择 Public 方便第一次部署检查问题,点击 Creat repository 进行创建即可
      1. notion image

    4. 初始化 Hexo 博客

    1. 创建一个文件夹来保存博客源码(我这里选的路径为D:/Hexo-Blog),在文件夹内右键鼠标,选择Open Git Bash here
      1. notion image
    1. Git BASH输入如下命令安装 Hexo
      1. notion image
    1. 安装完后输入hexo -v验证是否安装成功。
      1. notion image
    1. 初始化 Hexo 项目安装相关依赖。
      1. notion image
    1. 初始化项目后,blog-demo有如下结构:
      1. notion image
    • node_modules:依赖包
    • scaffolds:生成文章的一些模板
    • source:用来存放你的文章
    • themes:主题
    • .npmignore:发布时忽略的文件(可忽略)
    • *_config.landscape.yml**:主题的配置文件
    • config.yml:博客的配置文件
    • package.json:项目名称、描述、版本、运行和开发等信
    1. 输入hexo cl && hexo s启动项目
      1. notion image
    1. 打开浏览器,输入地址:http://localhost:4000/ ,看到下面的效果,说明你的博客已经构建成功了。
      1. notion image

    5. 将静态博客挂载到 GitHub Pages

    1. 安装 hexo-deployer-git
      1. 修改 _config.yml 文件
        1. 在 blog-demo 目录下的_config.yml,就是整个 Hexo 框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述
          修改最后一行的配置,将 repository 修改为你自己的 github 项目地址即可,还有分支要改为main代表主分支(注意缩进)。
      1. 修改好配置后,运行如下命令,将代码部署到 GitHub(Hexo 三连)。
        • hexo clean:删除之前生成的文件,可以用hexo cl缩写。
        • hexo generate:生成静态文章,可以用hexo g缩写
        • hexo deploy:部署文章,可以用hexo d缩写注意:deploy 时可能要你输入 username 和 password。
          • notion image
        如果出现 Deploy done,则说明部署成功了。
        notion image
        稍等两分钟,打开浏览器访问:https://cmliussss2024.github.io ,这时候我们就可以看到博客内容了。
        notion image

        6. 将静态博客挂载到 Cloudflare Pages

        1. Workers 和 Pages 中选择 Pages连接到 Git
          1. notion image
            notion image
        1. 然后登录你 Blog 仓库对应的 GitHub 帐号
          1. notion image
            notion image
        1. 点击保存并部署后等待部署完成即可。
          1. notion image
        1. 提示成功!您的项目已部署到以下区域:全球后,浏览器访问:https://cmliussss2024-github-io.pages.dev ,这时候我们就可以看到博客内容了。
          1. notion image
            这时你也就可以将你的<用户名>.github.io的仓库设置为Private私库了
        1. 如果你有自己的域名,你可以在这里绑定你自己的自定义域,即可
          1. notion image

        新建一篇博文

        然后用文本编辑器去编辑_posts/这是一篇新的博文.md里的内容即可,注意要使用 Markdown 格式书写。
        详细使用方法可以查阅 https://hexo.io/zh-cn/docs/writing

        编辑完文章保存后可以使用如下命令,生成本地页面 http://localhost:4000/ ,进行预览

        确认无误后使用以下命令,将本地文章推送至 GitHub 仓库即可

        下一期会讲讲进阶的使用方法,主题美化
        使用管理员身份打开 powershell , 输入以下命令

        第二部分

        这期教程演示将使用一款基于 hexo-theme-butterfly 修改的主題 - 安知鱼,安知鱼是一个简洁、美丽的静态 hexo 主题

        1. 安装主题

        1.1. Git 安裝

        在博客根目录里安装最新版主题
        第一次使用需要安装 pug 以及 stylus 的渲染器

        1.2. 应用主题

        修改 hexo 配置文件_config.yml,把主题改为anzhiyu

        1.3. 覆盖配置

        覆盖配置可以使主题配置放置在 anzhiyu 目录之外,避免在更新主题时丢失自定义的配置。
        如果你是 linux 系统就执行以下命令
        如果你是 windows 系统就请手动将/themes/anzhiyu/_config.yml复制到根目录下并重命名为_config.anzhiyu.yml即可。
        以后如果修改任何主题配置,都只需修改 _config.anzhiyu.yml 的配置即可。
        注意:
        • 只要存在于 _config.anzhiyu.yml 的配置都是高优先级,修改原 _config.yml 是无效的。
        • 每次更新主题可能存在配置变更,请注意更新说明,可能需要手动对 _config.anzhiyu.yml 同步修改。
        • 想查看覆盖配置有没有生效,可以通过 hexo g --debug 查看命令行输出。
        • 如果想将某些配置覆盖为空,注意不要把主键删掉,不然是无法覆盖的

        1.4. 配置主题与主站配置文件

        到这一步主题部署就完成了,就是这么简单!!!

        1.5. 生成标签页和分类页

        执行以下命令生成标签页
        找到 source/tags/index.md 这个文件,修改添加 type: "tags"
        执行以下命令生成分类页
        找到 source/categories/index.md 这个文件,修改添加 type: "categories"
        剩下的工作就是配置_config.yml_config.anzhiyu.yml文件,修改博客参数。

        2. 配置文章模版

        /scaffolds目录下有几个模版文件,其中
        • post.md:新建博文模版
        • page.md:新建标签页模版

        post.md 模版,仅供参考

        page.md 模版,仅供参考

        新建文章

        新建博文命令

        新建标签页命令

        文章置顶

        安装插件

        设置置顶

        给需要置顶的文章加入 top 参数,如下:
        如果存在多个置顶文章,top 后的参数越大,越靠前。

        开启本地搜索

        安装插件

        你需要安装 hexo-generator-search,根据它的文档去做相应配置

        设置主题配置文件

        参数
        解释
        enable
        是否开启本地搜索
        preload
        预加载,开启后,进入网页后会自动加载搜索文件。关闭时,只有点击搜索按钮后,才会加载搜索文件
        CDN
        搜索文件的 CDN 地址(默认使用的本地链接)

        添加任意文件

        例如当我们想在网站根目录添加ads.txt文件,来通过站长验证时,我们只需要在/source文件夹下放置该文件即可。

        原博客地址:

        [up主专用,视频内嵌代码贴在这]
        yt-dlp使用及命令大全解决使用IDM下载不了油管(YouTube)视频的方法
        Loading...
        Vc工具箱
        Vc工具箱
        一个普通的干饭人🍚
        Announcement
        🎉🎉🎉🎉🎉🎉🎉🎉
        👏感谢你的到访,👏
        希望你在这里能找到对你有用的内容。
        Recent Comments
        Loading...
        2021-2025Vc工具箱.

        Vc工具箱 | 一个普通的干饭人🍚

        Powered byVc .