Hexo 介绍

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo 会解析 markdown 语法 生成对应的 html ，主题就是 css 样式。

本次使用的是Hexo+Butterfly主题搭建博客，所有安装建议安装最新稳定版本。

搭建博客

前期准备

  1. 安装Git

    Git下载地址：https://git-scm.com/downloads

    下载太慢可以前往 淘宝 Git for Windows 镜像 下载 git 安装包。

  2. 安装Node.js

    官网下载链接：https://nodejs.org/en/

    同样太慢可以前往可以前往 淘宝 Node.js 镜像 下载安装包。

  3. 更换镜像源

    为了解决速度慢的问题。建议换一个Node.js镜像源，这里更换为淘宝的镜像源，代码如下：

    1
    npm install -g npm --registry=https://registry.npm.taobao.org

  4. 安装Hexo

    官网链接：https://hexo.io/zh-cn/

    直接复制首页代码粘贴运行即可：

    1
    cnpm install -g hexo-cli

快速生成静态博客

  1. 初始化

    在本地找个位置创建一个文件夹，作为博客部署的空间。后续所以改动和添加都基于这个文件夹操作，在此文件夹内初始化hexo，选择该文件夹右键选择Git bash打开，输入：

    1
    hexo init

    Hexo 将会在文件夹中自动生成所需要的文件，初始化完成。

    目录：

    1
    2
    3
    4
    5
    6
    7
    8
    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes

  2. 启动本地服务

    1
    hexo s

    启动成功后，通过本地默认的4000端口访问：http://localhost:4000

  3. 生成第一篇博文

    1
    hexo new "第一篇文章"

    此命令会在博客目录下的source/_posts目录下，生成一个Markdown格式的md结尾文件，文件名为“第一篇文章”，在此文件内使用Markdown语法就可以编写文章了。

  4. hexo生成博客一键三连

    每次修改完博客目录内部文件后，都需要重新生成一下，修改了博客配置文件需要清理缓存重新生成。只修改增加博文的也可以仅重新生成即可。

    1. 清理缓存

      1
      hexo clean

    2. 生成静态文件

      1
      hexo g

    3. 本地预览（不需预览可跳过）

      1
      hexo s

    4. 部署到远端

      1
      hexo d

基本一个简单的博客就在本地搭建出来了，接下来就是将博客部署到可以网络上访问。

部署到Github

  1. 打开自己的Github仓库，新建放置博客的仓库(repository)。

    仓库命名格式为：

    1
    你的Github账号名.github.io(例如：Orangecola.github.io)

    仓库要选择公开(Public)

  2. 安装hexo-git部署的插件

    1
    cnpm install --save hexo-deployer-git

  3. 配置_config.yml文件

    打开博客目录中的_config.yml文件，最底部有一个# Deployment模块，在这个模块下配置git部署信息：

    1
    2
    3
    4
    5
    6
    7
    8
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
    - type: git
      repo: https://github.com/Orangecolaa/Orangecolaa.github.io.git
      branch: master
    # [,branch]为可选项，表示部署的分支
    #2020年10月后github新建仓库默认分支改为main，注意更改

    repo放置你的博客仓库URL，通过这个地址部署到你的博客仓库中。

  4. 部署到远端

    1
    hexo d

    稍微等一下接下来就可以访问你的博客了，通过访问 你的Github账号名.github.io来访问。

更换主题

Hexo有许多大神制作的主题，可以自由挑选更换。

Hexo主题官网：https://hexo.io/themes/

  1. 下载主题

    可以点进主题Github仓库复制url进行git clone下载，这里以下Butterfly为例，在博客目录下git bash输入命令：

    1
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

    接下来在themes目录下会出现butterfly的主题文件夹。

  2. 修改博客目录的_config.yml文件

    找到# Extensions模块下的theme标签（默认为landscape），将其替换为下载好的主题名称butterfly。

    1
    theme: butterfly

    接下来再重新清理缓存、部署、启动本地服务、推到远端，一套步骤下来博客+主题就搭建好了。

后续美化

后续关于主题界面美化增加功能插件等丰富性教程可以自行查看进行个性化修改。

butterfly官方文档：https://butterfly.js.org/posts/21cfbf15/