Hexo 博客搭建总结

Coding

Created At : 2020-10-01 20:11

Overview
安装 Node.js 和 npm
安装 Hexo 和部署需要的插件
部署到 github
Hexo 测试 & 部署命令
主题选择 hexo-theme-3-hexo
数学公式渲染支持: 采用 kramed 替代原有的 marked
特殊符号兼容性问题
图片压缩

Overview

1.安装 Node.js 和 npm
2.安装 Hexo 和部署需要的插件
3.部署 github
4.Hexo 测试 & 部署命令
5.主题选择 hexo-theme-3-hexo
6.特殊符号兼容性问题
7.图片压缩

安装 Node.js 和 npm

sudo apt-get update
sudo apt install nodejs -y
sudo apt install npm -y
# 升级npm为最新版
sudo npm install npm@latest -g
# 安装用于管理node的模块n
sudo npm install -g n
# 使用n模块来安装node版本
sudo n latest # 最新版本
sudo n stable # 最新稳定版本
# 查看安装好的版本
node -v
v12.4.0
npm -v
6.9.0

安装 Hexo 和部署需要的插件

mkdir hexo & cd hexo
sudo npm install -g hexo-cli
hexo init

若报错执行代码, 不报错就不要执行

sudo npm config set user 0
sudo npm config set unsafe-perm true
sudo npm install -g hexo-cli

安装插件

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked --save
npm install hexo-renderer-stylus --save
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save

测试安装成功

hexo s

得到成功提示, 浏览器输入 http://0.0.0.0:4000 访问首页, terminal 出现如下的提示

INFO  159 files generated in 451 ms
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

部署到 github

1.github 创建一个新项目，项目名称为 yourname.github.io
2.修改 Hexo 配置文件 hexo/_config.yml 里面的 deploy 信息, 设置 repo 为刚才建好的项目名称

deploy:
  type: git
  repo: git@github.com:GoldAndRabbit/GoldAndRabbit.github.io.git
  branch: master

Hexo 测试 & 部署命令

通常只有测试和部署两种命令, 写入在 .zshrc 的 alias

alias hxtest="cd /home/gold/repos/hexo && hexo clean && hexo g && hexo s"
alias hx="cd /home/gold/repos/hexo && hexo clean && hexo g && hexo d"

部署之后, 支持实现实时渲染的效果: 略微改动了文章之后, 刷新页面就可以看到改动的效果
如果看线上效果, 只需要执行上面的 hx 命令, 然后访问站点

yourname.github.io

主题选择 hexo-theme-3-hexo

最终选择了, hexo-theme-3-hexo 这个主题 https://github.com/yelog/hexo-theme-3-hexo, 然后我的自己的配置如下

version: 1.1.0
# 你的头像url
avatar: /img/avatar.jpg
favicon: /img/avatar.jpg

#如果博客放置位置不是根目录，则可以通过配置此路径解决静态文件路径错误问题
# 比如访问地址为 yelog.org/blog 那就需要配置为 blog_path: /blog 才能正常访问
blog_path: /

# 链接图标 显示顺序和下面顺序一致
link:
  theme: color # 链接样式，color: 彩色图标  white: 黑白图标
  items:
    # rss: /atom.xml
    github: https://github.com/goldandrabbit
    # facebook: https://www.facebook.com/faker.tops
    # twitter: https://github.com/goldandrabbit
    # linkedin:
    # instagram: https://www.facebook.com/faker.tops
    # reddit: https://www.reddit.com/user/yelog/
    # weibo: http://weibo.com/u/2307534817
    # jianshu: https://www.jianshu.com/u/ff56736de7cf
    # zhihu: https://www.zhihu.com/people/jaytp/activities
    # csdn:
    # oschina: https://my.oschina.net/yelog
    # juejin:
    # email: jaytp@qq.com
    # qq: 872336115
    # kugou: https://www.kugou.com/
    # neteasemusic: https://music.163.com/#/user/home?id=88151013

##########多作者模式############
author:
  on: false
  authors:
    author1: 阁主
    author2: 小马哥
##############################

# 文章分类设置
category:
  num: true # 分类显示文章数
  sub: true # 开启多级分类
  sort:
    - 读书
    - 工具
    - 大前端
    - 后端
    - 数据库
    - 运维
  width:
    lg: 150 # 1468px<屏幕宽度 左侧分类宽度
    md: 100 # 1024px<屏幕宽度<=1468px 左侧分类宽度
    sm: 100 # 426px<屏幕宽度<=1024px 左侧分类宽度（ipad）
# 多级分类说明：
# 比如在文章中设置多个菜单，则默认为多级菜单，即：工具>hexo
# categories:
#   - 工具
#   - hexo

# 快捷键
shortcutKey: true

# 左下角自定义菜单
menu:
  about:  # '关于' 按钮
    on: false # 是否显示
    url: /about  # 跳转链接
    type: 1 # 跳转类型 1：站内异步跳转 2：当前页面跳转 3：打开新的tab页
  friend: # '友链' 按钮
    on: false # 是否展示

# 文末声明
article_txt: 转载请注明来源

bottom_text: ©2018-2024
# 自定义页面最下方的站点版权信息
# 如果不填，则自定义为 ©2017 author (这个author为hexo根目录_config.yml中配置的)

# 底部备案号
miit:
  on: false
  info: 京ICP证030173号
  url: http://beian.miit.gov.cn/ # 默认链接为 http://beian.miit.gov.cn/

reward: true
# true 开启打赏功能

searchAll: false
# true 启用全文搜索
# 开启此功能需要下面操作：
# 1. 在 hexo 根目录 执行 npm install hexo-generator-search --save 安装插件
# 2. 在 hexo 根目录的 _config.xml 中添加下面内容
# search:
#   path: search.xml
#   field: post

copyright: false
# Copyright info. of post | 文末版权信息

word_count: false
# true 开启字数统计
# 开启此功能需要安装插件 ：在 hexo根目录 执行npm i hexo-wordcount --save

# 不蒜子网站计数设置
# http://ibruce.info/2015/04/04/busuanzi/
visit_counter:
  on: false
  site_visit: false
  page_visit: false

##########自定义样式设置##############
# Table of contents | 文章目录
toc:
  max_depth: 3  # 1 - 6 (h1-h6) 目录最大级数

# 文章列表 鼠标移上去的样式, 为空时使用默认效果
article_list:
  title: '#000000' # 文章列表标题颜色
  datetime: '#87CEFA' # 文章发布日期颜色
  hover:
    background: '#ffffff'  # 背景色:提供几种：'#c1bfc1'  '#fbf4a8'
    color: '#DC143C'    # 文字颜色 提供几种：'#ffffff'
# 注意：由于颜色如果包含#，使用单引号 ' 引起来

# 文章列表背景图
article_bg_img:
  on: false # 是否开启
  src: https://i.loli.net/2019/07/22/5d3521411f3f169375.png
  opacity: 0.3 # 背景图透明度，范围 0 ～ 1

# 列表样式
list: normal
# normal : 普通样式
# thread : 列表外圈有一个线框

# 引用块样式
blockquote: github
# github : 类似于github的引用快
# bracket : 类似于左右两个大括号的样式

# table 的样式
table: green_title
# 为空时类似github的table样式
# green 绿色样式
# green_title 头部为青色的table样式

# 首页背景图
index_bg_img:
# 其他页面背景图
other_bg_img:

# 点击图片放大样式
img_resize: default
# 可选值：
# default: 默认(自己写的简单的放大)
# photoSwipe: 使用photoSwipe插件

# 代码段高亮样式，markdown 语法 `demo`
code:
  theme: sublime
# 支持主题：
# dark-red: 红字(默认)
# github: github 样式（灰色底，黑字）

highlight:
  on: true # true开启代码高亮，开启需要关闭博客 _config.yml 中的 highlight
  lineNum: false # true显示行号
  copy: true # 复制功能
  theme: atom-dark

# MathJax 数学公式支持
mathjax:
  on: true #是否启用
  per_page: false # 若只渲染单个页面，此选项设为false，页面内加入 mathjax: true

# Mermaid 支持
mermaid:
  on: false
  cdn: //cdn.jsdelivr.net/npm/mermaid@8.4.2/dist/mermaid.min.js
  #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.3.1/mermaid.min.js
  options: # 更多配置信息可以参考 https://mermaidjs.github.io/#/mermaidAPI
    theme: 'default'
    startOnLoad: true
    flowchart:
      useMaxWidth: false
      htmlLabels: true

##############################
# 友情链接
friends:
  叶落阁: http://yelog.org/

##########评论设置#############
comment:
  on: false
  type: gitalk  # 评论系统：gitalk、disqus、gitment、utteranc、livere,注意：使用时，在下方对应位置进行配置
  comment_count: true  # 文章标题下方显示评论数 目前仅支持 gitalk 和 disqus
  ## 使用说明 https://yelog.org//2020/05/23/3-hexo-comment/
# 各评论系统配置 ↓↓

disqus:
  shortname:
  # disqus评论系统， 2016年9月被GFW认证，大陆不能使用。
  # 获取shortname：https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-

gitalk:
  githubID: yelog
  repo: yelog.github.io
  ClientID:
  ClientSecret:
  adminUser: yelog
  distractionFreeMode: true
  language: zh-CN
  perPage: 10
# gitalk：利用github issue制作的第三方聊天插件
# https://github.com/gitalk/gitalk
# 参数介绍：
# githubID: github用户名
# repo: 使用哪个仓库的issue
# ClientID 和 ClientSecret 创建 OAuth application 就会生成：https://github.com/settings/applications/new
# adminUser: 必须为上面仓库的合作者（有写入权限），使用自己的 github 用户名即可
# distractionFreeMode: 全屏遮罩效果
# language: 语言：支持：en / zh-CN / zh-TW 三种
# perPage: 每次加载的数据大小，默认10，最大100

gitment:
  owner: yelog
  repo: yelog.github.io
  client_id:
  client_secret:
  # gitment : 通过github issue实现的评论系统
  # 开源地址 : https://github.com/imsun/gitment
  # 使用说明 :

livere:
  data_uid:
  # 来必力: http://livere.com/
  # 使用说明 : https://yelog.org//2020/05/23/3-hexo-comment/

utteranc:
  repo: xxx/xxx.github.io # 承载评论的仓库，填上自己新建的仓库
  issue_term: pathname    # Issue 与 博客文章 之间映射关系
  label: utteranc         # 创建的 Issue 添加的标签
  theme: github-light     # 主题，可选主题请查看官方文档 https://utteranc.es/#heading-theme
# 官方文档 https://utteranc.es/
# 使用说明 https://yelog.org//2020/05/23/3-hexo-comment/

##############################

##########CND设置#############
CDN:
  jquery: //cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js
  jquery_cookie: //cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js
  highlight: //cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js
  pjax: //cdn.jsdelivr.net/npm/jquery-pjax@2.0.1/jquery.pjax.min.js
  animate: //cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css
  nprogres_js: //cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js
  mathjax: //cdn.jsdelivr.net/npm/mathjax@2.7.8/unpacked/MathJax.js?config=TeX-MML-AM_CHTML
  photoswipe_js: //cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js
  photoswipe_ui_js: //cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js
  photoswipe_css: //cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css
  photoswipe_skin_css: //cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css
##############################

数学公式渲染支持: 采用 kramed 替代原有的 marked

支持数学公式, 主要是解决 markdown 渲染和 latex 渲染冲突的问题:

1.用 kramed 替代原有的 marked, 注意这里需要 cd 到目录下才能生效

cd ~/repos/hexo
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

2.替换 2 个语义冲突 inline.js 配置, 目测不替换的时候渲染花括号都会有问题

// escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,

//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

主要参考: https://blog.csdn.net/qq_44846324/article/details/114582328

文章里面按照这个模板写

---
title: 测试公式显示效果 
date: 2018-02-08 20:00:00
mathjax: true
categories:
- Coding 
---

特殊符号兼容性问题

1.英文冒号兼容
title 打英文冒号: 的会报错, 例如如下标题
TabTransformer：Tabular Data Modeling Using Contextual Embeddings
解决方法是: 将: 统一换成空格

2.公式中的_符号兼容
将 pairwise_loss 修改为 pairwise-loss, 这样可以在 vscode 中的 preview 模式兼容 Katex, 也能兼容 hexo 上面内置的解析工具

图片压缩

博客正式之前需要对图片进行密集压缩, 目的是提高加载速度, 最好缩小到 100kb 之下, 有些图片质量太高压缩到 250kb 以下
mac 下面可以用图压
ubuntu 下面用 https://imageresizer.com/

转载请注明来源, from goldandrabbit.github.io