MMaoHomeArchivesTags思所读书关于相册GTD
搭建博客-给Hexo换皮肤

变更记录

序号 录入时间 备注
9 2023-03-28 完善SSH Key配置说明
8 2022-07-16 优化MarkDown格式
7 2019-07-07 优化hexo搜索和参考ref links.
6 2019-02-14 基于gollum的wiki搭建
5 2019-01-27 使用Cloudflare Free SSL解析
4 2019-01-26 完善博客图床url失效问题
3 2018-11-09 完善SSH Key配置
2 2018-02-28 整理博客配置问题，添加问题8
1 2017-03-05 新建文章

引言

一直看到大’婶’们在用 Hexo 搭建博客主题，看起来不错的样纸ヾ(o◕∀◕)ﾉ，再看看自己的博客╮(╯_╰)╭, 肿么总感觉气质上差的不是一点半点呢，对于爱装X的我来说这能忍？(￣ェ￣;)这事一直在我心里”酝酿”着,只由于平时实在太忙(lan).
直到这周末，一位童鞋想让我帮忙搭个博客，让俺这懒癌患者都不好推脱，顺便换一下主题吧。本以为熟悉后分分钟的事，然而，对 Git 和 SSH 还不很熟悉的我，为了换掉原来的配置的 SSH 账号，搞到凌晨3点，才把博客部署上去, 搞到后面都快睡着了（¯﹃¯），期间蛋疼不断，没有深入熟悉的事不敢再说简单<(_ _)>，在此记录一笔。

目录

“博客搭建史”
手残的我╮(╯▽╰)╭
填坑 SSH
绑定域名
进阶配置
配置问题
总结
参考

“博客搭建史”

我记得第一次玩博客是在15年底用 Jelly 的搞了一个，那时候看了N篇教程 = =，由于iOS都没学好，更别说什么 Git , Ruby 了，各种命令都不熟悉╮(╯_╰)╭，搭建后没怎么用，16年3月初，觉得人家的 Hexo 博客主题很好看，就选了个Jacman，搭好后随便写了几篇，没去用就是不熟悉啊。一年过去才领悟到，不断记录和总结是为了积累和沉淀，慢慢对博客重视起来。 Blog 其实不仅是给自己看，也是和别人的交流 platform , 需要不断去补充完善。

手残的我╮(╯▽╰)╭

既然要换Hexo主题, 以前喜欢那个iissnan简洁风，没想到1年不用都不会玩了啊(；ﾟ(OO)ﾟ)，这位童鞋在配置过程中小问题不断，后面直接断网了（￣工￣lll），好吧，正好让N久没写博客的我好好熟悉一下搭建过程。

填坑 SSH

本想弄个小号来搭建这个博客，一开始以为不用配置 SSH 密钥，写好上传的时候, 一直被服务端拒绝o( > < )o,
配置好 SSH 后, 马上遇到如何切换以前所配置的难题，在新博客的 config.yml设置 repo 仓库的时候，因为Git默认使用以前的账号配置的 SSH Key，就是无法提交到仓库。
比如在执行 hexo deploy 后,出现error deployer not found:git 的错误.
**处理**
输入代码：

1
npm install hexo-deployer-git --save

后面蛋疼的是一直卡着，不知道是在上传博客呢，还是卡主了。等待过程中昏昏欲睡，又怀疑配置是否出问题。总结就是感觉对 Git 和 Ruby 不熟悉的话，这个多账号切换搞屎人啊~ ╮(╯_╰)╭
一直搞到快3点了吧，感觉部署无望，川´･ω･`川 但还是不甘心，实在想尝试最后一次，搞完等了10分钟，终于传上去了，我是有多蛋疼 = = 。此时感觉Sooooooo relief~, 于是懒癌复发，细整之事，日后再说V(=^･ω･^=)v。

绑定域名

添加域名DNS解析，

  1. 先在 Github 的博客Repo上添加 CNAME 文件，里面就是你所要绑定的域名.

CNAME

把 CNAME 文件放在Hexo/Source文件夹里， Hexo d -g 提交一下就可以推送到git上了。

2.Dnspod 解析

在域名解析商Dnspod上新建一个域名，然后按照指示添加，对应的记录。2条泛解析的地址，和一个 CNAME 对应的记录。
Github上的2条地址分别是： 192.30.252.153 , 192.30.252.154 ,

Dnspod

  1. Manage your DNS
    这里需要在购买域名的网站（我是在狗爹Godaddy买的），进入域名管理，
    Godaddy

添加自定义DNS Management， 填写 Dnspods 上提供的2条地址，就是 F1G1NS1.DNSPOD.NET 和 F1G1NS2.DNSPOD.NET 。

NameServer

这样，没什么问题的话，一会儿刷新绑定域名地址，就可以正常显示了，≥！ヾ(o◕∀◕)ﾉ

进阶配置

使用 MWeb 发布 Hexo 博客

设置七牛的图床

然后打开 MWeb ， Cmd+E 切换到外部模式，把博客拖入到MWeb中，之后使用

hexo n "blog name" 来创建博客
hexo d -g 来发布提交博客，MWeb 将及时同步，写博客变得很方便 :]

优化
后期将使用云备份MWeb博客，优化图床，添加评论。（已完成）

—————————————————————————
———————— 2017-09-17 ——————————

七牛图床设置详细说明
MWeb Mac 版和 iOS 版图片及图床使用完全指南 - MWeb
想要自动上传的话，请编辑文档库，勾选“把插入的图片自动上传到图床”，不过作者不建议这样做，主要是万一图床挂了或者是什么问题，比较麻烦。这个方式只在外部模式中支持，文档库不支持。不过保证图传没问题的话，很方便。

—————————————————————————

———————— 2017-05-03 ——————————

头像设置 avatar

编辑站点配置文件，新增字段 avatar， 值设置成头像的链接地址。
avatar: http://i5.tietuku.com/0d972d2b106fc7ea.jpg

网站 favico 设置

通过网站favicon在线制作制作favicon图片，logo最好设置32*32。
next主题：将图片放在next主题source/images目录下
在next主题配置文件中添加：favicon: images/favicon.ico

参考hexo之next主题优化整理
—————————————————

———————— 2017-05-10 ——————————

添加点击爱心

鼠标点击小爱心设置

将 love.js 文件添加到 themes/next/source/js/src 文件目录下。
在themes/next/layout/_layout.swing文件的 </body>标签之前添加以下代码：
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
有趣的是，小爱心的颜色是随机的哟(=・ω・=)

添加评论

我使用的是Hypercomments，Next最新已经集成了hypercomments ,只需要在next的themes的 _config.yml 文件中打开 hypercomments_id 并填写id即可。

添加打赏

开启打赏功能 由 habren 贡献

越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，特此增加了打赏功能，支持微信打赏和支付宝打赏。 只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。

1
2
3
4
打赏功能配置示例
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

访客统计

  1. leancloud
  2. 使用leancloud给博客添加阅读次数

在next的themes的 _config.yml 文件中打开 leancloud_visitors ，enable为true,填写leancloud的 app_id 和 app_key

语言配置

修改语言配置文件
添加visitors字段，英文在themes\next\languages\en.yml，中文在themes\next\languages\zh-Hans.yml

1
2
3
4
5
6
7
post:
  posted: 发表于
  visitors: 阅读次数
  updated: 更新于
  in: 分类于
  read_more: 阅读全文
  untitled: 未命名

然后想修改一下样式，在post.swig文件中加个符号🤦‍♀️

设置安全域名

应用->设置->安全中心->Web安全域名中设置自己博客的域名

访客统计

busuanzi_count
打开 busuanzi_count ，本人使用 leancloud 统计每篇文章的访问次数，所以这里只打开 site_uv 来统计站点人访问数。site_pv代表站点总访问次数。

搜索服务Search

Local Search

安装 hexo-generator-searchdb ，在站点的根目录下执行以下命令：

$ npm install hexo-generator-searchdb --save

  1. 编辑站点配置文件，新增以下内容到任意位置：
1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  1. 编辑主题配置文件，启用本地搜索功能：
    local_search:
    enable: true
1
2
3
4
5
6
7
8
9
10
11
# Algolia search
# ---------------
algolia_search:
  enable: false
  # enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
    hits_stats: "${hits} results found in ${time} ms"

Local search

Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/third-party-support?id=local-search

1
2
3
4
5
local_search:
  enable: false
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"  if there are no result

配置 SSH Key

  1. 查看已添加的 ssh key 列表 2017-05-10

How to list keys added to ssh-agent with ssh-add?

Use the -l option to ssh-add to list them by fingerprint.

1
2
3
$ ssh-add -l
2048 72:...:eb /home/gert/.ssh/mykey (RSA)
Or with -L to get the full key in OpenSSH format.
1
2
3
$ ssh-add -L
ssh-rsa AAAAB3NzaC1yc[...]B63SQ== /home/gert/.ssh/id_rsa
The latter format is the same as you would put them in a ~/.ssh/authorized_keys file.

2.How to remove a ssh key

ssh-add -d

ssh-add -D

ssh-add -d/-D deletes only manually added keys from gnome-keyring.
There is no way to delete automatically added keys.
This is the original bug, and it’s still definitely present.

So, for example, if you have two different automatically-loaded ssh identities associated with two different GitHub accounts – say for work and for home – there’s no way to switch between them. GitHubtakes the first one which matches, so you always appear as your ‘home’ user to GitHub, with no way to upload things to work projects.

Allowing ssh-add -d to apply to automatically-loaded keys (and ssh-add -t X to change the lifetime of automatically-loaded keys), would restore the behavior most users expect.
More precisely, about the issue:

You’ll still get an ssh-agent, only now it will behave sanely: no keys autoloaded, you run ssh-add to add them, and if you want to delete keys, you can. Imagine that.
This comments actually suggests:

The solution is to keep gnome-keyring-manager from ever starting up, which was strangely difficult by finally achieved by removing the program file’s execute permission.

  1. 查看已添加的 ssh key 列表 2017-05-10

Use the -l option to ssh-add to list them by fingerprint.

1
2
3
$ ssh-add -l
2048 72:...:eb /home/gert/.ssh/mykey (RSA)
Or with -L to get the full key in OpenSSH format.
1
2
3
$ ssh-add -L
ssh-rsa AAAAB3NzaC1yc[...]B63SQ== /home/gert/.ssh/id_rsa
The latter format is the same as you would put them in a ~/.ssh/authorized_keys file.

ssh删除

ssh-add -d
ssh-add -D

ssh-add -d/-D deletes only manually added keys from gnome-keyring.
There is no way to delete automatically added keys.
This is the original bug, and it’s still definitely present.

So, for example, if you have two different automatically-loaded ssh identities associated with two different GitHub accounts – say for work and for home – there’s no way to switch between them. GitHubtakes the first one which matches, so you always appear as your ‘home’ user to GitHub, with no way to upload things to work projects.

Allowing ssh-add -d to apply to automatically-loaded keys (and ssh-add -t X to change the lifetime of automatically-loaded keys), would restore the behavior most users expect.
More precisely, about the issue:

You’ll still get an ssh-agent, only now it will behave sanely: no keys autoloaded, you run ssh-add to add them, and if you want to delete keys, you can. Imagine that.
This comments actually suggests:

The solution is to keep gnome-keyring-manager from ever starting up, which was strangely difficult by finally achieved by removing the program file’s execute permission.
解决的办法是让GNOME Keyring经理不会启动，这是由最后通过删除程序文件的执行权限异常困难。

查看 SSH Key

  1. 查看当前指定的 ssh key
    使用 $ ssh -T git@github.com 测试当前账号
    查看全部已经添加的 ssh
    $ ssh-add -l
    $ ssh-add -L

  2. 创建新的 ssh key

粘贴下面的文本（替换为您的 GitHub 电子邮件地址）。

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

Generating public/private rsa key pair.
When you’re prompted to “Enter a file in which to save the key,” press Enter. This accepts the default file location.
Generating a new SSH key and adding it to the ssh-agent
Enter a file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]
At the prompt, type a secure passphrase. For more information, see “Working with SSH key passphrases”.
Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

  1. 添加 ssh

3.1 到 Github 的ssh上添加公钥

1
$ ssh-add -K ~/.ssh/id_rsa (id_rsa对应账户的私钥)

3.2 检查当前配置的SSH对应的git账号： ssh -T git@github.com

如果出现提示配置成功：
Hi FrizzleFur! You've successfully authenticated, but GitHub does not provide shell access.

3.3 检查当库的远程分支 origin master

1
2
3
4
5
6
 git remote -v
origin https://MichaelMaoMao@bitbucket.org/MichaelMaoMao/frizzlefurblog.git (fetch)
origin https://MichaelMaoMao@bitbucket.org/MichaelMaoMao/frizzlefurblog.git (push)
查看全部已经添加的ssh
$ ssh-add -l
$ ssh-add -L

检查key的config配置

检查github账号的ssh key是否对应

添加SSH key(私钥)
ssh-add SSHPrivateKeyName
添加对应的rsa文件 ssh-add ~/.ssh/id_rsa_public15

删除SSH key（公钥）
ssh-add SSHPublicKeyName
删除对应的rsa文件 ssh-add -d ~/.ssh/id_rsa_15.pub

使用ssh -T git@github.com测试当前账号
问题：准备push的时候，账户密码报错

1
2
3
4
5
6
7
8
9
git push origin master
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/michaelMaoMao/MMPieChart.git/'
解决，
Git push results in “Authentication Failed”
HTTPS cloning errors
git remote -v
git remote remove origin
git remote add origin git@github.com:user/repo.git

添加TokenCreating a personal access token for the command line

图片链接地址优化

解决博客图片存储——阿里云的OSS运用 - 2017年最新基于hexo搭建个人免费博客 - SegmentFault 思否

其实这个也没什么，但是一些图片的外链和title好像是会提高搜索引擎的蜘蛛爬取。
比如在用MD写文章的时候引入图片的title最好这样

阿里云-OSS运用
细心的人可能会发现我的图片地址很简洁，这样就会让百度和其他搜索引擎的蜘蛛更快的来爬去你的图片进而检录上去。

更换主题Melody

PWA支持

Additional-package support - Document

Hexo 博客美化、SEO优化、Travis CI 自动化持续集成构建 | upupming 的博客

favicon

Realfavicongenerator

HTTPS

免费的SSL: 到FreeSSL首页 - FreeSSL.org 一个申请免费HTTPS证书的网站申请对应域名的SSL证书，需要在DNS解析地方（DNSPod）上添加对应CNAME的记录，并部署
详情见ACME v2证书自动化快速入门

部署

如何在 FreeSSL.org 申请免费 SSL 证书 | 九天博客

博客备份

其实，Hexo生成的文件里面是有一个.gitignore的，所以它的本意应该也是想我们把这些文件放到GitHub上存放的。但是考虑到如果每个GitHub Pages都需要额外的一个仓库存放这些文件，就显得特别冗余了。这个时候就可以用分支的思路！一个分支用来存放Hexo生成的网站原始的文件，另一个分支用来存放生成的静态网页。

使用hexo，如果换了电脑怎么更新博客？ - 知乎

一、关于搭建的流程

1. 创建仓库，http://CrazyMilk.github.io；
2. 创建两个分支：master 与 hexo；
3. 设置hexo为默认分支（因为我们只需要手动管理这个分支上的Hexo网站文件）；
4. 使用git clone git@github.com:CrazyMilk/CrazyMilk.github.io.git拷贝仓库；
5. 在本地http://CrazyMilk.github.io文件夹下通过Git bash依次执行npm install hexo、hexo init、npm install 和 npm install hexo-deployer-git（此时当前分支应显示为hexo）;
6. 修改_config.yml中的deploy参数，分支应为master；
7. 依次执行git add .、git commit -m “…”、git push origin hexo提交网站相关的文件；
8. 执行hexo g -d生成网站并部署到GitHub上。

这样一来，在GitHub上的http://CrazyMilk.github.io仓库就有两个分支，一个hexo分支用来存放网站的原始文件，一个master分支用来存放生成的静态网页。完美( •̀ ω •́ )y！

二、关于日常的改动流程
在本地对博客进行修改（添加新博文、修改样式等等）后，通过下面的流程进行管理。

1. 依次执行git add .、git commit -m “…”、git push origin hexo指令将改动推送到GitHub（此时当前分支应为hexo）；
2. 然后才执行hexo g -d发布网站到master分支上。

虽然两个过程顺序调转一般不会有问题，不过逻辑上这样的顺序是绝对没问题的（例如突然死机要重装了，悲催….的情况，调转顺序就有问题了）。

三、本地资料丢失后的流程
当重装电脑之后，或者想在其他电脑上修改博客，可以使用下列步骤：

1. 使用git clone git@github.com:CrazyMilk/CrazyMilk.github.io.git拷贝仓库（默认分支为hexo）；
2. 在本地新拷贝的http://CrazyMilk.github.io文件夹下通过Git bash依次执行下列指令：npm install hexo、npm install、npm install hexo-deployer-git（记得，不需要hexo init这条指令）。

配置问题

具体问题详情请转到建站日志 | FFur

1. 多个 SSH Key 的切换问题

2. 多个Git账号切换问题 2018-11-09

默认的ssh key为id_rsa， 如果有多个ssh key，会有多个命名，需要在ssh的config文件中制定ssh key的HostName

config文件地址　~/.ssh/config

3. 解决Hexo的 Tags 显示问题 2017-04-26

4. Cannot find module 'bluebird' 2017-05-03

5. Error: Cannot find module 'hexo-util 2017-05-03

6. ERROR Deployer not found: git 2017-05-10

7. ERROR Plugin load failed: hexo-deployer-git 2017-07-09

8. 解决Hexo命令fs.SyncWriteStream问题 2018-02-28

9.本地资料丢失后的流程当重装电脑之后，或者想在其他电脑上修改博客，可以使用下列步骤：2019-01-26

  1. 使用git clone git@github.com:UserName/UserName.github.io.git拷贝仓库（默认分支为hexo）；
  2. 在本地新拷贝的http://UserName.github.io文件夹下通过Git bash依次执行下列指令：npm install hexo、npm install、npm install hexo-deployer-git（记得，不需要hexo init这条指令）。

10. 七牛图片失效

解决：七牛云测试域名失效导致图片外链失效的解决办法 - chensonglu的博客 - CSDN博客
因为域名备案很麻烦，就想将原先的图换到别的图床上。

  • 先将图床的bucket图片下载到本地，更换图床。
  1. 下载qrsctl命令行辅助工具(qrsctl)_工具_对象存储 - 七牛开发者中心，chmod +x qrsctl赋予可执行权限。
  2. 输入自己七牛云的账号和密码登录
1
2
## ./qrstcl 表示qrstcl的文件路径
./qrstcl login <your username> <your password>

  1. 查看图床,由于我之前所有图片是在七牛云对象存储中的bucket中，运行如下代码查看目前我建立的所有bucket。

    1
    2
    ## ./qrstcl 表示qrstcl的文件路径
    ./qrsctl listprefix bucketName ''

  2. cd到桌面新建一个文件夹，比如：QiniuPics, 然后新建一个下载脚本qiniuPics.sh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#!/bin/bash

imgs=`./qrsctl listprefix bucketName ''`

i=0
echo $imgs | tr " " "\n" | while read line
do
    if(($i>0))
    then
        echo $line
        ./qrsctl get bucketName $line ./$line
    fi
    i=$(($i+1))
done
  1. 执行脚本下载
1
sh qiniuPics.sh
  1. 下载单图

得到图片名后，可以通过七牛云的如下接口下载一张图片。
比如./qrsctl get picture 1.jpg ./i.jpg可以将picture中的1.jpg下载到本地机器当前路径下的1.jpg

1
qrsctl get <Bucket> <Key> <DestFile>
  1. 将上述几步综合起来批量下载到本地，如下代码按图片原名下载到本地当前路径下。

11. social icon问题

更换Melody主题后，发现social icon出现显示问题：

参考：

TODO

总结

上次匆忙配置，由于没有很熟悉 hexo 和 node.js 的使用,这次遇到的几个问题基本“靠猜”了(シ_ )シ.
发现有些报错问题在之前就遇到过，看来当初木有很好的总结。（一年没弄，真的手生了啊 = =）
以前开发的东西，我基本搞完就丢一边的，可怕的习惯(--)ゞ゛有些关键的步骤和常见的问题需要记录，再也不想给自己挖坑了(>_<)
平时总有些遇到的点和想做的事，常常存在脑海里，然而结果上来看，实践出来的东西更实在吧。

参考

文章作者: MichaelMao
文章链接: http://frizzlefur.com/2017/03/05/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2-%E7%BB%99Hexo%E6%8D%A2%E7%9A%AE%E8%82%A4/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 MMao！
Hexo
我要吐槽下