HEXO | 博客搭建

HEXO：快速、简洁且高效的博客框架

1. HEXO安装

• 安装Git
  Git官网下载速度感人，可以选择国内镜像下载git，然后安装...

• 安装node.js
  Hexo是基于NodeJS环境的静态博客，搭建基本全靠npm，npm是随同NodeJS一起安装的包管理工具。node.js下载，安装...
  npm全称Node Package Manager，是node.js的模块依赖管理工具。由于npm的源在国外，所以国内用户使用起来各种不方便。配置国内淘宝npm镜像方法：

  # 永久配置
  npm config set registry https://registry.npm.taobao.org
  
  # 验证
  npm config get registry
  #or
  npm config ls
  # 验证
  npm config get registry
  #or
  npm config ls</pre>
  

• 安装hexo

  # -g全局安装
  npm install hexo-cli -g
  

• 初始化hexo博客目录
  选择你想要的存放博客本地文件路径，根据实际情况执行以下命令：

  hexo init blog   # 将会新建一个blog的文件夹，最后hexo项目的初始化位置
  # or 如果你想把当前所在文件夹作为hexo库
  # hexo init
  # 上述命令可以克隆基本的hexo框架以及主题
  
  # 然后在blog目录下
  npm install
  hexo server
  

  即可预览初始化的hexo博客，到这里你已经初步搭建好你的博客框架

  初始博客页面
  在blog目录下，存在以下文件夹和文件：
  • node_modules：是依赖包
  • public：存放的是生成的页面
  • scaffolds：命令生成文章等的模板
  • source：用命令创建的各种文章
  • themes：主题
  • _config.yml：整个博客的配置
  • db.json：source解析所得到的
  • package.json：项目所需模块项目的配置信息

2. 配置博客信息

打开博客主目录下的_config.yml文件，修改或者添加配置参数。
同时，进入themes目录下的主题文件夹，修改_config.yml，同样配置信息。
在此过程中，需要阅读相关说明文档（例如主题的说明文档）

3. 写博客

• 新建博文，在博客主目录中执行：

  hexo new xxx  #xxx为你的博客名称
  

  然后打开source/_post打开创建的xxx.md，编辑即可；
• 上传博文到服务器
  在主目录中执行：

  hexo clean    # 清楚之前生成的网站文件
  hexo generate # 生成网站文件
  hexo server   # 本地开启服务，可以预览
  

4. 博客中上传图片

• 首先编辑主目录中配置文档_config.yml，修改post_asset_folder属性为：true
• 安装插件hexo-asset-image，在主目录下执行：

  npm install hexo-asset-image --save
  

• 此时执行hexo new xxx时候，在source/_post目录下生成md文件的同时，也会产生一个同名文件夹，该文件夹用于放置对应博文图片。

  # markdown添加图片格式
  # ![图片说明](图片路径)
  ![图片](xxx/xxx.jpg)
  

• 这里po一个我遇到的问题
  上传之后，发现网页没有正确加载图片，查看网页代码，发现路径很奇怪...之后，我修改hexo-asset-image插件中的index.js文件中的一处代码，才解决问题：
  node_modules/hexo-asset-image/index.js的58行改为：

  $(this).attr('src', src);
  

5. 公式支持

基于Hexo搭建的个人博客，默认情况下渲染数学公式会产生一些问题，我遇到的便是无法渲染。Hexo默认使用hexo-renderer-marked引擎渲染markdown，最理想的办法便是替换渲染引擎。

• 参考：
  1. 如何在Hexo中使用Mathjax渲染LaTeX数学公式
  2. 项目主页
• 安装hexo-renderer-markdown-it-plus插件

  npm uninstall hexo-renderer-marked --save
  npm install hexo-renderer-markdown-it-plus --save
     ​
  # 一些依赖
  npm install markdown-it-katex --save
  npm install markdown-it-mark --save</pre>
  

• 配置
  打开主目录博客配置文档_config.yml，添加：

  markdown_it_plus:
  highlight: true
  html: true
  xhtmlOut: true
  breaks: true
  langPrefix:
  linkify: true
  typographer:
  quotes: “”‘’
  pre_class: highlight
  plugins:
    - plugin:
      name: markdown-it-katex
      enable: true
    - plugin:
      name: markdown-it-mark
      enable: false
  

• 网页加载CSS
  修改主题网页生成相关文件代码，确保网页head部分加载mathjax样式表。

  <link href="https://cdn.bootcss.com/KaTeX/0.7.1/katex.min.css" rel="stylesheet">
  

• 公式
  段落内公式：， 字母：
  居中公式：
  

6.github

未待完续...

---

关于我

Github: https://github.com/hezl1592
个人博客: https://hezl1592.github.io

---