Cham's Blog Algorithm, skill and thinking

用Hexo搭建blog小记

2018-03-08

  本博客创建过程主要源于网上各种教程,为了方便查看和回馈分享精神,记录一下。考虑到安装过程细节较多,部分过程可参考链接。

准备工作

  搭建一个博客,至少需要一个 Github 账号,懂一些 Git 的语法。搭建博客的目的之于我是记录和思考,因此只要核心功能。

用 Hexo 和 GitHub Pages 初步搭建博客

主要步骤

1.在Github上创建以yourname.github.io为名的repository。现在它还是空的,之后会向其中上传一些静态网页文件,Github Pages 就会将里面的信息自动生成一个网页,你就可以通过www.yourname.github.io访问了。

2.在本地创建一个文件夹,如G: /blog,里面需要安装博客相关的一些库以及博客资源文件。

3.初始化处理。 1) 使用 Hexo 之前,需要先安装 Node.js。推荐安装方法 n工具安装最新node,注意安装指令是 sudo n lts 2) 安装hexo框架

# 主要命令,在blog文件夹内部打开 git bash
npm install -g hexo-cli # 中断则多试几次
hexo init
npm install hexo-deployer-git --save
# 至此基本可以上传了,若出问题需要注意文件结构,和标准的是否一样

4.将本地 Hexo 博客自动部署到 Github 。首先修改主配置文件_config.yml

deploy:
    type: git
    repository: https://github.com/chamwen/chamwen.github.io.git
    branch: master

常用的博客创建、生成、预览、部署的简化指令如下

hx n test 在_post目录下生成test.md文件
hx cl 清空缓存
hx g -s 生成并预览
hexo d 上传

5.关于添加NEXT主题 。使用下面的命令下载最新的主题文件到themes文件下。完成后修改主配置文件,把 Hexo 默认的 lanscape 修改成 next,即 theme: next git clone https://github.com/theme-next/hexo-theme-next themes/next

常见BUGs

Hexo 框架本身是用 markdown 的语言来写博客,但是很多坑就在这个框架里。 1)Hexo 渲染 MathJax 数学公式,安装 kramed,还需要更正的参考 node_modules\kramed\lib\rules\inline.js

$ npm uninstall hexo-renderer-marked --save  # 很多bug
$ npm install hexo-renderer-kramed --save

2)markdown 的对段落格式的支持,多段落居中显示,用<p align="center"> xxx </p>, 居中的段落中的换行,加粗语法需要用 html 格式的,换行 <br>,加粗用 <b>xxx</b> 3)单引号渲染异常,确保已经安装 hexo-renderer-marked,然后主配置文件添加:

kramed:
  smartypants: false

4)分页显示符号问题,<i class "fa fa-angle-right"></i>,参考分页显示 5)tags、about等显示404,去除 next配置文件中 || 前的空格

menu:
  home: /|| home
  categories: /categories/|| th

6)Hexo对流程图等的支持

npm install --save hexo-filter-mermaid-diagrams
npm install --save hexo-filter-flowchart
npm install --save hexo-filter-sequence

7)Hexo 搜索SEO优化,需要安装

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

8)预览博客的端口修改 node_modules\hexo-server\index.js 文件中的 4000 改成 5000 9)侧边栏post链接跳转异常 出现 404,网址为 archives/%7C%7C%20archive,解决办法,NEXT 配置文件中

archives: /archives/ || archive
# 改为:
archives: /archives

为GitHub Pages 绑定阿里云的域名

主要步骤

1.先在阿里云上申请一个域名 2.在/hexo/source目录下添加CNAME文件,内容为

www.chamwen.com
chamwen.com

3.打开自己的Github上的仓库,点击Settings,添加自己申请的域名 4.打开在阿里云上刚申请的域名,点击解析,配置如下,注意有些网站上说添加ping chamwen.github.io得到的 ip,实验无效。

aliyun

然后就可以愉快的用chamwen.com访问自己的Github Pages了

Hexo 的 Next 主题优化

推荐参考

1.Hexo搭建的GitHub博客之优化大全 2.Hexo+Next主题优化

注意事项

1.隐藏网页底部 powered By Hexo / 强力驱动

找到 \themes\next\layout_partials\下面的 footer.swig 文件,删掉:

<div class="powered-by">
  ...
</div>
<div class="theme-info">
  ...
</div>

2.标题和头像下面添加签名,打开博客的主配置文件

# Site
title: cham #最上面的网站标题
subtitle: writing and thinking #网站标题对应的签名
description: Sharing brings happiness and inspiration #头像对应的签名
author: Chamwen #个人昵称和网站版权者
language:
timezone:

3.关于添加访问统计,在主题配置文件下,enable 和 post_views 改为 true,其他 false,效果是每篇文章有访问统计,整体不设置。

busuanzi_count:
  enable: true
  total_visitors: false
  total_visitors_icon: user
  total_views: false
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

4.添加 Gitalk 评论系统   请参考Hexo Next 加入评论功能gitalk,一开始使用的是Gitment,没想到作者的服务器挂了,目前比较好用而且方便的是 gitalk。

5.添加 clustrmaps 访客地图统计 注意添加位置,/themes/next/layout/_macro/sidebar.swig 文件下,放在 if theme.sidebar.b2t 前一行,可以实现地图置于侧边栏 overview 最下面,而且间距正常。

  <div style="padding: 10px auto; margin: 20px 0px -35px 0px; text-align: center;">
    <script type='text/javascript' id='clustrmaps' src='//cdn.clustrmaps.com/map_v2.js?cl=5e698f&w=200&t=n&d=myZNQuDZ_-n9DjtDK7VW2as1MVfNco0mzscqst-pExo&co=e4eaf5&ct=523e3e'></script>
  </div>

{if theme.sidebar.b2t}

清空提交历史

删除本地 .deploy_git 文件夹,先 hexo cl,再 hexo d,如果出现问题,把 github 上的仓库清了重新创建一个,然后再上传。



Comments

Content