使用HEXO建站

使用Hexo模板

按以下指导进行本地预览和上传到你的github。

环境安装

安装node.js

node.js官方下载地址https://nodejs.org/en/

设置npm淘宝镜像站(npm默认的源的下载速度可能很慢，建议使用淘宝镜像替换)
执行下面的命令，将npm的源设置成淘宝镜像站。

npm config set registry "https://registry.npm.taobao.org"

安装hexo执行以下命令安装hexo。
在/Gitspace/next/下右键打开Git Bash Here

npm install -g hexo-cli #安装hexo
hexo version #并查看版本号

建立博客站点

# 初始化博客文件夹
hexo init

#注意这将生成两个_config.yml文件，根目录的叫做**站点配置文件**，/themes/landscape/下的叫做主题配置文件
# 安装依赖扩展插件
npm install

# 安装其它插件
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-admin --save

npm install hexo-generator-archive --save
npm install hexo-generator-feed --save
npm install hexo-generator-search --save
npm install hexo-generator-tag --save
npm install hexo-generator-sitemap --save

本地预览hexo

第一次使用hexo，在本地创建服务器使用。

# 生成静态页面
hexo generate
# 开启本地服务器
hexo clean
hexo s

打开浏览器，地址栏中输入：http://localhost:4000/
如果访问不了，使用hexo s -p 5000替换hexo s。

部署到github

修改站点配置文件_config.yml
修改deploy项的内容，如下所示：

deploy:
  type:git
  repository: git@github.com/yourname/yourname.github.io.git
  branch: master

注意：type: git中的冒号后面有空格。

部署hexo
输入下面的命令将hexo博客部署到github中：

# 清空静态页面
hexo clean
# 生成静态页面
hexo generate
# 部署
hexo deploy

使用经典的Next主题：

安装主题

在站点的根目录下Git Bash Here：
git clone https://github.com/theme-next/hexo-theme-next themes/next
修改站点配置文件_config.yml:
启用主题theme: next

配置主题

主题配置文件_config.yml中推荐更改的部分：

选择Scheme：Muse
设置语言language: zh-CN
设置菜单menu,增加tags和categories和about项，archives，commonweal等项
social功能，||后的单词对应图标库中的图标，图标库的链接为http://fontawesome.io/icons/
文章热度：next主题集成leanCloud，打开/themes/next/layout/_macro/post.swig
在<span class="leancloud-visitors-count"></span>下添加一句：
<span>℃</span>
然后打开/languages/zh-CN.yml
将views:阅读次数改为views:热度。
网站logo：放在/themes/next/source/assets里面，修改favicon
设置leancloud_visitors(需要提前配置好leancloud的相关信息)

leancloud_visitors:
enable: true
app_id:
app_key:

并执行以下命令：

hexo new page 'tags' #创建tags子目录
hexo new page 'categories' #创建categories子目录
hexo new page 'about' #创建about子目录
hexo new page 404 #创建404页面

在你的网站根目录下面的source文件夹会分别生成tags、categories以及about文件夹。
分别修改这tags和categories文件夹中的index.md文件，新增type属性，如下：

---
title: tags
date: 2018-01-04 11:45:41
type: tags
---

其他可选功能：

动态背景：可以选择：canvas_nest,three_waves,canvas_lines,canvas_sphere,canvas_ribbon等

打开 /theme/next/layout/_layout.swig，在 </body>之前添加代码:

{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

桃心效果：浏览器输入http://7u2ss1.com1.z0.glb.clouddn.com/love.js
拷贝所有代码，在/themes/next/source/js/src里面新建love.js，然后在\themes\next\layout\_layout.swig文件末尾添加以下代码：

 <script type="text/javascript" src="/js/src/love.js"></script>
文章底部带#号的标签：修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将#换成<i class="fa fa-tag"></i>
文章末尾统一添加“本文结束”标记：在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
{% if not is_index %}

   <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>

{% endif %}

</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后(如下图)，添加以下代码：

    {#####################}
    {### END POST BODY ###}
    {#####################}

<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

然后打开主题配置文件（_config.yml),在末尾添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

开启页面下方访客功能(使用不蒜子)：
找到next主题的配置文件themes/next/_config.yml，footer字段，加入一个配置，这里我们叫它counter吧，即

footer:
  # -------------------------------------------------------------
  # visitors count
  counter: true

修改next主题的模板文件：

由于是把访问量统计放在网页的footer，所以我们需要修改的模板文件是theme/next/layout/_partials/footer.swig。
我们在合适的位置加入：

{% if theme.footer.counter %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

    <span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv"></span>次</span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv">总访客<span id="busuanzi_value_site_uv"></span>人</span>
    <span class="post-meta-divider">|</span>

{% endif %}

其他问题

LeanCloud访问统计提示’Counter not initialized! See more at console err msg.‘

解决办法
hexo generate命令执行时出错

将你的post文章中的所有大括号{或}加上'进行行内代码即可。
将你的post文章中的所有连续的大括号{{或}}中间加空格，即改为{ {和} }。

注意：很有可能出现无法统计阅读量的情况：页面LeanCloud访问统计提示’Counter not initialized! See more at console err msg.’

解决方案，按此解决方案：

deploy:
  - type: git
    repository: git@github.com:charleechan/charleechan.github.io.git
    branch: master
  - type: leancloud_counter_security_sync

配置数学公式渲染器

更换Hexo的markdown渲染引擎，hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug，两者比较接近，也比较轻量级。

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

执行上面的命令即可，先卸载原来的渲染引擎，再安装新的。

然后，跟换引擎后行间公式可以正确渲染了，但是这样还没有完全解决问题，行内公式的渲染还是有问题，
因为hexo-renderer-kramed引擎也有语义冲突的问题。接下来到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，把第11行的escape变量的值做相应的修改：

//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/

这一步是在原基础上取消了对,{,}的转义(escape)。
同时把第20行的em变量也要做相应的修改。

//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

重新启动hexo（先clean再generate）,问题完美解决。哦，如果不幸还没解决的话，看看是不是还需要在使用的主题中配置mathjax开关。

在主题中开启mathjax开关
如何使用了主题了，别忘了在主题（Theme）中开启mathjax开关，下面以next主题为例，介绍下如何打开mathjax开关。

进入到主题目录，找到_config.yml配置问题，把mathjax默认的false修改为true，具体如下：

# MathJax Support
mathjax:
  enable: true
  per_page: true

别着急，这样还不够，还需要在文章的Front-matter里打开mathjax开关，如下：

---
title: index.html
date: 2016-12-28 21:01:30
tags:
mathjax: true
---

不要嫌麻烦，之所以要在文章头里设置开关，是因为考虑只有在用到公式的页面才加载 Mathjax，这样不需要渲染数学公式的页面的访问速度就不会受到影响了。

更多资讯请参考

posted @ 2019-08-30 14:28 云远·笨小孩阅读(205) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

云远·笨小孩

静，净，竞，敬。