自用 hexo 博客搭建步骤

发表于 更新于

概述

简单来说, hexo是一个博客系统, 通过markdown文章, 自动生成静态站点. 类似的东西还有很多, 或者说是快速搭建博客的东西有很多. hexo官网

  • 大的有(用这些关键字网上就能搜出来)

    1. 开源贴吧系统
    2. 开源论坛系统 eg: Discuz
    3. 成套的博客系统 eg: WordPress
    4. 各种开源各种类型网站/系统

  • 小的, 简单的, 类似hexo的(不以先后论排名)

    1. gitbook

      目前商业化, 桌面应用和cli工具也都弃用了, 目前主要是在线的gitbook. 个人用户免费10个空间, 就是10本书的意思吧~

    2. docsify

      这个我觉得挺不错, 与hexo不同的是不是生成静态html, 而是通过 js 脚本处理…, 我们看见的博客右上角有一个github图标的, 十有八九就是通过 docsify 搭建的. 大概长这样.

    3. hexo

    4. mkdocs

      这个我觉得写 xxx使用说明/操作文档 等比较合适, msys2手册 就是用 mkdocs 构建的, 感觉特别好. 但不适合个人写博客.

    5. Docusaurus

    6. Gatsby

    7. Jekyll

    8. VuePress

    9. ghost

    10. Hugo

    11. Pelican

    12. … 太多了, 数不过来, 找一个或两个自己喜欢的就可以了. 其他的看下界面就好😂

快速开始

  1. 找一个合适的位置

    1
    D:\System\Blogs\hexo-github-pages

  2. 固定到开始菜单, 然后调整在开始菜单的位置, 右键打开位置, 定位到对应的快捷方式, 修改名称 - ‘博客’, 顺带 属性->更改图标

    image-20201125214531616

  3. Windows Terminal 打开目标位置, 执行命令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # 说明一下, 为什么用这条命令, yarn现在比较流行, 所以不用npm. yarn具有缓存机制, 不会每次都从网络获取, 这一点特别好.
    # 为什么不全局安装hexo-cli呢? 考虑到版本配套兼容问题
    yarn add hexo

    # 初始化一个hexo项目, 非全局命令需要加yarn, 在可能产生歧义的情况下, 用 yarn run hexo init docs, 至于这个docs名字随便
    yarn hexo init docs

    # 切换目录, 否则 yarn hexo s 无效
    cd docs
    yarn hexo s

    # 到现在应该就可以了, 查看控台输出, 应该能找到 http://localhost:4000
    # 浏览器访问

配置个人所属信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Site
title: '22:22'
subtitle: 'Blogs of Xiaomi Wang'
description: '分享每一个问题'
 
author: foyou
language: zh-CN
 
# URL
# If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: https://lemisky.github.io/debug
root: /debug/

# Writing 自动根据时间创建目录
new_post_name: :year/:month/:title.md # File name of new posts

配置主题

  1. 安装 hexo-theme-next 主题

    1
    yarn add hexo-theme-next

  2. 修改配置

    1
    2
    # 可选, 配置文件在 node_modules/hexo-theme-next/_config.yml
    # 覆盖配置, 在 根目录 _config.yml 中 theme_config: 下配置

部署

先配置 _config.yml

1
2
3
4
5
6
7
8
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  #repo: git@github.com:lemisky/hexo-deploy.git
  repo: git@github.com:lemisky/lemisky.github.io.git
  branch: main
  message: 'hexo-deployer-git auto sync'

之后运行如下命令, 原理就是, 清空远端, 然后提交同步

1
2
3
PS D:\System\Blogs\hexo-github-pages\docs> yarn add hexo-deployer-git
PS D:\System\Blogs\hexo-github-pages\docs> yarn hexo clean
PS D:\System\Blogs\hexo-github-pages\docs> yarn hexo deploy

一些问题

  1. 主页预览太多: 目前只能在文章中 输入 <!– more –> , hexo会识别截断, 前提就是主题配置文件中

    1
    2
    # Automatically excerpt description in homepage as preamble text.
    excerpt_description: true

  2. 如果主题配置文件修改之后, 进行主题升级, 那么就比较麻烦, 所以不建议直接修改主题配置文件, 使用以下语法在主配置文件中进行配置

    1
    2
    3
    4
    # 按需添加, 修改
    theme_config:
      sidebar:
        position: right

  3. 关于图片, 我的方案是将图片放到 source/images 中, 以 images/xxx.png 方式引用.

  4. 关于url的问题, 因为部署到 github pages, 暂时没想好的办法, 只占用远端一个文件夹, 所以修改 url 配置, 如下

    1
    2
    3
    4
    # URL
    ## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
    url: https://lemisky.github.io/
    root: /