本文记录了基于 shoka 主题的 hexo 基础搭建流程,不包含 algolia 搜索以及 valine 以及 shoka 主题的一些定制功能的实现。

# 事件起因

其实我已经有了一个 typecho 博客,那么为什么我还要再搭建一个 hexo 博客呢?
起因是这样的,有一天我无意间看到 mqygalaxy 的博客。这个博客的主题瞬间戳中我的 XP,实在太对我的胃口了,顿时有了产生了 “我也整个呗” 的冲动。
曾几何时,我也尝试过搭建 hexo 博客,但都在繁琐的搭建教程面前半途而废,但这次这个主题给了我前所未有的动力。

当然,我会选择 hexo 搭建备站,还因为一些 hexo 本身的优点:

  1. hexo 博客托管于 github, 对我来说,安全性比 typecho 高。[1]
  2. 完全免费白嫖实在太香了!代码托管用 github ,cdn 加速用 jsdeliver ,评论用 valine ,搜索用 algolia ,而且体验都还不错。
  3. 虽然搭建很繁琐,后续的使用还是比较简单的。其实也可以通过 github action 实现在线编辑,不过我还是比较喜欢用 Visual Studio Code 安装 markdown插件 进行本地编辑。
  4. 霜月琉璃大佬的 shoka 主题不光好看,还有很多适合当笔记使用的特性,我本来就准备把博客当作笔记来写,这让我爱不释手。
  5. typecho 一样使用 markdown 进行博客编写,这点对我很重要。
  6. 可以使用随机图 api,终于不用辛苦选图了。

# 搭建过程

# Hexo 搭建

Hexo 可以理解为一个软件,他可以一键生成一套静态博客的文件。生成后可以放在任意地方进行访问,当然你也可以通过 hexo s 启动本地服务器,使用 localhost:4000 进行本地访问。我们通常通过本地访问来调试,确定没有问题后再进行上传 github。

# 安装 Node.js

Hexo 基于 Node.js ,所以在安装 hexo 之前,你需要准备 Nodejs 环境,请根据自己的平台选择相应的方式进行安装。
这里仅介绍 win10 下的安装,Nodejs 官网下载 Windows Installer , 然后无脑下一步就行了。
安装后,打开 cmd ,在命令行中输入 node -v 来检查是否工作正常,只要有返回就行。

# 安装 Git

安装 Hexo 的一键脚本中需要 git 环境,后续需要将 hexo 部署到 github 也会用到 git ,所以先得安装 git

请在 git 官网根据自己的平台选择对应的安装方式,这里不作赘述。
安装完成后,在 cmd 输入 git ,如果有返回,就证明工作正常。

# 安装 Hexo

  1. 在合适的位置 新建一个文件夹 ,用于存放你的 hexo 博客文件位置。
  2. 进入文件夹,按住 shift 的同时点击 右键 ,在右键菜单中点击 在此处打开powershell窗口
  3. 输入命令 npm i -g hexo-cli 进行安装
  4. 输入 hexo init 初始化以及 npm install 安装必要组件
  5. 至此 Hexo 安装完毕,可以使用 hexo s 启用本地服务器,在浏览器输入 localhost:4000 尝试访问。

# 安装主题

shoka 主题为例,其他主题不保证可以适用。

# 下载主题以及配置主题

  1. 在博客文件夹根目录下使用下述命令进行安装
# cd your-blog
git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

  1. 下载完成后,文件会在 博客路径下的theme
    比如这里,我的博客根路径为 D:\Doc\example\ ,那么 shoka 的主题文件就在 D:\Doc\example\theme\shoka\

  2. 编辑博客根目录下的 _config.yml , 搜索 theme ,修改为:

theme: shoka
  1. 删除 _config.landscape.yml ,这是 hexo 默认主题的配置文件,建议删除

# 安装 shoka 主题所需的必要插件

# 安装 hexo-renderer-multi-markdown-it

  1. 卸载掉默认的 hexo-renderer-marked ,以及别的 markdown 文件渲染器。
npm un hexo-renderer-marked --save
# 或者
yarn remove hexo-renderer-marked
  1. 在博客根目录下用如下命令进行插件安装
npm i hexo-renderer-multi-markdown-it --save
# 或者
yarn add hexo-renderer-multi-markdown-it

如图:

  1. 编辑 _config.yml , 配置插件参数,在合适位置添加
markdown:
  render: # 渲染器设置
    html: false # 过滤 HTML 标签
    xhtmlOut: true # 使用 '/' 来闭合单标签 (比如 <br />)。
    breaks: true # 转换段落里的 '\n' 到 <br>。
    linkify: true # 将类似 URL 的文本自动转换为链接。
    typographer: 
    quotes: '“”‘’'
  plugins: # markdown-it 插件设置
    - plugin:
        name: markdown-it-toc-and-anchor
        enable: true
        options: # 文章目录以及锚点应用的 class 名称,shoka 主题必须设置成这样
          tocClassName: 'toc'
          anchorClassName: 'anchor'
    - plugin:
        name: markdown-it-multimd-table
        enable: true
        options:
          multiline: true
          rowspan: true
          headerless: true
    - plugin:
        name: ./markdown-it-furigana
        enable: true
        options:
          fallbackParens: "()"
    - plugin:
        name: ./markdown-it-spoiler
        enable: true
        options:
          title: "你知道得太多了"

如图:

  1. 继续编辑 _config.yml , 找到如下字段
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

enable: true 改成 enable: false

# hexo-autoprefixer

  1. 同上,通过命令安装
npm install hexo-autoprefixer --save
  1. 编辑 _config.yml ,合适位置加入
autoprefixer:
  exclude:
    - '*.min.css'

# 检查主题是否工作正常

  1. 使用 hexo clean , hexo g , hexo s 三连
  2. 浏览器输入 localhost:4000 ,点开默认的博文 hello world ,查看网页是否渲染正常(为防止网页缓存导致显示异常,建议打开无痕窗口进行浏览)
  3. 如果不正常请挨个检查上述步骤中的配置

# 配置 github 相关参数,将博客上传至 github

# git 绑定 github 账号

  1. 鼠标右键或者菜单搜索打开 Git Bash (鼠标右键为 Git Bash Here 在此路径打开,不影响以下操作)
    设置 user.nameuser.email 的配置信息,分别输入后回车:
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
  1. 绑定后生成 ssh密钥 文件:
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

默认不需要设置密码
生成 ssh 文件后, git 会直接给出 .ssh 文件夹所在路径, WIN10 一般在 C:\Users\用户名\.ssh

  1. 打开 .ssh 文件夹找到 id_rsa.pub ,复制里面的全部内容

  2. 新建 ssh key
    打开 GitHub ,点击右上角个人头像 --> Setting --> SSH and GPG keys --> New SSH key
    title 任意填写,将你复制的内容粘贴至 Key 中,点击 add SSH Key

  3. Git Bash 中输入 ssh git@github.com 检测公钥设置是否成功
    如若出现 Hi 你的用户名!You've successfully authenticated…… 的说明即为成功

设置密钥可以让你在使用 Git 上传时省去每次都得输入账号密码的烦恼

# 推送网站的相关配置

  1. 编辑博客根目录下的 _config.yml , 修改 deploy 项,在文件最后
# 以下格式可能不符,请主动修改
deploy
  type: git
  repo: git@github.com:用户名/仓库名.git # 仓库地址
  branch: master
  1. 安装 Git 部署插件,输入命令
npm i hexo-deployer-git --save
  1. 此时已经配置完毕,可以使用 hexo d 进行推送

# 更换域名

如果你使用的 github 送给你的域名可以省略此步骤

  1. 首先得购买域名,如果是国内供应商购买的域名可能需要备案,在购买域名的地方配置域名解析,如我在阿里购买的域名为 moehz.com ,我想用 blog.moehz.com 这个域名来作为这个博客的地址,那么我需要先配置 blog.moehz.comCNAME 解析为 github 白给我的域名 mint233.github.io ,如图:
  2. 在仓库的 setting 界面往下拉,可以看到 Git Pages 的设置选项,在这里可以设置自定义域名,强制开启 https(github 会自动帮你从 Let's Encrypt 申请证书)。
  3. 在浏览器里使用自定义域名访问看看,应该已经生效了吧!而且此时如果你访问 github 白给的域名也会自动跳转到自定义域名。如我访问 mint233.github.io 会自动跳转到 blog.moehz.com
  4. 不过这里还没有万事 OK,因为此时你如果写了一篇新文章,使用 hexo d 来上传的话,会发现域名又变回去了!所以你还需要一步来防止 github 的这个行为,也很简单,在博客的库下面新建一个 CNAME 文件,内容就写你的自定义域名,如我就应该写 blog.moehz.com ,这样它就不会擅自将域名变回去了!

  1. 这里并非说 typecho 不安全,主要是因为我没有过备份还原 typecho 博客的经验,没有信心在出事之后还能还原回来曾经用过一段时间 wordpress,后来服务器挂了,一切都没了。而且不光 github 靠谱,hexo 自身的特点导致它会在本地以及远端都有完整的一套代码,恢复非常简单。我用它做备站,typecho 如果出了什么问题,我没有能力恢复的话,至少我写的文章不会丢失。 ↩︎

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

木 白 微信支付

微信支付

木 白 支付宝

支付宝

木 白 贝宝

贝宝