博客搭建笔记

环境介绍

使用 Hexo 之前需要安装 npm 和 Git，并配好环境变量。

Linux 下的环境变量配置，在 ~/.profile 文件结尾处添加

export PATH=/<npm_root_path>/bin/:$PATH

推荐安装 nrm 来选择高速的 npm 源。

npm install -g nrm
nrm ls
nrm use taobao

主题使用的是 Icarus。

npm：全称 node package manager，是 Node.js 的包管理工具。

安装和主题配置

安装 hexo

npm install -g hexo-cli

hexo-cli 是 hexo 的命令行界面，cli 是 Command Line Interface 的缩写。 -g 是全局模式安装，关于 npm 参数说明可以运行 npm help npm 查看。

初始化项目

以 MyBlog 目录名称为例，创建一个文件夹 mkdir MyBlog，作为项目的根目录，并切换到该目录 cd MyBlog/。

然后初始化 hexo init。

安装 Icarus 主题

参考官方教程：Icarus 用户指南。

安装

npm install hexo-theme-icarus
hexo config theme icarus
# 或者
git submodule add https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

配置语言和切换主题

设置语言为中文：MyBlog/_config.yml 中 language: zh-CN。

设置主题为 Icarus：MyBlog/_config.yml 中 theme: icarus。

MyBlog/_config.yml 中主要包含网站和目录结构的配置，是站点配置文件。

本地预览和远程部署

本地启动服务预览

首次使用主题时需要运行 hexo server 上面的命令两次，第一次启动时会生成主题配置文件 MyBlog/_config.icarus.yml。

GitHub Pages 远程部署

安装 hexo-deployer-git
```
npm install --save hexo-deployer-git
```

配置 MyBlog/_config.yml

deploy:
    type: 'git'
    repo: 'https://github.com/cjpr/cjpr.github.io.git'
    branch: 'master'

部署清理缓存并部署
```
hexo clean
hexo generate
hexo deploy
```

Icarus 主题配置

组件类型

可配置的主要组件有

navbar 导航栏
footer 页脚
article 文章
search 搜索引擎
comment 评论
donate 捐赠
share 分享链接
sidebar 侧边栏
widgets 挂件
plugins 插件
providers cdn供应商

Hexo plugins

Hexo 可以通过安装 plugins 插件实现扩展功能。

Atom 或 RSS 订阅

安装 hexo-generator-feed

npm install --save hexo-generator-feed

_config.yml 站点配置文件中添加以下内容

feed:
  type: atom
  path: atom.xml
  limit: 20

PlantUML

安装 hexo-filter-plantuml

npm install --save hexo-filter-plantuml

部署 PlantUML Server

_config.yml 站点配置文件中添加以下内容

plantuml:
  #  Local or PlantUMLServer.
  render: "PlantUMLServer"

  # the server,you can change your self-hosted sever for privacy
  server: "http://<your ip>:<port>/plantuml"
  # "inline": <svg>xxx<svg/>
  # "inlineUrlEncode": <img src='data:image/svg+xml;> 
  # "inlineBase64": <img src='data:image/svg+xml;base64> 
  # "localLink": <img src="/assert/puml/xxxx.svg">
  # "externalLink": <img src="http://www.plantuml.com/plantuml/svg/xxx">
  link: "inline"

  # common options: svg/png
  outputFormat: "svg"

Mermaid

安装 hexo-filter-mermaid-diagrams

npm install --save hexo-filter-mermaid-diagrams

在 themes/icarus/layout/common/scripts.jsx 中添加以下代码

<script src={cdn('mermaid', '8.3.0', 'dist/mermaid.min.js')}></script>
<script src={url_for('/js/mermaid.js')} defer></script>

添加位置如下

module.exports = class extends Component {
    render() {
        ......
        return <Fragment>
            ......
            /* 代码插入位置 */
            <script src={url_for('/js/main.js')} defer></script>
        </Fragment>;
    }
};

在 themes/icarus/source/js/ 文件夹中创建 mermaid.js 文件，添加以下代码

(function() {
    if(mermaid){
        mermaid.initialize({
            theme:'default',
            logLevel:'fatal',
            securityLevel:'strict',
            startOnLoad:true,
            arrowMarkerAbsolute:false,
        });
    }
}());

参考资料

原文链接：https://cjpr.pages.dev/2020/03/begin-build-blog/ 版权声明：本文以 CC BY-NC-ND 4.0 授权，转载请附上原文链接及本声明。

cjpr / utterances

2020/03/begin-build-blog/ #2

博客搭建笔记 - Cyber Joker's Punk Rock