搭建
- 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
百度专用
- sitemap.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获取
点链接提交
- 字段中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:<域名>
或域名
,如下表明网站已经被百度收录。
其它
上图中错未解决,可重新搭建博客。