博客搭建

准备工作

  1. 安装node.js npm
    我以前安装过，版本node v20.17.0 npm 10.8.3
    安装淘宝镜像源，这样速度会快
    npm install -g cnpm –registry=https://registry.npm.taobao.org
    我开始没有成功，输入npm cache clean –forece清除缓存后再安装成功
    cnpm 版本9.4.0
  2. 用cnpm全局安装hexo
    cnpm install -g hexo-cli
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    C:\Users\Administrator>hexo -v
    hexo-cli: 4.3.2
    os: win32 10.0.22631 undefined
    node: 20.17.0
    acorn: 8.11.3
    ada: 2.9.0
    ares: 1.32.3
    base64: 0.5.2
    brotli: 1.1.0
    cjs_module_lexer: 1.2.2
    cldr: 45.0
    icu: 75.1
    llhttp: 8.1.2
    modules: 115
    napi: 9
    nghttp2: 1.61.0
    nghttp3: 0.7.0
    ngtcp2: 1.1.0
    openssl: 3.0.13+quic
    simdutf: 5.3.0
    tz: 2024a
    undici: 6.19.2
    unicode: 15.1
    uv: 1.46.0
    uvwasi: 0.0.21
    v8: 11.3.244.8-node.23
    zlib: 1.3.0.1-motley-209717d

搭建博客

建立文件夹blog，从文件夹里打开终端
hexo init #生成博客 初始化博客

1
2
3
4
PS D:\Pragram code\blog> hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

hexo s #启动本地博客服务

1
2
3
4
PS D:\Pragram code\blog> hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

hexo n “我的第一篇文章” #创建新的文章

1
2
3
PS D:\Pragram code\blog> hexo n "我的第一篇文章"
INFO  Validating config
INFO  Created: D:\Pragram code\blog\source\_posts\我的第一篇文章.md

然后在blog文件夹/source/_posts/新增了一个“我的第一篇文章.md”文件
更新文章内容后，回到blog文件夹打开终端，先输入hexo clean，然后输入hexo g 生成，然后再hexo s启动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
PS D:\Pragram code\blog> hexo n "我的第一篇文章"
INFO  Validating config
INFO  Created: D:\Pragram code\blog\source\_posts\我的第一篇文章.md
PS D:\Pragram code\blog> hexo clean
INFO  Validating config
INFO  Deleted database.
PS D:\Pragram code\blog> hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 210 ms
INFO  Generated: archives/index.html
INFO  Generated: archives/2024/index.html
INFO  Generated: index.html
INFO  Generated: css/style.css
INFO  Generated: js/script.js
INFO  Generated: archives/2024/11/index.html
INFO  Generated: js/jquery-3.6.4.min.js
INFO  Generated: fancybox/jquery.fancybox.min.css
INFO  Generated: fancybox/jquery.fancybox.min.js
INFO  Generated: css/images/banner.jpg
INFO  Generated: 2024/11/07/我的第一篇文章/index.html
INFO  Generated: 2024/11/07/hello-world/index.html
INFO  12 files generated in 202 ms
PS D:\Pragram code\blog> hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

我把这篇markdown笔记内容贴了上去，成功在博客中展示

常用命令

Hexo常用命令

退出hexo：ctrl + c (在键盘上按不是输入到终端！)
初始化博客：hexo init 文件夹名称
新建文章：hexo new 文章名称 (简写)hexo n 文章名称
清理缓存有时能解决报错： hexo clean
在线预览： hexo server(简写)hexo s
生成静态html文件：hexo generate（简写）hexo g
一键部署：hexo deploy (简写)hexo d
在更新博客后要部署到github:hexo cl,hexo g,hexo d

Hexo常用命令解释

  1. hexo cl (clean)
    作用: 清理生成的缓存文件和静态文件。
    具体行为:
    删除 public 文件夹（Hexo 生成的静态文件存放的地方）。
    删除 .cache 文件夹（Hexo 缓存文件存放的地方）。
    用途:
    当你修改了某些配置或模板文件后，运行 hexo cl 可以清理旧的生成文件，确保重新生成的内容是最新的。
  2. hexo g (generate)
    作用: 根据 Markdown 源文件、主题模板和配置文件生成静态 HTML 文件。
    具体行为:
    Hexo 会读取 source 文件夹中的 Markdown 文件、_config.yml 配置文件，以及主题文件夹中的模板文件。
    将 Markdown 文件通过模板引擎（如 EJS、Pug 等）渲染成 HTML 文件。
    最终生成的静态文件会存储在 public 文件夹中。
    用途: 这是将你的博客内容从 Markdown 转换成网页的核心步骤。
  3. hexo d (deploy)
    作用: 将生成的静态文件部署到远程仓库（如 GitHub Pages）。
    具体行为:
    读取 _config.yml 中的 deploy 配置。
    将 public 文件夹中的静态文件上传到指定的远程仓库（通常是 GitHub Pages 的仓库）。
    用途: 这一步是让你的博客内容上线的关键操作。

部署到github上

  1. 在github上新建仓库
    登录Github，新建一个仓库new repository，注意名字的命名一定要符合特定要求!!
    仓库名一定要和前面Owner的名字一样，不然会404，我下面这个图是错的！
    正确的仓库名是Nie7-Melon
    新建仓库
  2. 在blog文件夹下安装git插件
    在文件夹中打开git bash，然后输入指令
    1
    cnpm install --save hexo-deployer-git
    文件夹中安装git插件
  3. 设置_config.yml文件
    打开文件，拉到最后，原来是这样的
    1
    2
    3
    4
    5
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: ''

    补充扩展，把git和仓库地址加进去
    仓库地址
    补充后是这样的
    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: 'git'
      repo: 'https://github.com/Nie7-Melon/melonnie77.github.io.git'
      branch: 'master'
  4. 部署 hexo d
    在blog文件夹终端里或者git bash里面输入都可以
    但是我在bit bash里面输入报错啦报错
  1. 可能因为我没有设置我的git的global身份
    要先
    1
    2
    git config --global user.email "xxx"
    git config --global user.name "xxx"
    但我输入这些还是报错呢
    1
    fatal: unable to access 'https://github.com/Nie7-Melon/melonnie77.github.io.git/': OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 0
  2. 我把_config.yml文件里的https地址改成了SSH地址
    还是会报错呢
    1
    2
    3
    Please make sure you have the correct access rights
    and the repository exists.

    这个错误表明 Git 无法通过 SSH 连接到 GitHub 仓库，因为没有找到有效的 SSH 目标。以下步骤可以帮助您解决

  3. 我又把_config.yml文件文件的地址改回了https地址，输入hexo d
    这次好像成功了成功
    但是好像有时候成功有时候失败呢，不是一定成功
    不成功的时候多换几个代理试试，总有一个会成功！
    这时候再访问刚才在github上建的仓库blog内容上传成功
  4. 但是！我访问https://melonnie77.github.io/一直是404，检查发现，仓库名好像必须和我的github用户名一致才可以！！！
    我重新改了仓库名和_config.yml文件修改仓库名
    这次成功了https://nie7-melon.github.io/

关于hexo

hexo+butterfly主题+github，技术栈讲解

  1. hexo
    是基于node.js开发的静态网站生成器，核心功能是将markdown内容、主题模板、配置文件编译成静态的Html、css、js文件，供浏览器直接访问。
  2. butterfly主题：
    通过模板文件和样式文件，将 Hexo 生成的静态内容结构化为美观的网页。
  3. GitHub + GitHub Pages（托管与部署）：
    GitHub 是代码托管平台，而 GitHub Pages 是其提供的静态网站托管服务；通过插件（如 hexo-deployer-git）将生成的静态文件推送到 GitHub 仓库，最终通过 GitHub Pages 发布；
    GitHub Pages 免费托管、全球 CDN 加速、与 Git 版本控制无缝集成。
  4. 工作流程：
    Markdown 文章 → Hexo 编译 → 生成静态文件 → GitHub Pages 托管 → 用户访问
    Hexo 通过主题配置文件（_config.yml）加载 Butterfly 主题，将 Markdown 内容填充到主题模板中，最终生成静态 HTML 文件。 Hexo 读取 Markdown 文件，解析其内容和元数据，结合主题模板生成最终的 HTML 页面。 通过将 Hexo 生成的静态文件推送到 GitHub 仓库，可以快速发布博客。 Hexo 的 deploy 命令依赖 GitHub 的 API 和 Git 协议，将本地生成的文件同步到 GitHub 仓库，最终通过 GitHub Pages 全球 CDN 加速访问