个人博客部署

发表于 更新于 分类于

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

​ 将生成的静态网页部署到github上即可生成自己的个人博客，简洁方便。可以有效的记录自己学习上和工作上的心得，方便阅读。

​ Hexo主题个人推荐next，该主题简洁，精心布局。很是符合个人喜好。

1 Hexo

1.1 安装

1.1.1 Install node.js

下载安装node.js，默认包含npm

1.1.2 Install git

  • Windows：下载并安装git

  • Linux：

    1
    sudo apt-get install git-core

1.1.3 Install Hexo

1
npm install -g hexo-cli

1.2 建站

  • 初始化

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

  • 上传到github上

  • 注意：

    如果将其push到github上，默认情况下将有一些文件不会上传，这样会导致每次git clone下来的文件不完整，hexo无法正常使用，需要执行下面命令

    1
    npm install

1.3 命令

1.3.1 init

1
hexo init [folder]

新建一个网站。如果没有设置folder，Hexo默认在当前文件夹建立网站。

1.3.2 new

1
hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

1.3.3 generate

1
hexo generate 或者简写为 hexo g

生成静态文件。

选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动

1.3.4 pushlish

1
hexo publish [layout] <filename>

发表草稿。

1.3.5 server

1
hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/。

选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录，使用覆盖记录格式

1.3.6 deploy

1
hexo deploy 或者简写为 hexo d

部署网站。

选项 描述
-g, --generate 部署之前预先生成静态文件

1.3.7 render

1
hexo render <file1> [file2] ...

渲染文件

参数 描述
-o, --output 设置输出路径

1.3.8 clean

1
hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

1.3.9 list

1
hexo list <type>

列出网站资料。

1.3.10 version

1
hexo version

显示 Hexo 版本。

1.3.11 选项

1.3.11.1 安全模式

1
hexo --safe

在安全模式下，不会载入插件和脚本。当您在安装新插件遭遇问题时，可以尝试以安全模式重新执行。

1.3.11.2 调式模式

1
hexo --debug

在终端中显示调试信息并记录到 debug.log。当您碰到问题时，可以尝试用调试模式重新执行一次，并 提交调试信息到 GitHub。

1.3.11.3 简洁模式

1
hexo --silent

隐藏终端信息。

1.4 配置

1.4.1 hexo 配置(_config.yml)

1.4.1.1 网站配置

1
2
3
4
#Site
title: ZRL
author: Rulei.Zhou
language: zh-CN

1.4.1.2 主题安装

  • 下载next主题

    1
    2
    cd theme
    git clone https://github.com/theme-next/hexo-theme-next

  • 修改hexo的配置文件_config.yml

    1
    2
    ## Themes: https://hexo.io/themes/
    theme: next

1.4.1.3 部署配置

1
2
3
4
deploy:
  type: git
  repository: https://github.com/ruleizhou/ruleizhou.github.io
  branch: master

1.4.1.4 其他配置

  • 标题自动添加序号

    • 安装

      1
      npm install hexo-heading-index --save

    • 配置

      修改hexo _config.yml

      1
      2
      3
      4
      5
      6
      heading_index:
        enable: true
        index_styles: "{1} {1} {1} {1} {1} {1}"
        connector: "."
        global_prefix: ""
        global_suffix: " "

  • 文章加密

    使用插件hexo-blog-encrypt可实现文章加密功能。

    • 安装

      1
      npm install --save hexo-blog-encrypt

    • 配置

      修改hexo _config.yml

      1
      2
      3
      4
      # Security
      ##
      encrypt:
          enable: true

    • 使用

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      ---
      title: hello world
      date: 2016-03-30 21:18:02
      tags:
          - fdsfadsfa
          - fdsafsdaf
      password: Mike
      abstract: Welcome to my blog, enter password to read.
      message: Welcome to my blog, enter password to read.
      ---
      • password: 是该博客加密使用的密码
      • abstract: 是该博客的摘要，会显示在博客的列表页
      • message: 这个是博客查看时，密码输入框上面的描述性文字

官网说明

1.4.2 next主题配置

next相关配置在next文件下的_config.yml文件中进行设置

1.4.2.1 显示预览

1
2
3
auto_excerpt:
  enable: true
  length: 100

1.4.2.2 头像设置

1
2
3
4
5
6
7
8
9
# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/han.jpg
  rounded: true
  opacity: 1
  rotated: true

1.4.2.3 设置侧边栏社交链接

1
2
3
social:
  GitHub: https://github.com/ruleizhou || github
  E-Mail: mailto:rulei.zhou@foxmail.com || envelope

1.4.2.4 取消目录标题的自动编号

1
2
3
toc:
  enable: true
  number: false

1.4.2.5 创建 “关于我” 页面

  • 新建一个 about 页面

    1
    hexo new page "about"

  • 配置主题的_config.yml

    1
    2
    3
    4
    5
    6
    menu:
      home: / || home
      #tags: /tags/ || tags
      #categories: /categories/ || th
      archives: /archives/ || archive
      about: /about/ || user

1.4.2.6 创建分类页面

  • 新建一个页面，命名为 categories

    1
    hexo new page categories

  • 将页面的类型设置为 categories

    1
    2
    3
    title: 分类
    date: 2019-06-29 19:34:23
    type: "categories"

  • 配置主题的_config.yml

    1
    2
    3
    4
    5
    6
    menu:
      home: / || home
      #tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      about: /about/ || user

  • 注意：如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

    1
    2
    3
    4
    title: 分类
    date: 2019-06-29 19:34:23
    type: "categories"
    comments: false

1.4.2.7 创建标签页面

  • 新建一个页面，命名为 tags

    1
    hexo new page tags

  • 编辑刚新建的页面，将页面的类型设置为 tags

    1
    2
    3
    title: 标签
    date: 2019-06-29 18:37:58
    type: "tags"

  • 注意：如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false

    1
    2
    3
    4
    title: 标签
    date: 2019-06-29 18:37:58
    type: "tags"
    comments: false

  • 配置主题的_config.yml

    1
    2
    3
    4
    5
    6
    menu:
      home: / || home
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      about: /about/ || user

1.4.2.8 hexo-asset-image

  • 安装

    1
    npm install https://github.com/CodeFalling/hexo-asset-image -- save

    注意：

    ​ 如果使用如下命令安装，可能会功能异常无法加载图片

    1
    npm install hexo-asset-image --save

  • 配置hexo _config.yml

    1
    post_asset_folder: true

  • 更改模板

    添加插入图片的根目录

    1
    2
    3
    4
    5
    6
      #scaffolds/post.md
      title: {{ title }}
      date: {{ date }}
      categories:
      tags:
    typora-root-url: {{ title }}

1.4.2.9 添加 gitalk 评论

  • 注册

    • 在github上注册新应用，注册链接

      参数说明：

      • Application name： # 应用名称，随意
      • Homepage URL： # 网站URL，如https://ruleizhou.github.io
      • Application description # 描述，随意
      • Authorization callback URL：# 网站URLhttps://asdfv1929.github.io
      • 注册成功后，即可看到Client ID和Client Secret

  • 配置主题_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    gitalk:
      enable: true
      github_id: ruleizhou
      repo: ruleizhou.github.io
      client_id: 0a400e1f09cb117f3ea4
      client_secret: f7d98253e2a12b03803742f2a506c174d06019a0
      admin_user: ruleizhou
      distraction_free_mode: true

Next 官网

参考