0%

搭站总结


一直想建一个自己的博客,之前想用wordpress,但是苦于自己懒癌,不想折腾服务器 后来偶尔发现了GitHub Pages,上传js项目自动生成网站,全部由GitHub托管 而且本来官方说明也推荐用这个写博客,于是就开始试试 大体框架应该是GitHubPages由你在GitHub的github.io项目生成网站 Hexo由你的博客内容和自定义设置生成静态网页项目并上传到你的repository 为了备份,我们将在repository中建立两个branch 一个master用于让hexo上传静态网页文件 一个hexo用于保存本地hexo项目 下面分享一些经验和踩到的坑 - 2017.2.8更新md写作软件 - 2017.2.10更新mathjax cdn,加入长廊,更新域名,国内外访问分流(blog2.0) - 2017.2.13更新优化插件,更新置顶说明,优化长廊,加宽文章宽度(blog3.0) - 2017.3.30更新置顶说明原文地址 - 2017.12.27更新异地恢复 - 2018.7.6更新一个比较全面的参考网址

i07MIs.png

前提

  • 安装好Node.js
  • 安装好git
  • 安装好一个你最喜欢的文字编辑软件,用于写博客,比如notepad++。或者使用插件和第三方markdown写作软件(推荐)。
  • 可选:安装chrome插件极简图床或MPic(图床软件)。安装geogebra(画图像)

GitHub&Hexo初始化

选择hexo作为博客工具,并没有用官方推荐的jeykell,其实差不多,一个基于ruby,一个基于node.js,hexo据说快一些 最后的过程是这样的 - 注册github账号,这个就省略了 - 新建一个repository,命名必须为“你的账户名.github.io" - 对这个repository新建一个hexo分支并把hexo设置为默认分支 - git bash cd到你本地新建的一个文件夹(用于存放博客项目) - 依次执行 npm install hexo、hexo init、npm install、npm install hexo-deployer-git - 此时你的文件夹中就已经初始化了Hexo博客项目,在文件夹中找到 _config.yml,修改deploy参数为master, 见后文 - 此时你的网址就是:https://你的账户名.github.io/ - 现在的状态就是,你的博客项目存在hexo分支下,所有更改都会保存到github上Hexo分支中,但因为deploy参数为master,所以用hexo命令生成博客网页文件时会更新master分支,因此每次更新博客后两个分支都会更新,一个hexo项目,一个更新网页文件

之后所有的命令都是在Git Bash命令行环境下,工作目录就是这个Hexo博客目录,并且注意切换到hexo分支

Hexo配置

Hexo博客的目录格式如下

├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes

  • config.yml在这里设置博客的总体参数,博客名,url,git什么的
  • _posts里面存放你的文章
  • theme顾名思义,存放博客界面主题
  • 在config.yml中关键配置以下几个参数
  • title: 博客网站标题
  • subtitle: 副标题
  • description: 一句话简介
  • author: 作者名
  • language: zh-Hans 语言根据你选择的主题看,在主题目录的language里查看支持哪些语言
  • timezone: Asia/Shanghai 时区,这个有规范,中国就写上海时区
  • url: https://你的用户名.github.io/
  • type: git
  • repo: https://github.com/你的用户名/你的用户名.github.io.git
  • branch: master

更新Hexo项目

依次执行 - git add . (检查所有文件是否更新) - git commit -m "更新报告" (提交commit) - git push origin hexo (上传更新到github) 第一次更新可能出现一些错误 - 第一次先pull再push,否则GitHub发现本地没有服务器上的一些文件会报错 - permission denied 去博客目录/.git/config中,找到Url,将ssh链接改成html格式:https://www.github.com/你的用户名/你的用户名.github.io.git - refusing to merge unrelated histories 因为没有公共祖先分支无法合并,这就只能强制合并了,执行命令:git pull origin hexo --allow-unrelated-histories,之后再ush 所有的操作都在Hexo分支下进行,因为master只存静态网页文件,不需要你更改,它是由Hexo生成的

Hexo 写博客及更新网页

主要命令如下 - hexo clean 清除缓存和静态文件 - hexo g或者hexo generate 生成框架文件 建议每次更新网站之前先clean再generate - hexo s或者hexo server 打开本地服务器进行预览,网址输入localhost:4000即可,按crtl+c关闭 - hexo new"文件名" 新建博客,这个文件名不是文章标题名,新建之后在_post文件夹里打开就可以写博客了 - hexo d或者hexo deploy,写好博客,clean&generate之后,部署博客到GitHub Pages上,就更新了博客网页 其中有几点要注意 - 第一次新建目录后执行#npm install hexo-deployer-git --save安装git分发,否则上传不了 - hexo的语法规范很严格,博客里tags:或者级标题符号#后面必须接一个空格 - 我在next主题下更新有点问题,最好是两次generate两次server进行预览,预览时用server -s

Hexo写作的几种选择(Windows)

  • 马克飞象:这里推荐用马克飞象的chrome app版本,可以离线打开。优点:界面简洁明了,编辑自由,预览功能完整,常见操作(加粗字体插入图片链接代码块引用)方便,可以绑定印象笔记给文章备份。缺点:操作麻烦一点,需要把文本拷回去。 多个文章打开不方便,免费试用10天,78元一年,它长这个样子: i078zV.jpg
  • hexo admin插件:安装hexo-admin插件,可视化管理博客,安装方法:
    1
    2
    3
    npm install --save hexo-admin
    hexo server -d
    open http://localhost:4000/admin/
    http://localhost:4000/admin/就是一个网页管理界面,可以管理文章,同样也能写文章,实时预览,加标签什么的,相当于把部分功能提出来做成了GUI,优点:多文章管理,操作方便,自动保存,编辑时根据md语法可以在编辑文本改字号字体。缺点:预览不是很完全。不支持mathjax数学公式预览,自定义程度不高,编辑有一点小bug,新建文章时文件名有点小问题,对中文支持不是很好,它长这个样子: i073R0.jpg
  • 推荐是两个都装上,写新文章或者写需要插入公式代码的文章用第三方编辑器,如果只是普通码字或者更新一下以前写过的文章可以用hexo admin。
  • Typora:markdown写作软件有许多,大部分都是一边编辑一边预览,这里强推一款极简设计,提倡所见即所得概念的软件:Typora优点:所见即所得,桌面软件,功能完整,近似于word的便捷体验(尤其在插入表格图片方面很方便)。缺点:不支持同步备份,html需要单独划区域,编辑略不自由。他长这个样子: i071Gq.jpg
  • Mac系统网上推荐使用Mou或者Sublime,我没有用过,也不做评价。
  • 常备一个notepad++,出现什么问题没有notepad++解决不了的。

主题设置

  • 一般来说Hexo的主题制作人都会将主题开源到GitHub上,直接用命令clone将其拷到本地,然后在config.yml中将theme改成这个主题名即可
  • 每一个主题下面有自己的config.yml,用于对每个主题进行进一步的配置,根据作者说明或者GitHub上的readme进行更改

写作语法

  • 语法支持Markdown,可以用html,latex等其他语法,但必须在文章首部中声明

插入图片

  • 插入图片分本地和在线链接插入,推荐使用在线链接
  • 我的方法是申请七牛云账户,新建一个存储空间,拿到域名,ak,sk,然后chrome装一个插件,极简图床,在这个插件上配置好刚刚拿到的域名,ak,sk,之后直接点击上传图片,就可以了,插件会自动生成用于插入图片的markdown语句或者在线链接,直接写进正文即可。MPic同理。

插入公式

  • 用一对$$将公式围起来,语法支持latex
  • 必须在文章首部中声明如mathjax: true
  • 因为hexo先用marked.js进行预处理,然后才通过mathjax处理,所以\可能被转义为,从而导致公式显示不正确,解决方法有两种,多打两个\,另外一种是修改marked.js文件,无视转义,可以自行百度方法
  • 建议更换cdn以加速:
    1
    2
    3
    4
    mathjax:
    enable: true
    per_page: true
    cdn: //cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML

标签与分类

  • 标签与分类的区别在于1篇文章归于一类,但可能有多个标签
  • 比如机器学习的一片文章归于机器学习这个category,但可以有代码、数学、原创等多个标签
  • 分类需在首部加上categories: 分类名
  • 标签需在首部加上tags: 标签名或者tags: [标签1,标签2....],注意别打成中文逗号

其他美化

  • 我用的是next主题,可以设置背景之类的,百度一下方法就能找到
  • 更换字体,视主题而定,next里面是用config里直接改字体,用的是google fonts,由于国内访问有问题,所以host用//fonts.css.network

首页文章数量设置

  • 安装插件
    1
    2
    3
    npm install --save hexo-generator-index
    npm install --save hexo-generator-archive
    npm install --save hexo-generator-tag
  • 在站点配置文件config.yml中添加如下字段
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    index_generator:
    per_page: 5

    archive_generator:
    per_page: 20
    yearly: true
    monthly: true

    tag_generator:
    per_page: 10
  • index, archive及tag开头分表代表主页,归档页面和标签页面。

添加评论功能

  • 视主题而定,我用的next主题,默认支持多说,只需要在主题配置文件中写入自己的duoshou_shortname即可
  • 现在多说那些啥的都关了,最好自己在leancloud上开后台空间,使用gitcomment、Disqus、来必力都行,现在我用的是valine,就冲它不用登录即可评论

优化插件

  • hexo生成的html文件有许多冗余,这里推荐安装一款插件压缩文件,提高效率 hexo-all-minifier

置顶

cnpm

  • 使用淘宝镜像安装插件提速,详情百度cnpm安装

RSS

异地恢复

  • 最近重装系统,重新恢复了本地博客,但是从远程clone下来并在本地hexo操作之后发现了许多问题,总结如下
  • clone之后直接安装依赖项,不需要hexo init,否则会情况博客的config.yml
  • 这一次其实是完全重新建了博客,因为以前的设置怎么导入怎么有问题,后来才发现当时的本地博客备份里根本没有theme!因为我的theme就是从别人的repository那里clone过来的,而整个博客又是通过git备份的,一个repository中不能包含另外1个repository,所以其实主题及所有设置一直没备份,以后得将主题目录下的.git文件夹删除
  • 记得安装hexo-deployer-git
  • next更新了,但是新功能的一些依赖还是需要看注释,自己npm install
  • 发现其实之前的博客太花哨了,这次干脆把所有附加功能都整没了,专注写作
  • 上面那2张图已经过时了,可以去我的github里看博客的文件目录
  • 有很多module因为名字太长所以也没有完成备份,感觉还是百度云靠谱
  • 升级mathjax到2.7.5
  • 改用hexo-renderer-kramed,并修改inline.js转义

这位大佬靠谱

  • 网址在这:HEXO建站备忘录
  • 里面提到了一个非常好的版本管理的工具,解决了theme下repository包含的问题,可以直接看介绍hexo-git-backup