0%

Hexo和GithubPages搭建博客

前言

Github Pages之前使用jekyll搭建,好处是博客代码和Markdown可以放在同一个github仓库统一管理版本控制,但是换博客主题感觉有点麻烦,就有了jekyll换成Hexo的想法。

Hexo介绍

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

官网文档:https://hexo.io/zh-cn/docs/index.html

与jekyll相比:

  • jekyll提交Markdown到Github Pages就可以渲染部署使用;Hexo需要本地生成(编译?)后再推到服务器或者Github Pages才能部署使用。
  • jekyll放在Github Pages上的文件是Markdown;Hexo放到Github Pages上的文件是Html。
  • Hexo可以本地运行,预览博客效果
  • Hexo更换主题很方便;jekyll则Markdown放到主题文件里,更改比较麻烦

Hexo环境

  • NodeJs(Node.js 版本需不低于 8.10,建议使用 Node.js 10.0 及以上版本)
  • Git

Hexo本地环境搭建

  1. 安装Hexo
    $ npm install -g hexo-cli
  2. 初始化
    $ hexo init <folder>
    $ cd <folder>
    $ npm install
  3. 下载博客主题,这里用的是Nexthttps://github.com/theme-next/hexo-theme-next
  4. clone或者下载好后放到theme文件夹
    • 根目录下的_config.yml是站点配置(即博客的生成配置),<folder>/theme/<主题文件夹>下的_config.yml是主题配置
  5. 修改站点配置_config.yml
    • 有空格bug,需要删除空格(菜单路径都要删除空格)如: _config.yml 95行home: / || home改为home: /|| home
    • 语言改为中文 language: zh-Hans (Next 6.0后使用 zh-CN)
  6. 添加页面
    • 添加tags
    • 命令:$ hexo new page tags
      确认站点配置文件里有tag_dir: tags
      确认主题配置文件里有tags: /tags
      编辑站点的/source/tags/index.md,添加
      1
      2
      3
      4
      title: tags
      date: 2015-10-20 06:49:50
      type: "tags"
      comments: false
    • 添加分类
    • 命令:$ hexo new page categories
      确认站点配置文件里有category_dir: categories
      确认主题配置文件里有categories: /categories
      编辑站点的source/categories/index.md,添加
      1
      2
      3
      4
      title: categories
      date: 2015-10-20 06:49:50
      type: "categories"
      comments: false
  7. 添加本地搜索
    • 安装插件 hexo-generator-searchdb,在站点的根目录下执行以下命令:
      $ npm install hexo-generator-searchdb --save
    • 编辑站点配置文件,新增以下内容到任意位置:
      1
      2
      3
      4
      5
      search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    • 编辑主题配置文件,启用本地搜索功能:
      1
      2
      3
      # Local search
      local_search:
      enable: true
  8. 支持推送Github pages
    • 安装插件,在站点的根目录下执行以下命令:
      $ npm install hexo-deployer-git --save
    • 编辑站点配置文件,新增以下内容到任意位置:
      1
      2
      3
      4
      deploy:
        type: git
        repository: https://github.com/winskin/winskin.github.io.git
        branch: master
  9. 主要命令说明:
操作 命令 说明
新建页面 hexo new 默认新建到_posts即为博文,也可以新建其他类型
生成文件 hexo g 生成文件,为html文件,用于部署
清理生成文件 hexo clean 清理生成的文件夹public,和文件db.json
本地运行 hexo s 本地运行public文件,访问地址问:localhost:4000(刷新配置时不需要重启)
发布部署 hexo d 发布到仓库,这里使用的是github,自动提交push,并Github Pages会自动运行渲染
  1. 总结

因为Hexo把Markdown和发布用的html分成两个部分,即需要两个仓库存储(或一个服务一个版本控制),我是新建一个仓库存储,再其他电脑下载的文件后,装上NodeJs和Git就能快速搭建已有的博客环境,与jekyll相比麻烦了不少,但是更加灵活,各有好处吧。