博客设置

snp
1,107 阅读14分钟

搭建

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

阅读全文

步骤

  • 需隐藏内容前添<!--more-->
  • 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 new page tags新建tags页
  • 编辑新建页，改title为标签并设页面类型tags，主题自动为该页显示所有分类
    title: 标签
date: 2018-03-16 10:32:43
type: "tags"

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

  • 菜单添链接。编辑主题配置文件 _config.yml（E:\Blog\themes\next中），开启menu中tags: /tags/ || tags：
    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>

sitemap

提交sitemap文件到百度

统计

两天后登录百度站长平台，提示如下

上图无需理会，点取消关闭
上图是链接提交统计图

收录

一周后搜索引擎输入site:<域名>或域名，如下表明网站已经被百度收录。

其它

上图中错未解决，可重新搭建博客。

avatar
文章
阅读
粉丝