hexo博客搭建(转载)

HEXO 博客搭建

前言

本文章 转自 Winward King

软件与平台

必须的软件：

• NODE.JS
• GIT

博客编写的软件

• Visual Studio Code（推荐）
• TYPORA

安装说明

• node.js 和 Typoro、Git，一路下一步就行了。
• VSCode 安装好之后默认是英文界面，可以在插件市场里搜索 chinese，安装之后重启软件，变成中文版。

检查是否安装成功

• Windows 下用 Win + R 打开运行，输入 cmd 并进入 cmd 窗口查询

• Mac 下打开终端，进行查询

• 右键打开 Git bash，输入命令查询

• node.js 版本的检查

  node -v

• npm 版本的检查 (NPM 是随同 NodeJS 一起安装的包管理工具，能解决 NodeJS 代码部署上的很多问题)。

  npm -v

• Git 版本的检查

  git --version

HEXO 的安装

在 Git bash 或者 CMD 界面执行命令

• 安装之前可以先设置一下淘宝镜像加速器 (国内访问镜像站快一点)

  npm install -g cnpm --registry=https://registry.npm.taobao.org

• 全局安装框架

  npm install hexo-cli -g

• 创建自己的博客目录并安装博客

  hexo init 博客的根目录名字

• 进入博客的目录

  cd 博客的根目录名字

• 安装 npm 依赖环境

  npm install

• 安装 Hexo (Git) 部署插件

请在博客的目录下启动 Git bash，再执行以下代码

npm install hexo-deployer-git --save

HEXO 常用代码

清理缓存，会自动删除博客目录下得 public 文件。(hexo cl 是 hexo clean 的简写)

hexo cl 

hexo clean

生成静态页面，重新生成 public 文件。（hexo g 是 hexo generate 的简写)

hexo g 

启动本地服务，在 http://localhost:4000/ 预览效果。（hexo s 是 hexo server 的简写）
如果是挂载在群晖等内网系统用 http://192.168.xxx.xxx:4000，注意端口号是否被占用

hexo s #或者hexo server

部署推送，部署到 github。（hexo d 是 hexo deploy 的简写）

hexo d

以上连写示例一（清理缓存 + 生成静态页面 + 在本地预览）

hexo cl && hexo g && hexo s

以上连写示例二（清理缓存 + 生成静态页面 + 部署推送）

hexo cl && hexo g && hexo d

HEXO 博客的基础环境搭建完成

HEXO 博客主题配置

博客配置 GIT 及备份

博客的 Git 配置

• Git 的配置与使用，可以参考我另一篇文章，在此不在赘述。
• Git 配置与使用

Hexo Github 配置

• 创建一个仓库，名为：自己用户名 + .github.io

#例如我的就是
winward-king.github.io

修改博客 _config.yml 文件的配置

1. 打开博客根目录的 _config.yml 文件，找到下面这个位置

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo:
    github: https://github.com/自己用户名/自己用户名.github.io.git
  branch: master #

• 将以下信息添加到 repo: 里面去，main or master 选择对应的分支

https://自己用户名.github.io

1. 修改主题链接的 URL

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://winward-king.github.io/ #替换成你自己的链接
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

博客的备份

1. 在 Github 上创建一个仓库，名字随便
2. 通过 Git 命令推送，并保持更新
3. 配置.gitignore

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
_multiconfig.yml

运维博客常用网站汇总

博客框架文档

• hexo - 中文文档
  https://hexo.io/zh-cn/docs/

butterfly 主题文档

• butterfly 主题中文文档
  https://butterfly.js.org/
• butterfly 主题 Github 项目地址
  https://github.com/jerryc127/butterfly.js.org
• 主题开发者适配的插件
  https://github.com/jerryc127/butterfly-plugins

图标网站

• fontawesome - 图标库
  https://fontawesome.com/icons?from=io

• iconfont - 阿里巴巴矢量图标库
  https://www.iconfont.cn/

图片处理

• tiny - 图片无损压缩
  https://tinypng.com/

文档处理

• HTML 与 Markdown 转换
  https://www.bejson.com/convert/html2markdown/

• HTML 转为 JADE/PUG
  http://html2jade.org/

评论区管理

• twikoo
  https://twikoo.js.org/
• mongodb
  https://cloud.mongodb.com/
• vercel
  https://vercel.com/login

云服务

• 腾讯云
  https://cloud.tencent.com/

• 阿里云
  https://www.aliyun.com/

• 又拍云
  https://console.upyun.com/

• jsDelivr
  https://www.jsdelivr.com/

拓展使用

引用站内文章

post_link

在写文章的过程中，有时候需要引用站内的其他文章。可以通过内置的标签插件的语法 post_link 来实现引用。
这里默认的路径是在 _post 路径下，如果不是默认路径，需要写上相对路径。

语法

{% post_link '文章文件名(不要后缀)' '文章标题(可选)' %}

实例 - 链接使用文章的标题

{% post_link 'Hexo/01hello-world' %}

实例 - 链接使用自定义文字

{% post_link 'Hexo/01hello-world' '你好，世界' %}

post_path

用来获取文章的链接地址，但是不是链接
可以用 markdown 语法直接插入文件链接，也很方便。

语法

{% post_path filename %}

实例

{% post_path Hexo/01hello-world %}
[你好，世界](/2022/02/15/Hexo/01hello-world/)

hexo 链接到站内文章指定锚点

当前文章锚点跳转

[跳转到本文锚点](#hexo-标题与-id-关系)

站内文章跳转

<a href="{% post_path 'hexo blog' %}#安装">hexo 安装</a>

站外文章锚点

[标题](网址)

其他更多标签用法

标签插件（Tag Plugins）

隐藏文字

<div style="display:none">

</div>