hexo & Icarus 博客搭建总结

一直想把博客重新搞一搞，之前用得是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，需要配置一下参数

  1 2 3 4 5 6 7 8 9 10

  comment: # 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 都不怎么了解，所以采取了以下硬编码的临时方案，以后再进行优化

  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处理
• • 把github hugeorange.github.io 仓库的 deploy 分支作为部署代码的分支，master 作为源代码分支（失败了，好像hexo 必须部署到github 的master分支上）

    hexo 相关的命令

• 每次 hexo deploy 的时候github的 repo 的master的提交历史都会被重写，这里有一个解释

主题魔改-参考

• alphalxy
• xxs
• yearito
• 知乎讨论
• 官方文档-写作、 yearito-写作 –