博客设置-CSDN博客

搭建

Hexo + GitHub Pages

Hexo 文档快速、简洁且高效博客框架。基于Node.js。Hexo用Markdown（或其它渲染引擎）解析文章，几秒内可用靓丽主题生成静态网页。
GitHub Pages 为个人和项目提供网站。展示HTML（有服务器可上传自己服务器）

主题菜单

设置

_config.yml（E:\Blog\themes\next中）
_zh-Hans.yml（E:\Blog\themes\next\languages中）

效果

问题

红框中应为中文关于而非英文bout

原因

黄框译文

键是菜单项名称，区分大小写。语言文件中找到该菜单译文则加载译文；无则用键名。
复制代码

绿框中bout与about不对应导致语言文件中找不到该菜单译文，从而显示键名bout而非关于。

解决

改绿框中bout为about

阅读全文

步骤

需隐藏内容前添
hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s

效果

前言

Hexo评论页官方推荐disqus，无奈被墙。这里用第三方实现，对比：

disqus 较大牌评论系统，服务稳定，但被墙无法用。
多说国内较出名评论系统，已关服务暂不考虑。
gitment 基于github issue评论系统，风格很像github。但目前不太稳定且界面无法定制，可能同博客不协调且评论需github账号。
livere 中文名来必力，韩国评论系统：
- 支持多格式评论导入、多json格式、https，方便导入之前其它平台评论数据。
- 简洁UI提供多种主题。
- 国外东西不受国内限制。

步骤

官网注册
点安装
获data-uid
NEXT主题本身已集成livere评论，只不过被注释掉了。主题配置文件 _config.yml（E:\Blog\themes\next中）中找到如下片段：

改为
hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s

效果

关闭

注释掉即可

音乐

步骤

npm install --save hexo-tag-aplayer装插件aplayer（音频）Plugins
npm install hexo-tag-dplayer --save装插件dplayer（视频）Plugins

文章任意地方插入如下代码，去掉注释，否无效

{% aplayerlist %}
{
    "narrow": false,              //（可选）播放器袖珍风格
    "autoplay": true,             //（可选）自动播放，移动端浏览器暂不支持此功能
    "mode": "random",             //（可选）曲目循环类型，有'random'（随机），'single'(单曲)，'circulation'(循环)，'order'(列表)，默认'circulation' 
    "showlrc": 3,                 //（可选）歌词显示配置项，可选项1、2、3
    "mutex": true,                //（可选）该选项开启时，同页有其它aplayer播放则该播放器暂停
    "theme": "#e6d0b2",	          //（可选）播放器风格色彩设置，默#b7daff
    "preload": "metadata",        //（可选）音乐文件预载入模式，可选项'none'、'metadata'、'auto'，默'auto'
    "listmaxheight": "513px",     //（可选）该播放列表最大长度
    "music": [
		{                                                           
	        "title": "Sometimes When We Touch",                                        
	        "author": "Oliveia",                                             
	        "url": "https://molier-1256056152.cos.ap-guangzhou.myqcloud.com/SometimesWhenWeTouch.mp3",  
	        "pic": "https://y.gtimg.cn/music/photo_new/T002R300x300M000003LIDEL0NQInJ.jpg?max_age=2592000", 
	        "lrc": "https://歌词.lrc"                  
    	}
    ]
}
{% endaplayerlist %}
复制代码

pic即歌曲显示图片链接。建议歌词lrc用URL形式，txt格式编辑易出问题。歌曲下载后上传七牛云可在七牛云生成外链，七牛云有免费存储空间。但七牛云歌曲外链不支持https致配有ssl证书的掉绿锁，对该问题可弃七牛云，改腾讯云。

hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s

效果

HTTPS

前言

谷歌浏览器或Safari提示网站不被信任，点继续才可展示博客且地址栏显红色×。在此改博客协议为Https。

购买证书
免费CA证书。腾讯云、阿里云都提供。但需备案且有时间限制。
CDN反向代理

因GitHub Pages不支持上传证书，故这里主介绍在国外CDN服务提供商Cloudflare基础上，通过CDN配置反向代理。

原理

Cloudflare提供DNS解析服务且速度很快，阿里云半小时解析生效在此瞬间生效。它提供免费https服务（非应用SSL证书）。实现模式即用户到CDN服务器连接为https，而CDN服务器到Github Pages服务器连接为http，即在CDN服务器处加反向代理。

小锁为用户连接到Cloudflare证书，Cloudflare到GitHub Pages无https，但对静态博客已足够。

配置

官网注册后添域名（购买）

免费或付费
点DNS进解析界面

前两个是域名指向GitHub服务器IP（GitHub文档给出），最后是域名指向所建仓库名。严格按此配置。
```
  红框中开启云朵，否接下来无法正确配置
复制代码
```

用cloudflare给出DNS解析服务器替换域名购买处DNS解析服务器并删域名购买处解析记录。此后用clouleflare解析DNS。

替换

忽略警告
点crypto，选Full或Flexible

选项区别

最后选项需证书支持。下滑页面开启Always use HTTPS
上述步骤配置好基本完成。为防止地址栏输入http://XXX进入博客出现非Https效果，故如图红框中设置，强制跳转。

效果

后台

不足

上述骤操作完虽https且无红叉，但不显绿色小锁而是叹号。原因为当前页有非https链接导致，如图片图床或评论插件不支持https，更换支持https图床或评论插件即可。

文章阅读量

步骤

登录LeanCloud后进控制台，创建新应用。点存储，新建Class（名须Counter）。
查App ID和App Key
改主题配置文件 _config.yml（E:\Blog\themes\next中）

改后
安全域名
hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s

效果

后台

分类

创建

hexo new page categories新建categories页
编辑新建页，改title为分类并设页面类型categories，主题自动为该页显示所有分类
```
title: 分类
date: 2018-03-14 18:21:16
type: "categories"
复制代码
```

启用多说或Disqus评论，默认页面也会带评论。关闭则添字段comments并设false title: 分类 date: 2018-03-14 18:21:16 type: "categories" comments: false

菜单添链接。编辑主题配置文件 _config.yml（E:\Blog\themes\next中），开启menu中categories: /categories/ || th：

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
复制代码

关联

文章添分类
hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s

效果

多终端同步

背景

Hexo是静态博客，所有页面都静态方式通过本地文件渲染后部署，这即引发多终端部署。如公司电脑配置好回家写作，但家中什么都没，仍需重配环境。关键两终端内容不同导致服务器数据被最后一次部署覆盖，从而前几次数据丢失。
git服务器仅有public是不够的，需整个博客文件夹所有文件才能进行多终端操作。

思路

Hexo流程即git工作流程，不论GitHub还是BitBucket都遵循GitFlow。GitFlow即多终端多人协同工作解决方案，故用它实现多终端同步。

文件结构

.
├── .deploy #需部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其它源文件，404、favicon、CNAME都应放这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json
复制代码

Hexo流程

hexo g source文件夹存放文章、tag、归档等信息，即博客内容。终端执行hexo g时被source中文件按某种规则方式渲染成静态页面文件放到public中：
hexo d 将public中文件push到git仓库
hexo clean 同gitflow无关，清理缓存。运行前首先删除public文件，然后执行hexo g重新渲染进public，之后hexo d进行部署。这样即避免之前内容对我们造成影响。

方式

网盘备份

优点免费且操作简单
不足
- 备份后同步较麻烦，每次另一台电脑都需手动下载备份文件并覆盖。
- 开启云端自动备份，写博客过程保存文件则触发百度云上传，上传过程产生xxx.cfg文件导致Hexo解析失败，从而hexo s生成的本地服务器进程停止，不便边写边预览。

Git

优点部署完更新方便，Hexo更新后只需再更新全站到git即可
不足
- 部署较复杂
- 国内外现知名git服务提供商主要有：github（私有库收费）、gitcafe（私有库收费）、bitbucket（私有库免费）、oschina（私有库免费）、coding（私有库免费）等。

步骤

A电脑

.gitignore文件末尾添/.deploy_git，/public，一个一行
- .gitignore文件作用是声明不被git记录文件。blog根目录下.gitignore是hexo初始化生成，可先删除或直接编辑，对hexo无影响。建议.gitignore添以下内容：
```
/.deploy_git 
/public
复制代码
```
  - .deploy_git是hexo默认.git配置文件夹，不需同步
  - public内文件根据source文件夹内容自动生成，不需备份，不然每次改动内容太多
- 有些插件或主题从git克隆，每文件夹下都有对应.git文件夹，先删掉，否则和blog仓库冲突导致上传失败。
- .git默认隐藏文件夹，需先开启显示隐藏文件夹。.git文件夹被删后整个文件对应git仓库状态也被清空。
博客文件根目录下右击鼠标选Git Bash Here
git init初始化本地仓库

无初始化执行下步提示
git remote add origin git@github.com:xxx/xxx.github.io.git
- origin是本地分支
- remote add映射本地仓库到云端
git add .添加所有本地文件到git

添加blog目录所有文件，注意.（不包含.gitignore声明文件）
git commit -m "更新说明"git提交
git branch hexo新建分支hexo
git checkout hexo切换分支为hexo
git push origin hexo推送到远程仓库hexo分支

GitHub变化

hexo分支

分支提交

B电脑

假设B电脑无源文件

安装git、Node.js、Hexo
git clone -b git@github.com:xxx/xxx.github.io.git hexo克隆hexo分支到本地
npm install安装依赖，不再初始化（hexo init）
git init
git remote add origin git@github.com:xxx/xxx.github.io.git
- origin是本地分支
- remote add映射本地仓库到云端
git fetch --all
git reset --hard origin/master

操作

于一文件夹下右击鼠标选Git Bash Here
git init初始化本地仓库

无初始化执行下步提示
git pull git@github.com:xxx/xxx.github.io.git hexo拉取远程仓库hexo分支
hexo new post “xxx”创建博客
编辑博客
git add source添加source文件夹到本地git（仅source文件夹变动）
git提交（git commit -m "多终端同步更新博客"）
git push origin hexo推送到远程仓库hexo分支
hexo g -d或hexo g->hexo d -g->hexo s或hexo clean->hexo g->hexo d -g->hexo s部署

示例

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ git pull git@github.com:snpmyn/snpmyn.github.io.git hexo
From github.com:snpmyn/snpmyn.github.io
 * branch            hexo       -> FETCH_HEAD
Already up to date.

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ git add source
warning: LF will be replaced by CRLF in source/_posts/博客搭建.md.
The file will have its original line endings in your working directory.

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ git commit -m "fifth"
[hexo 305cf46] fifth
 1 file changed, 34 insertions(+)

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ git push origin hexo
Username for 'https://github.com': snpmyn
muyang541527remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/snpmyn/snpmyn.github.io.git/'

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ muyang541527
bash: muyang541527: command not found

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ git push origin hexo
Username for 'https://github.com': snpmyn
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (5/5), 1.02 KiB | 1.02 MiB/s, done.
Total 5 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/snpmyn/snpmyn.github.io.git
   da365d3..305cf46  hexo -> hexo

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ hexo clean
INFO  Deleted database.
INFO  Deleted public folder.

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ hexo g -d
INFO  Start processing
WARN  ===============================================================
WARN  ========================= ATTENTION! ==========================
WARN  ===============================================================
WARN   NexT repository is moving here: https://github.com/theme-next
WARN  ===============================================================
WARN   It's rebase to v6.0.0 and future maintenance will resume there
WARN  ===============================================================
INFO  Files loaded in 5.59 s
INFO  Generated: CNAME
INFO  Generated: index.html
INFO  Generated: categories/index.html
INFO  Generated: archives/index.html
INFO  Generated: images/cc-by-nc.svg
INFO  Generated: images/quote-l.svg
INFO  Generated: archives/2018/03/index.html
INFO  Generated: images/cc-by-sa.svg
INFO  Generated: archives/2018/index.html
INFO  Generated: categories/工具/index.html
warning: LF will be replaced by CRLF in 2018/03/06/博客搭建/index.html.
The file will have its original line endings in your working directory.
[master d519607] Site updated: 2018-03-16 09:47:01
 2 files changed, 11 insertions(+), 7 deletions(-)
Branch 'master' set up to track remote branch 'master' from 'git@github.com:snpmyn/snpmyn.github.io.git'.
To github.com:snpmyn/snpmyn.github.io.git
   cb58169..d519607  HEAD -> master
INFO  Deploy done: git

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$ hexo s
INFO  Start processing
WARN  ===============================================================
WARN  ========================= ATTENTION! ==========================
WARN  ===============================================================
WARN   NexT repository is moving here: https://github.com/theme-next
WARN  ===============================================================
WARN   It's rebase to v6.0.0 and future maintenance will resume there
WARN  ===============================================================
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
INFO  Bye!

Administrator@LKKJ0004 MINGW64 /e/Blog (hexo)
$
复制代码

GitHub变化

分支提交

SEO

SEO（Search Engine Optimization）译为搜索引擎优化，即利用搜索引擎搜索规则提高目前网站在有关搜索引擎内自然排名。常见如网站结构调整、网站内容建设、网站代码优化及站外优化。

查看

搜索引擎输入site:<域名>，如下则表明网站没被百度收录。

步骤

网站所有权验证

登录百度站长平台，站点管理中点添加网站，输站点地址。建议输入www开头地址，不要输入username.github.io，因github不许百度spider爬取github内容。站点被百度收录，只能用自己购买域名。
选完网站类型后验证网站所有权，三种验证方式：
- 文件验证文件需存放source文件夹
- html标签验证 hexo会编译html文件。加layout:false，即可不被hexo编译。（验证文件txt格式不需要）
- cname解析验证最简单，只需加一条解析。记录类型CNAME，主机记录token，记录值ziyun.baidu.com。
验证结果

站点地图

用npm自动生成sitemap（站点地图）后提交sitemap到百度和其它搜索引擎。

安装sitemap插件

命令

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save
复制代码

操作
变化

根目录配置文件 _config.yml（E:\Blog中）改url为站点地址

根目录配置文件 _config.yml（E:\Blog中）添如下代码

# 自动生成sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
复制代码

写法正确
- 提示
错误
- 提示

hexo g执行构建，正常情况E:\Blog\public下多出两文件
- sitemap.xml 通用
- baidusitemap.xml 百度专用
提交方式
- 手动提交一次性提交链接给百度
- 自动提交
  - 主动推送（实时）
    - 及时发现可缩短百度爬虫发现您站点新链接时间，新发布页面可在第一时间被百度收录。
    - 保护原创对网站最新原创内容，主动推送功能可快速通知到百度，内容可在转发前被百度发现。主动推送提供4种提交方式，curl、post、php、ruby。
  - 自动推送最便捷提交方式，将自动推送的JS代码部署在站点每一个页面源代码中，部署代码的页面在每次被浏览时，链接会被自动推送给百度。可与主动推送配合使用。
  - sitemap 可定期将网站链接放到sitemap中，然后将sitemap提交给百度。百度会周期性抓取检查您提交的sitemap，处理其中链接进行，收录速度慢于主动推送。

一般主动提交比手动提交效果好，从效率上讲：

主动推送>自动推送>sitemap
复制代码

主动推送

npm install hexo-baidu-url-submit --save安装插件
根目录配置文件 _config.yml（E:\Blog中）新增字段baidu_url_submit
- 字段中token获取点链接提交
根目录配置文件 _config.yml（E:\Blog中）加入新deploye
hexo g -d或hexo g->hexo d -g或hexo clean->hexo g->hexo d -g提交并推送
变化 E:\Blog\public中生成baidu_urls文件
错误

或

主动推送常见问题
分析下图中域名与第一步网站所有权验证添加域名不对照
解决从第一步网站所有权验证重复操作，添加网站改www.muyang.site为muyang.site。
结果

自动推送

主题配置文件 _config.yml（E:\Blog\themes\next中）设baidu_push为true：

设后即将位于themes\next\layout_scripts\baidu_push.swig代码自动推送到百度。这样每次访问博客中页面即自动向百度提交sitemap。

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
复制代码