Hexo 使用指南

发表于 | 分类于 | | 阅读次数:

安装Hexo

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

安装前提

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

安装 Hexo

如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。在任意位置打开 Git Bash，输入命令：

1
$ npm install -g hexo-cli

注意：前面有 $ 的表示都在 Git Bash 中执行的命令，后文不在重复说明。

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

比如：建立了一个文件夹，路径为 D:\Blog，则在 D:->右键->Git Bash 在输入命令：

1
2
3
$ hexo init Blog
$ cd Blog
$ npm install

至此，已经 Hexo 已经建立好了。

默认主题

在 Hexo 中提供了一个默认的 landscape 主题，可以在浏览器中打开: http://localhost:4000/。不过在打开之前需要先运行命令，生成静态页面至 public/ 目录；最后，开启预览访问端口（默认端口是 4000）：

1
2
$ hexo generate
$ hexo server

当出现一下信息，表明服务开启，你可以通过 http://localhost:4000/ 在浏览器中打开。

INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

总结一下

1
2
3
4
5
$ npm install hexo-cli -g
$ hexo init <blog>
$ cd <blog>
$ npm install
$ hexo server

坑

  1. 打不开 http://localhost:4000/ ?

    • 查找原因：Hexo 默认的端口 4000，在 cmd 输入 netstat -ano | findstr "4000"，找到 4000 端口在最后一列中所对应的 PID 值，然后在 任务管理器 -> 详细信息 中通过 PID 发现对应的应用程序，结果是 FoxitProtect.exe (福昕阅读器) 这货，占我端口，耗我青春！

    • 两种解决办法：

      • 换一个端口(如 5000 )。执行命令：

        1
        $ hexo s -p 5000

      • 释放 4000 端口。先结束占用端口的进程，再执行命令:

        1
        $ hexo s

切换主题

发现主题

到 Hexo 的官网去浏览，选自己喜欢的主题风格。例如，我的博客主题风格为：hexo-theme-next,然后在 D:\Blog 中 右键->Git Bush 中输入：

1
$ git clone https://github.com/iissnan/hexo-theme-next.git themes/next

或者：

1
$ git clone git@github.com:iissnan/hexo-theme-next.git themes/next

你可以看到 themes/ 目录中多了一个 next 文件夹。

切换主题

在 D:\Blog\ 中找到 _config.yml 并打开，修改配置文件。将：

theme: landscape

修改为：

theme: next

最后，执行命令：

1
2
$ hexo generate
$ hexo s -p 5000

坑

  1. 执行 $ hexo g 报一堆错？
    • 解决方法：在 _config.yml 配置文件中，特别需要注意的是，任何 : 后需加一个空格！

部署到GitHub

新建 repository

登录到个人 github 上，新建一个 repository，名字必须是 user_name.github.io，其中 user_name 跟 github 的名字一致。
例如，我的 github 地址为 https://github.com/hujingshuang，则 repository 名就为 hujingshuang.github.io。

修改配置

有了之前对配置文件 _config.yml 的修改操作经验，现在要将主题发布到刚才新建的 hujingshuang.github.io 仓库中。
对 _config.yml 作如下修改：

deploy:
    type: git
    repository: git@github.com:hujingshuang/hujingshuang.github.io.git
    branch: master

上面用的是 SSH，当然你也可以使用 HTTPS 方式：

deploy:
    type: git
    repository: https://github.com/hujingshuang/hujingshuang.github.io.git
    branch: master

部署

部署到 github 上，使用命令：

1
$ hexo d

最后，访问你的个人博客主页，比如我的是：https://hujingshuang.github.io/

坑

  1. 在部署时出现错误信息：ERROR Deployer not found: git ?

    • 解决方法：添加 Git 依赖，重新部署： 
      1
      2
      $ npm install hexo-deployer-git --save
      $ hexo d

  2. 部署到github上的博客打不开，出现 404 ?

    • 解决方法：清除缓存，重新部署 
      1
      2
      $ hexo clean
      $ hexo d

附录

常用插件

1
2
3
4
5
6
7
8
$ npm install hexo-generator-index --save       # 索引生成器
$ npm install hexo-generator-archive --save     # 归档生成器
$ npm install hexo-generator-category --save    # 分类生成器
$ npm install hexo-generator-tag --save         # 标签生成器
$ npm install hexo-server --save                # 本地服务
$ npm install hexo-deployer-git --save          # Hexo 通过 git 发布
$ npm install hexo-renderer-marked@0.2.7 --save # 渲染器
$ npm install hexo-renderer-stylus@0.3.0 --save # 渲染器

常用命令

简写

  • hexo n "我的博客" == hexo new "我的博客" # 新建文章
  • hexo p == hexo publish
  • hexo g == hexo generate # 生成
  • hexo s == hexo server # 启动服务预览
  • hexo d == hexo deploy # 部署

服务器

1
2
3
4
5
6
7
8
$ hexo server                  # Hexo 会监视文件变动并自动更新，您无须重启服务器。
$ hexo server -s               # 静态模式
$ hexo server -p 5000          # 更改端口
$ hexo server -i 192.168.1.1   # 自定义 IP

$ hexo clean                   # 清除缓存 网页正常情况下可以忽略此条命令
$ hexo g                       # 生成静态网页
$ hexo d                       # 开始部署

监视文件变动

1
2
$ hexo generate                # 使用 Hexo 生成静态文件快速而且简单
$ hexo generate --watch        # 监视文件变动

完成后部署

这两个命令的作用是相同的

1
2
$ hexo generate --deploy
$ hexo deploy --generate

同上：

1
2
$ hexo server -g
$ hexo deploy -g

显示 Gitment 评论