0%

如何优化 Hexo(静态博客)

hexo

是 Hexo + NexT 让我重拾笔杆子,感谢开发者们和维护者们。

🤖YAML 教程

YAML 语言(/ˈjæməl/ )的基本规则:

  • 大小写敏感。
  • 使用缩进表示层级关系。
  • 缩进时不允许使用 Tab 键,只允许使用空格。
  • 缩进的空格数目不重要,只要相同层级的元素左侧对齐即可。
  • # 表示注释,从这个字符一直到行尾,都会被解析器忽略。

🔧优化 URL

默认的 URL 是 https://tingtalk.me/2019/08/17/Hexo使用技巧

  • 层级太深:斜杠太多不利于搜索引擎的抓取。
  • 包含中文:URL 只能使用英文、数字和连字符(hyphen)。如果包含中文,分享出现的链接可能是 https://tingtalk.me/2019/08/17/Hexo%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7,中文强制被转码成十六进制编码,又臭又长。

优化步骤如下:

  1. 修改 站点 _config.ymlpermalink(永久链接)为 :title/

    # URL
    permalink: :title/
  2. 在文章的 Front Matter 增加 permalink: 的定义

    ---

    title: Hexo Tips
    date: 2019-08-17
    categories: 博客
    permalink: hexo-tips

    ---

    让 Hexo 更优雅的小技巧。

    <!-- more -->

    ## Permalink

    - 不要用中文
    - 大写字母用小写字母代替
    - 删除所有特殊字符,只用连字符;连字符代替空格
    - 尽可能简短,删除 the、a、an、for、and、if 、or 等虚词
  3. 优化之后的 URL 是 https://tingtalk.me/hexo-tips,简短有力,清晰明了。

  4. 顺手把 Markdown 文档也命名为 hexo-tips.md

🔗关联阅读:Clean URL - Wikipedia

🔧优化分类

  1. 站点 _config.ymlcategory_map 增加一个 博客: blog 的分类

    ---

    category_map:
    教程: tutorials
    日志: diaries
    生活: life
    科学上网: bypass-gfw
    数字生活: digital-life
    排版: typography
    博客: blog
  2. 在文章 Front Mattercategories: 直接用中文分类名 博客,就可以映射到 https://tingtalk.me/categories/blog/

    ---

    title: Hexo Tips
    date: 2019-08-17
    categories: 博客
    permalink: hexo-tips

    ---

如果不在 category_map 定义 博客: blog,分享出去的链接就会是 https://tingtalk.me/categories/%E5%8D%9A%E5%AE%A2/,不雅观。

🐞半角标点

如何显示正确的英文半角标点符号,不被错误显示成中文全角标点符号,请在站点配置文件加上如下语句:

# Fix issue: halfwidth quotation marks rendered to fullwidth
## Reference: https://github.com/hexojs/hexo/issues/1981#issuecomment-229309844
marked:
smartypants: false

🔒文章加密

你可能需要写一些私密的博客,通过密码验证的方式让人不能随意浏览。为了解决这个问题, 让我们有请 hexo-blog-encrypt

但是解密速度好像差强人意,可能是因为我的电脑和手机性能不足的原因。

👉Netlify 重定向

在 hexo 分支 source 下新建 netlify.toml 文件:

[[redirects]]
from = "https://tingtalk.netlify.com/*"
to = "https://tingtalk.me/:splat"
status = 301
force = true

部署之后,tingtalk.netlify.com 即可重定向至 tingtalk.me,有利于 SEO。

🗺️站点地图

  1. 安装 hexo-generator-seo-friendly-sitemap
  2. Google Search Console 提交找点地图:https://tingtalk.me/`sitemap.xml`

hexo-generator-searchdb: Seach data generator plugin for Hexo.

📰RSS

hexo-generator-feed: Feed generator for Hexo.

🖼️把图片放在 _posts

hexo-asset-link: Convert base-relative asset links to root-relative ones, so that user can insert assets like images in markdown way.

教程:如何为 Hexo 博文加入图片

💚修改 NexT

🖼️图片居中

  1. hexo-site\source 新建一个名为 _data 的文件夹。
  2. hexo-site\themes/next/source/css/_schemes/Mist_posts-expand.styl 复制到 _data,并把名字修改为 styles.styl
  3. 打开 _datastyles.styl,修改以下代码:
    .post-body img {
    margin: 0 auto;
    }
  4. 打开主题配置文件 hexo-site\themes/next/_config.yml,取消对 styles.styl 的注释:
    custom_file_path:
    #head: source/_data/head.njk
    #header: source/_data/header.njk
    #sidebar: source/_data/sidebar.njk
    #postMeta: source/_data/post-meta.njk
    #postBodyEnd: source/_data/post-body-end.njk
    #footer: source/_data/footer.njk
    #bodyEnd: source/_data/body-end.njk
    #variable: source/_data/variables.styl
    #mixin: source/_data/mixins.styl
    style: source/_data/styles.styl

📖阅读时长

hexo-symbols-count-time: Symbols count and time to read of articles plugin for Hexo.

quicklink: Faster subsequent page-loads by prefetching in-viewport links during idle time

在 Front-matter 中写法是:

quicklink: enable

📡连接 GitHub

Win + S 打开搜索,输入 Git Bash,或者在电脑任意位置右键打开 Git Bash,然后根据 GitHub 账号,修改下面的命令并复制到 Git Bash,Enter:

git config --global user.name "ting-talk"
git config --global user.email "******@gmail.com"
ssh-keygen -t rsa -C "******@gmail.com"

出现:

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/***/.ssh/id_rsa):

Enter:

Created directory '/c/Users/***/.ssh'.
Enter passphrase (empty for no passphrase):

Enter:

Enter same passphrase again:

Enter:

Your identification has been saved in /c/Users/***/.ssh/id_rsa
Your public key has been saved in /c/Users/***/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:FehU/******gwvkE+kkm7******96CaYSoFo+****** ******@gmail.com
The key's randomart image is:
+---[RSA 3072]----+
| +o..+ |
| . .o..o* + .|
|.. o . ..+ *o.+ o|
|E.o + . S ooo |
|.o o . . .o o |
| . o.o.o |
| .. .oo |
+----[SHA256]-----+

登录 GitHub,依次点击右上角的头像 - Settings - SSH and GPG keys - New SSH key

Title 自定义即可。

Git Bash 输入:

cat ~/.ssh/id_rsa.pub

左键复制结果,粘贴在 Key 里,最后点击 Add SSH key

Git Bash 输入:

ssh -T git@github.com

Enter:

The authenticity of host 'github.com (13.229.188.59)' can't be established.
RSA key fingerprint is SHA256:nThbg6******WGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no/[fingerprint])?

输入 yes,Enter:

Warning: Permanently added 'github.com,13.229.188.59' (RSA) to the list of known hosts.
Hi ting-talk! You've successfully authenticated, but GitHub does not provide shell access.

如果有你的 GitHub 用户名(Hi ting-talk!),则代表与 GitHub 连接成功。

🚀推送到 GitHub

在博客文件夹,右键打开 Git Bash,复制以下命令(可能要删除主题的 .git):

git init
git add .
git commit -m "first commit"

Enter。

git remote add origin git@github.com:ting-talk/blog.git

推送:

git add .
git commit -m "first push"
git push origin master

🎸其他

🍊Gridea

一个静态博客写作客户端:适合喜欢安安静静写博客的人。

👨‍💻Easy Hexo

轻松入门 Hexo:适合喜欢折腾博客的人。

欢迎关注我的其它发布渠道