Docker + Hexo 配置静态博客

说明

最近在捣鼓docker,被他的独立运行应用的容器所迷恋,导致现在不管运行什么服务,第一印象都是想在docker中运行。

之前在本地安装过hexo的,运行没问题,现在想把hexo, 单独安装在docker中,通过docker容器,来管理我的博客。

大概的思路是:

  1. 下载一个nodejs的镜像
  2. 安装hexo
问题

由于之前自己的hexo博客,托管到git库了。所以这次的改动,从git库下载下来之后,直接在容器中运行的时候,遇到了兼容性问题(好久没有用过写博客了,中间断了2年,导致好多库老旧,没法使用)。

实在找不到问题,就重新创建了一个目录,然后重新hexo init初始化项目。再将之前博客文件,拷贝到新的项目中,运行。

过程
搭建hexo环境
  1. 下载nodejs的官方镜像,选择alipine版本(alipine非常小,才4M左右)

    docker pull node:10.15-alpine

  2. 创建&运行docker容器

    docker run -dit -p 228:22 -p 4001:4000 --name blog_hexo -v D:/semir/www/dev/:/mnt --network my_network --ip 172.18.0.8 node:10.15-alpine /bin/sh
    

    过程中,将自己的博客的根目录,挂在到容器中

  3. 重新创建目录&初始化博客

    > mkdir forkun_io
    > cd forkun_io
    > hexo init
    # 将之前的markdown文件,拷贝到项目目录:/source/_posts
    > hexo clean	# 清除之前的public文件
    > hexo generate
    > hexo server
    
配置Next主题
  1. 下载Next主题文件(github
  2. 将文件目录,拷贝到theme,然后项目配置文件中,指定next主题即可。
我的配置
  1. 项目启用next主题

    在项目配置文件(/_config.yml)theme 选项值,改为:next

  2. 开启资源文件夹自动生成功能

    在项目配置文件(/_config.yml)post_asset_folder 选项值,改为:true

    该功能,主要是为了在文章中,引入图片的功能。开启该功能,在每次执行hexo new 创建md文件的时候,会同步创建一个该md文件名同名的文件夹,然后可以将文章中需要的图片,存入到该文件夹,再在文章中直接引用。

    开启该功能,需要同步安装hexo的扩展插件,才能在文章中使用:

    ![音频默认控件样式](h5-audio-JS控制音乐开关/audio_demo.png)
    

    在项目根目录执行:

    npm install hexo-asset-image --save
    
  3. 启用next主题的本地搜索功能:Local Search

    npm install hexo-generator-searchdb --save

    修改项目配置文件(/_config.yml),在任意位置添加开启搜索

    # search
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    

    修改主题配置文件(/theme/next/_config.yml),开启本地搜索

    # Local search
    local_search:
      enable: true
    
  4. 开启tags&categories 聚合页

    创建tags和categories聚合页的index.md

    hexo new page tags
    hexo new page categories
    

    执行完该命令,会在/source/categories、/source/tags两个目录下创建index.md文件,该页面就是标签和分类的聚合页,然后需要做些修改,才能在hexo generate的时候,自动抓取页面中的标签和分类。修改各自的index.md文件

    # categories
    ---
    title: categories
    date: 2018-12-28 08:30:32
    type: categories
    comments: false
    ---
    
    # tags
    ---
    title: tags
    date: 2018-12-28 08:30:19
    type: tags
    comments: false
    ---
    
  5. 设置next主题的语法高亮

    修改主题配置文件(/theme/next/_config.yml)文件,开启语法高亮的主题

    highlight_theme: normal

    修改项目配置文件(/_config.yml)文件,开启自动识别高亮关键词

    highlight > auto_detect true

常见问题
hexo 部署报错

错误信息:ERROR Deployer not found: git

该错误的原因是hexo的git扩展未安装,执行:

npm install --save hexo-deployer-git