一直想把博客重新搞一搞,之前用得是next主题的,不是很好看,后来又为了学习nodejs及阿里云服务器相关知识,自己用
express + mongoDB
搞了一个小站点,内容平台用react + koa2 + mongoDB
,但随着阿里云 服务器快要过期了,也懒得折腾了,遂又想到了hexo
,并且找了一个很简洁漂亮的主题-Icarus
,经过一番修改就有了现在的站点,该站点完全静态托管于 github
hexo 博客的搭建
- 直接参照官网即可 地址
- github上创建一个和
[username].github.io
的repo,master 上放hexo deploy
的代码,我又创建了一个blog
分支,用于存放博客源码
自定义主题选择
对比了好多主题最终觉得这个主题比较简洁大方 - Icarus
使用时对该主题样式魔改了好多 魔改后的代码地址-themes/icarus
想替换提供基础资源的cdn呢,发现该主题只能替换cdn域名,后面的参数都是硬编码的,故未替换
统计网站
uv、pv
用的主题自带的 不蒜子,只要将_config.yml
里面的busuanzi: true
,发现一个问题当用手机访问时,连续刷新会造成uv
统计不准确,还没找到原因评论插件用的主题自带的
gitment
,需要配置一下参数gitment 配置 1
2
3
4
5
6
7
8
9
10comment:
# Name of the comment plugin
type: gitment
owner: hugeorange # 账户名称
repo: hugeorange.github.io # 评论存储的仓库,评论数据存储到该仓库内的issue里
client_id: [your client_id] # 一下两个密码需要在github里注册OAuth Application
client_secret: [your client_secret]
注册地址:https://github.com/settings/applications/new
注册关键字说明:https://imsun.net/posts/gitment-introduction/- 使用过程中发现一个问题,当当前文章没有评论数据,会返回一个
Error: Comments Not Initialized
,或者显示一个Initialize Comments
的按钮,翻了一下该项目的issue暂时未找到原因 - 另外在
火狐 safari
会报跨域问题已拦截跨源请求:同源策略禁止读取位于 https://gh-oauth.imsun.net/ 的远程资源。(原因:CORS 请求未能成功)。[详细了解]
,chrome
是好的, 因为 github 的服务不允许跨域访问,所以作者搞了一个简单的代理服务,目前还不清楚是什么问题,gh-oauth.imsun.net代理服务 10-08 日更新:
今天看到 gitment仓库的里面的issue 原来是作者用来做跨域的认证服务证书到期了(奇怪的是这个服务偶尔好偶尔坏),按照 issue 里面的说法,将 js、css 文件替换掉了,然后访问发现使用了一个叫做HeroKu
的免费云服务替代了作者的服务
- 使用过程中发现一个问题,当当前文章没有评论数据,会返回一个
魔改底部增加网站运行时间功能 代码地址
Icarus 增加两个菜单-关于、工具
- 关于页面排版布局和其他页面一致,只需要在增加
layout/about.ejs
、includes/generator/about.js
并在入口scripts/index.js
增加响应入口即可 - 小工具页面我不想要侧边
widget
了,初始时想着能在tool.ejs
这个页面里做些处理就ok,但事实并非我想的这么简单,hexo用的是ejs
模板,入口是layout.ejs
,不知道为什么我在这个文件里拿不到generator/tool.js
里面的声明的变量,但是可以拿到当前路径的path
变量,由于对 hexo 和 ejs 都不怎么了解,所以采取了以下硬编码的临时方案,以后再进行优化layout/layout.ejs 1
2
3
4
5
6
7
8
9
10
11
12
13
14<section class="section">
<div class="container">
<div class="columns">
<!-- 此处硬编码,来判断是否需要全屏,不了解 hexo 机制,不熟悉ejs模板,后期有机会优化吧 -->
<% if (path !== 'tool/index.html') { %>
<div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div>
<%- _partial('common/widget', { position: 'left' }) %>
<%- _partial('common/widget', { position: 'right' }) %>
<% } else { %>
<div class="column column-main"><%- body %> <%- path %></div>
<% } %>
</div>
</div>
</section>
配置相关
- update: 2019-10-17 将资源部署到 codeing ,并用自己的域名来访问站点,需要在阿里云域名解析后天配置域名解析指向coding的服务。参考 百度seo处理
- 每次
hexo deploy
的时候github的 repo 的master的提交历史都会被重写,这里有一个解释