Build your blog with Hexo+Github

Posted on | Post modified:

Abstract: 本文简要介绍如何通过Hexo+Github搭建个人博客

  1. 安装git，使用命令”git –version”查看是否安装成功。

  2. 安装Node.js，使用命令”node -v”和”npm -v”查看是否安装成功。

  3. 申请Github账号，并创建一个与用户名一致的repo。

  4. Git连接ssh。打开git bash，进行以下操作：
    设置Git的user name和email：

    1
    2
    git config --global user.name "username"   #username是github用户名
    git config --global user.email "useremail"   #useremail是github注册邮箱

    生成ssh秘钥：

    1
    ssh-keygen -t rsa -C "useremail"   #useremail是github注册邮箱

    在返回提示过程中按enter直至完成，可以看到id_rsa和id_rsa.pub的路径。
    在自己的github中的setting->ssh key选项中添加本地id_rsa.pub的内容。
    验证配置是否成功：

    1
    ssh -T git@github.com

  5. 安装Hexo（如下命令），并使用命令”hexo -v”验证是否安装成功。

    1
    2
    3
    4
    mkdir hexo
    cd hexo
    npm install -g hexo-cli
    npm install hexo --save

    部署Hexo，新建文件夹blog并切到该目录下，在Git shell或cmd输入：

    1
    hexo init

    安装依赖包：

    1
    npm install

  6. 使用Hexo查看与创建博客

    • 使用以下命令本地查看博客，并使用浏览器查看localhost:4000

      1
      hexo s -g   #s代表server，g代表generate

    • 打开blog/_config.yml进行配置：

      • 修改title, author等
      • url项内容为所申请的github网址：url: http://username.github.io
      • 发布设置，修改deploy项内容：
        1
        2
        3
        4
        deploy:
        type: git
        repository: git@github.com:username/username.github.io.git
        branch: master

    • 在blog目录下创建新文章，生成的md文件自动保存在blog/source/_posts/

      1
      hexo new "hello"

    • 在对应的markdown文件中编辑博客内容

    • 发布博客到github 
      1
      hexo d -g   #d代表deploy，g代表generate

  7. Hexo发布带图片的博文
    本方法适用于hexo 3.0，具体版本可以由package.json查看。

    1. 修改_config.yml配置文件post_asset_folder项为true；

    2. 创建新博客：

      1
      hexo new [layout] <title>;

      在source/_post中会出现一个与博文名称相同的文件夹用于存放图片([layout]是可选项)；

    3. 使用以下方法引用图片
      1
      {% asset_img figure-name.jpg 说明 %}

  8. 选用Hexo主题（以next为例）
    进入hexo项目中，clone该主题：

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

    在hexo项目主目录中的_config.yml设置”theme: next”
    随后在git bash下执行：

    1
    npm install hexo-util --save

    若不执行上异步操作，则可能本地执行hexo s之后报错：

    1
    Error: Cannot find module 'hexo-util'

    配置显示tags：

    1
    $ hexo new page tags

    打开sources/tags对index.md进行编辑：
    -–
    title: tags
    date: 2018-04-27 14:04:22
    type: “tags”
    -–
    打开themes/next/_config.yml，取消menu项下tags页的注释。
    问： 有时候会出现tags计数与实际tags数不一致的情形？
    答： 每次更新之后先执行“hexo clean”之后再”hexo g”

    配置显示博文更新时间：
    打开themes/next/_config.yml，设置”updated_at: true”

    配置首页文章不自动展开：
    (1) 可通过修改next的配置文件_config.yml：

    auto_excerpt:
  enable: true
  length: 150

    (2) 可通过修改next的配置文件_config.yml：

    scroll_to_more: false

    并在行文过程中按照以下格式：

    摘要
<!-- more -->
正文

    更多主题参见：https://github.com/hexojs/hexo/wiki/Themes

  9. 配置支持mathjax数学公式
    (1) 修改所使用主题的_config.yml文件：

    mathjax:
  enable: true
  per_page: true

    (2) hexo默认使用marked.js解析markdown，_ 代表斜体，会被处理成 <em> 标签，比如 x_i 会先被转化为 x<em>i</em>，随后mathjax就无法渲染。\\ 的换行在markdown中会被转义成 \，也会影响mathjax对 \\ 的渲染。
    打开node_modules\hexo-renderer-marked\node_modules\marked\lib\marked.js，做以下修改：
    将

    escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,

    改为

    escape: /^\\([`*{}\[\]()# +\-.!_>])/,

    将

    em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

    改为

    em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

    (3) 在每次的博文.md文件头部添加

    mathjax: true

错误汇总

  1. 要部署博客至github上前需要关闭hexo server以及本地页面localhost:4000，否则执行“hexo d -g”之后会出现以下错误：

    1
    2
    3
    4
    bash: /dev/tty: No such device or address
    error: failed to execute prompt script (exit code 1)
    fatal: could not read Username for 'https://github.com': Invalid argument
    ...

  2. 执行“hexo d -g”之后会出现以下错误： ERROR Deployer not found: git，通过以下命令解决

    1
    npm install hexo-deployer-git --save