未分类

上手Hexo

欢迎转载，但请在开头或结尾注明原文出处【blog.chaosjohn.com】

这篇文章主要记载一下我如何上手Hexo(搭建本博客的技术)。

前期准备

  • NodeJS
  • GitHub (已配置好SSH接入，详情参考GitHub官网)
  • 域名 (可选项，下面会说明何时必须要求绑定域名)

开始

安装Hexo

$ npm install -g hexo

在GitHub上创建博客仓库

此时得考虑两种选择：

  • GitHub Pages (每个GitHub账号只能创建一个，即该仓库的默认分支master就是博客，而且仓库名是固定为username.github.io)。如果博客搭建成功，浏览器访问https://username.github.io就能打开博客。
  • gh-pages (可以创建无限多个，每个仓库都能创建一个静态博客，但是博客必须在gh-pages分支下)。在这种情况下，博主必需使用域名通过CNAME解析你的博客仓库，否则文章的CSS样式路径会出错，导致整个页面会是下面这种没有样式的样子

在本地部署

  1. 在本地clone你创建的GitHub仓库

  2. 默认为master分支，如果你使用的是gh-pages，需要切换到gh-pages分支。$ git branch gh-pages && git checkout gh-pages

  3. 初始化hexo $ hexo init，并且调用npm安装相应的node_modules $ npm install

  4. 开启服务器进行本地预览（此时hexo默认生成了一篇Hello-World博客）$ hexo server，浏览器打开localhost:4000就能看到效果博客效果。建议操作博客时关闭服务器(ctrl-c)。

  5. 新增博客$ hexo new "new blog name"，hexo会生成以new-blog-name.md为名的博客

  6. 部署到GitHub

    • 编辑博客仓库根目录下的_config.yml文件，在末尾追加变成为

      1
      2
      3
      4
      5
      6
      # Deployment
      ## Docs: http://hexo.io/docs/deployment.html
      deploy:
      	type: git
      	repository: git@github.com:username/blog.git
      	branch: master
      • 为避免下一步骤出现 ERROR Deployer not found : git的报错，需要安装git部署模块$ npm install hexo-deployer-git --save

    • 生成静态文章$ hexo generate

    • 部署到GitHub`$ hexo deploy`

  7. 测试博客

    • 如果搭建的是GitHub Pages，则直接访问https://username.github.io即可
    • 如果搭建的是gh-pages，则还需配置域名，比如笔者的域名为chaosjohn.com。
      • 在域名的DNS解析内新增两条A记录，指向GitHub Pages提供的IP
        • 192.30.252.153
        • 192.30.252.154
      • 接着在DNS解析内新增一条CNAME记录，记录名比如使用blog，记录值为username.github.io，添加完后可能会在记录值追加一个’.’，不用纠结，这个就是CNAME的格式。
      • 在博客仓库的source文件夹内新建一个CNAME文件，文件内容就是blog.chaosjohn.com
      • 重新生成静态文章并且部署到GitHub，可以使用快捷命令$ hexo d -g

  8. 命令集合

    • 常用命令
      • hexo new “postName” #新建文章
      • hexo new page “pageName” #新建页面
      • hexo generate #生成静态页面至public目录
      • hexo server #开启预览访问端口（默认端口4000，’ctrl + c’关闭server）
      • hexo deploy #将.deploy目录部署到GitHub
      • hexo help # 查看帮助
      • hexo version #查看Hexo的版本
    • 复合命令
      • hexo deploy -g #生成加部署
      • hexo server -g #生成加预览
    • 命令简写
      • hexo n == hexo new
      • hexo g == hexo generate
      • hexo s == hexo server
      • hexo d == hexo deploy


(各位大侠行行好给点捐助吧）

分享到