天鹅绒房间 主页 | Home归档 | Archives分类 | Categories
No title
Word count: 1.8k|Reading time: 5 min

title: Hexo-博客搭建
categories:

  • [随笔]
    tags:
  • [hexo]
    excerpt: 搭建博客的想法呢，大概是今年 4月付诸实施的。最早的想法是搭建 [动态博客]{.red}，就是有后台管理系统的那种博客，当时的主要目的也是为了练习刚学的 [Spring + SpringMVC + Mybatis]{.green}。可是由于当时刚学这老三样不久，使用根本就不熟练，再加上 [SSM]{.green} 也被 [SpringBoot]{.green} 所取代，导致 [Github]{.grey} 上也很难找到采用 [SSM]{.green} 搭建的博客项目，虽然最后还是给我找到一个（生草）…

    Hexo

序言

!!如果对这部分内容完全不感兴趣的读者呢，可以完全跳过，因为并没有什么用（笑）!!

搭建博客的想法呢，大概是今年 4月付诸实施的。最早的想法是搭建 [动态博客]{.red}，就是有后台管理系统的那种博客，当时的主要目的也是为了练习刚学的 [Spring + SpringMVC + Mybatis]{.green}。可是由于当时刚学这老三样不久，使用根本就不熟练，再加上 [SSM]{.green} 也被 [SpringBoot]{.green} 所取代，导致 [Github]{.grey} 上也很难找到采用 [SSM]{.green} 搭建的博客项目，虽然最后还是给我找到一个（生草）。

最后经过我一番捣鼓，在 [B站]{.pink} 上找到了羊哥的博客搭建视频，当时其实还不太明白 [动态博客]{.pink} 和 [静态博客]{.blue} 的区别在哪里，只是觉得现在连博客都可以直接使用框架搭建了，真的好神奇（笑）。当时搭建完成后，[遇到了图片显示不出来和主题更换不了的问题]{.pink}，加上当时快要考 [计算机网络和数据库]{.pink}，就直接扔在那里没管了。

现在刚好又到了暑假，[Linux]{.green} 差不多学完，[Java]{.pink} 复习也快进入尾声，就想着要不要继续把博客搭建起来，毕竟已经写了这么多笔记，还是想发出来给别人看看。

本博客搭建基本参照羊哥的视频搭建成功的，本身并不算困难，但是却在更换主题的过程中卡了很久，什么资源不生效，各种看不懂的前端报错，连不上 [Github]{.grey} 等等问题，真的挺折磨的，但是搭建 [动态博客]{.red} 估计更麻烦，因为我现在的目的是写博客，不是写项目，也就采用 [静态博客]{.blue} 就好了

  • 动态博客：[需要采用相应的后端技术(Spring、SpringBoot...)来实现用户的权限管理]{.red}，具有权限的用户看到的页面自然不一样，搭建起来相对麻烦，至少一天之内肯定写不完
    • 常见博客框架：WordPress
  • 静态博客：[完全采用前端技术(HTML+JavaScript+CSS)实现]{.red}，没有任何后端管理的部分，也就意味着所有用户看到的内容都是完全一致的
    • 常见博客框架：Hexo、Hugo

:::info

Hexo 官方网站：Hexo

:::

:::info

参考视频：手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo

参考博客：

[注：本博客基于 Windows 操作系统搭建，如果是 Mac 系统建议直接按照视频搭建]{.red}

:::

准备工具

:::primary

千万要准备好需要必要的工具，否则在搭建的过程可能出现很多麻烦的问题！

:::

  • [梯子]{.pink}：最好准备好比较好用的梯子，否则 [Github]{.grey} 能不能进完全取决于你的运气和你家的网络

    !!我是不会提供什么科学上网工具的（比特云）!!

  • Git：版本管理工具需要提前安装好，否则采用命令行执行命令的时候是不会成功的

  • Github：

    • 准备好相应的 [Github]{.grey} 账号，因为之后的博客会直接部署在上面，这也是为什么需要梯子的原因
    • 如果你拥有服务器和相应的域名，就可以考虑部署在你的服务器上，这里没有部署在服务器上的原因在于 [服务器需要购买而且域名需要备案]{.red}，挺麻烦的

  • Node.js：

    • Hexo 博客框架就是基于 JavaScript 的，所以相应的运行环境是需要的

    • 检验是否安装成功：

      • 检验 Node.js 的版本号
      • 检验 npm 的版本号（npm 是前端的包管理工具，相当于 Linux 下的 yum、rpm 软件包管理工具）
      #检测运行环境版本号
      node -v
      # 检测当前 npm 包管理工具的版本号
      npm -v

    • [注：如果检测不出来版本号，那么请先安装好相应的运行环境再继续]{.red}

  • Typora：最好准备一款合适的、支持 Markdown 语法的文本编辑器，Typora、VScode、Sumline、Vim 等等

搭建过程

:::info

Windows 操作系统下是否采用管理员权限似乎没有明显的差别

:::

  • 打开终端：

    • 可以直接使用原生的 cmd 命令行
    • 可以选择微软商店中的 Windows Terminal 第三方的命令行，相对会比较好看

  • 修改 npm 全局路径：

    • 原因：npm 默认会将所有的包都下载到 C盘 中，如果你的磁盘足够大，完全可以跳过这个设置

    • 新建 node_global 和 node_cache 两个文件夹

      a45528ef5245c544a35ec012d52b4f79.png

    • 更改全局路径

      # 配置全局路径和缓存
      npm config set prefix "node_global 的绝对路径"
      npm config set cache "node_cache 的绝对路径"
      # 查看默认的全局路径
      npm config ls

    • 配置环境变量

      3d03132840f84c203c051281ae2947bc.png

  • 更换 npm 镜像源

    • 原因：如果没有使用科学上网工具，那么使用原始的 npm 包管理工具下载相应的插件速度是非常慢的

    • 更换：更换为淘宝的镜像源，之后使用包管理工具的命令就是 cnpm 而不是 npm

      # 更换淘宝镜像源
      npm install -g cnpm --registry=https://registry.npm.taobao.org

  • 安装 hexo 框架：

    # 安装 hexo 博客框架
    cnpm install -g hexo-cli
    # 查看 hexo 博客框架版本号，顺便检查是否安装成功
    hexo -v

  • 初始化博客：

    • 选择合适的位置创建用于存放博客的目录（可以选择 [命令行创建]{.red} 也可以选择 [图形化创建]{.red}）

      # 命令行创建最好先切换到 D 盘
      cd d:
      # 命令行创建目录：./目录名/目录名/...
      mkdir pathname

    • 初始化博客

      hexo init

    • 启动博客测试：[浏览器中输入 localhost:4040 就可以访问到博客了]{.red}

      hexo s

  • 创建新博客：

    • 在根目录下的 source 文件夹下创建 .md 文件

    • 部署新博客

      # 清理之前部署的博客
      hexo c
      # 生成新的博客
      hexo g

  • 创建 [Github]{.grey} 仓库：作为博客的托管地址

  • 部署在 [Github]{.grey} 仓库：

    • 更改 _config.yml配置文件

      ece5c7522a31376a90efe37e8182ffbc.png

    • 部署博客：[部署的中途可能要求你输入你的 Github 账号密码，也有可能连接失败，多试几次就行]{.red}

      hexo d

:::warning

如果运气比较好，完成上述步骤基本就可以完成个人博客的搭建了；如果运气比较差，那么就可能需要查看下 错误整理 了

:::

更换主题

错误整理

Author: Fuyusakaiori
Link: http://example.com/2021/08/16/blog/博客搭建/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.