首页

cli 是个好文明

# 前置准备

在开始搭建博客之前，你需要准备：

  • github 账号，或 git 服务器
  • Node.js 18 以上的版本，以及对应的 npm/pnpm

以下命令均以 npm 作为包管理器

# 安装 hexo，准备环境

参考 hexo 建站文档

使用下列命令以安装 hexo 及准备博客的文件。

npm install -g hexo-cli     # 下载安装 hexo 的 cli
hexo init <folder>          # 初始化 hexo 博客环境
cd <folder>                 # 进入博客的目录 folder
npm install                 # 安装依赖包

执行成功后，该文件夹的目录如下。

  • _config.yml: 博客的配置文件
  • package.json: node.js 应用程序的信息
  • node_modules: node.js 的依赖包文件夹
  • scaffolds: 模版文件夹
  • source: 存放用户资源的文件夹
  • themes: 用于生成静态页面的主题文件夹

source 文件夹内，除 _posts 子文件夹之外，开头命名为 _ (下划线) 的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

# 安装 ShokaX 主题

参考 ShokaX 文档

npm install -g shokax-cli
npm install -g hexo-lightning-minify    # ShokaX 的依赖
# cd [folder]
SXC install shokaX

执行成功后按照命令的输出进行文件重命名等操作。

# 配置博客及主题

参考 Hexo 配置文档及 ShokaX 文档

在博客的根目录下找到 _config.yml ，打开编辑。

在文件内添加如下信息以配置 markdown：

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: "你知道得太多了"
autoprefixer:
  exclude:
    - "*.min.css"
ShokaX 接管了代码高亮，故需要停用 hexo 提供的默认代码高亮。全新安装的 hexo 版本均在 7.0.0-rc1  以上，故可以参考文档相应部分，在 config.yml  中作如下修改：


syntax_highlighter: false
# 本地预览博客


至此，初期准备已完成，可以使用下面的命令在本地对博客进行预览。


hexo generate   # 生成静态页面文件
hexo server     # 启动本地服务器
命令会输出一个 url 地址，访问该地址以进行预览。


# 部署配置




参考 hexo 的一键部署页面的 Git  部分




安装 hexo-deployer-git：


npm install hexo-deployer-git --save
在 git 服务器上新建一个仓库，并修改 _config.yml  中的 deploy 部分：


deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]
配置完成后即可使用如下命令进行推送。


hexo deploy
# 开通公网访问


# 1.GitHub Pages


如果你的网页是部署在 github 上的，则可以在仓库设置 - Pages (链接为 https://github.com/[用户名]/[仓库名]/settings/pages ) 中进行配置。


# 2.Vercel


由于一些众所周知的原因，在国内访问 GitHub 的服务器会较慢，有时还会出现无法访问的情况，故可以考虑将网页部署在 Vercel 上。




Vercel 是一个支持静态和动态网站部署的云服务平台，其特点包括个人版免费、内置 CICD、自动部署、GitHub 集成和丰富的集成能力。




并且 Vercel 的个人版永久免费。


该部分教程可参考该博客的 将项目部署到 vercel 上 部分。


# 添加文章并更新


若想进行写作请参考 hexo 文档的写作部分。


使用如下命令进行更新：


hexo generate   # 更新文件
# hexo server   # 本地预览
hexo deploy     # 部署