基于Hexo的博客

发表于 更新于 阅读次数： Changyan： 本文字数： 3.9k 阅读时长 ≈ 7 分钟

安装hexo框架

  1. 下载 node.js （如果有可以跳过）

  2. 安装 cnpm （全局安装，淘宝镜像源）

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

  3. 安装 hexo 

    1
    cnpm install -g hexo-cli

搭建blog

  1. 新建blog目录，进入该目录，之后操作全在该目录下！

  2. 初始化hexo

1
hexo init

  1. 关于hexo的一些操作 (四个步骤按顺序执行后即可在4000端口看到本地的效果)

    1
    2
    3
    4
    1/预览 hexo s
    2/新建 hexo n "标题"
    3/清理 hexo clean
    4/生成 hexo g
    • 坑：“标题”中有些特别的符号不能用，例如英文下的[]

部署到github

  1. 先去github新建仓库
  • 坑：仓库名必须是 自己的用户名.github.io

  1. blog目录下安装一个插件

    1
    cnpm install --save hexo-deployer-git

  2. 配置blog目录下的 _config.yml 文件

    在 #Deployment 下的 deploy:

    ​ type: ‘git’

    ​ repo: ‘自己的仓库地址不是网址’

    ​ branch: ‘master’

    • 坑：注意冒号后的英文空格

  3. 部署到远端

    1
    5/部署 hexo d

更换主题

  1. 先把主题下载到本地
1
2
git clone 主题的仓库地址 目录
#例如 git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
  1. 配置 _config.yml 文件

在 #Extensions 下

​ theme: butterfly

这里的butterfly及1.中的butterfly目录

  1. 在本地预览
1
2
3
hexo clean
hexo g
hexo s

  1. 部署到远端 （反应不一定很快）

    1
    hexo d

坑：如果更换主题遇到任何问题，请在blog目录下安装以下插件

1
2
npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive
npm install --save hexo-deployer-git

设置 SSH 使用 hexo deploy 时免输用户名密码

原文：https://www.jianshu.com/p/a7167e26b086

SSH 验证就是我们键入命令 hexo deploy 以后，当那些需要提交的内容显示完成过后会弹出的一个小窗口提示我们输入用户名、密码。此处我们设置ssh公钥，实现hexo deploy时免密登陆。

1. 生成 SSH 密钥

1
cd ~/.ssh

使用 ssh-keygen 生成密钥

1
ssh-keygen -t rsa -C "your_email@example.com"

后面的三次输入均可使用默认值，Enter回车跳过

密钥生成成功

1
2
3
4
Your identification has been saved in /home/you/.ssh/id_rsa.
Your public key has been saved in /home/you/.ssh/id_rsa.pub.
The key fingerprint is:
…………………此处是密钥内容…………………… your_email@example.com

2. 设置 Github 项目的 SSH keys

！如何设置自行搜索，很简单

接下来测试配置是否成功

1
ssh -T git@Gitee.com

如果出现以下内容即表示配置完成并且成功！

1
2
3
4
5
6
The authenticity of host 'gitee.com (xx.xx.xx.xx)' can't be established.
ECDSA key fingerprint is SHA256:FQGC9Kn/eye1W8icdBgrQp+KkGYoFgbVr17bmjey0Wc.
ECDSA key fingerprint is MD5:27:e5:d3:f7:2a:9e:eb:6c:93:cd:1f:c1:47:a3:54:b1.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'gitee.com,xx.xx.xx.xx' (ECDSA) to the list of known hosts.
Hi xxx! You've successfully authenticated, but GITEE.COM does not provide shell access.

3.修改博客Git远程提交地址

1
2
# 修改 https 协议为 ssh 协议(仓库的ssh地址)
git remote set-url origin git@gitee.com:xxx/xxx.git

4.修改hexo根目录下_config.yml中的远程仓库设置

1
2
3
4
5
6
7
8
# Deployment

## Docs: https://hexo.io/docs/deployment.html

deploy:
  type: git
  repo: git@gitee.com:xxx/xxx.git
  branch: master

最后部署到远程就可以了

注：如果使用的是码云作为远程仓库部署，还需要在对应仓库的服务中手动部署一下

Md格式文档写作

创建categories 、tags 选项

categories、tags 配置是通用的

  1. 生成categories page

    1
    hexo new page categories

  2. 找到生成的 /categories/index.md。添加 type: "categories"

  3. categories 赋予文章

    1
    2
    3
    4
    5
    6
    7
    8
    title: 
    data: 
    categories: 
       - 分类1
       - 分类2
    tags: 
       - 标签1
       - 标签2

hexo 特殊样式：note

1
2
3
4
5
6
{% note default %}default{% endnote %}
{% note primary %}primary{% endnote %}
{% note success %}success{% endnote %}
{% note info %}info{% endnote %}
{% note warning %}warning{% endnote %}
{% note danger %}danger{% endnote %}

hexo 特殊样式：tabs

1
2
3
4
5
6
7
8
9
10
11
{% tabs name %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

总结

遇到任何问题，要善于运用搜索引擎，网上相关解决方法很多。当然也欢迎留言、讨论，一起进步吧！

更新–日常使用遇到的BUG

这里我放一下常见的问题

  1. md图片相对路径

    一、不要用md的语法插入图片。而是用

    其中，asset_img 不动，imgurl就是图片名别漏了后缀，descript图片描述可省略。

    二、在/source/_posts/下建一个同名路径，图片放里面

  2. 添加评论功能

    文档错了那一大段代码不是markdown而是yml，也就是说YAML不需要写那些，而是在主题配置文件中搜索comments 找到如下部分。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    comments:
      # Up to two comments system, the first will be shown as default
      # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
      use:
      # - Valine
      # - Disqus
      text: true # Display the comment name next to the button
      # lazyload: The comment system will be load when comment element enters the browser's viewport.
      # If you set it to true, the comment count will be invalid
      lazyload: false
      count: false # Display comment count in top_img

    在use后面加入你选择的评论系统

  3. 添加搜索系统

    文档没有细说，需要自行百度，这些都很简单。记住一点，要改hexo框架的_config.yml文件，把url: 后面的网址改成你自己的网址。不然搜索到内容后点击会进错误的网址。

  4. 分享功能 sharejs

    其实这里没有bug，但是。举个例子，用qq方式分享。扫描二维码进入的是你当前页面的地址，是自动的。所以你在本地端口4000预览的时候测试分享功能手机是扫不出来的，因为手机进不了localhost:4000。你要去github部署的网站上测试该功能。注意一下。

  5. 首页文章只显示摘要（next主题）

    在正文md文档中，想要作为摘要的地方后用<!-- more -->分割