[总结]HEXO的使用

本文将总结性的介绍如何建立自己的github.io博客,后续会持续补充,进阶。感谢baixin提供的参考文章。


技术选型为github+hexo+idea,首先最简单的阐述下这个东西都干嘛的

1、 技术选型

1.1 github

  • 免费空间挂载网站。(这个好理解,提供username.github.io直接可以访问)
  • 发布网站。(将hexo生成的网站推送到username.github.io上)
  • 版本控制。(将整个网站的源文件推送到另一个repo上,便于网站开发环境迁移,多机工作等)

1.2 hexo

  • 生成博客框架页面,可以通过md解析文章渲染页面,然后发布到github上,多种风格支持,扩展插件丰富。
  • 顺便对比下hexojekyll
    • hexo 基于nodejs,实施起来简便。
    • jekyll 基于ruby,实施起来折腾。 但是支持在线编辑

1.3 idea

  • 工作环境,写作环境。(git插件支持强大,md支持预览)

2、 具体部署方案

2.1 当然是先申请github

在此不再赘述。需要注意的是要申请两个
* username.github.io只需要申请下来存放页面,发布只需要配置好_config.yml文件的deploy属性,通过hexo d发布
* username.github.io.hexo 整个hexo完整项目,方便迁移,多机协作。

2.2 在项目中安装hexo

并按照其规则把主题样式放在themes里面(我们选择的是next),并配置好_config.yml

2.3 扩展网站功能

安装扩展插件比如评论、百度统计。

2.4 编写md文件

可以写博文啦。

3、 废话少说上代码

注意以下针对已经构建好的项目,再次迁移。

克隆项目

$ git clone https://github.com/psiitoy/psiitoy.github.io.hexo.git
cd psiitoy.github.io.hexo

安装hexo

$ npm install hexo --save

初始化hexo,添加git插件支持

$ hexo init --no-clone
$ npm install hexo-deployer-git --save

hexo init构建前项目结构_config.yml package.json scaffolds source themes
hexo init构建后项目结构_config.yml package.json scaffolds source themes node_modules public db.json
多了三个文件db.json public node_modules,同时git信息都没了…T.T,不慌继续

hexo的文件结构

_config.yml     #主站的配置文件
node_modules  
package.json    #应用程序的信息
scaffolds       #模版文件夹,新建文章时会根据 scaffold里对应md生成文件
source          #存放用户资源,除 _posts 文件夹之外, _ 开头的文件/和隐藏的文件将会被忽略
themes          #主题文件夹

初始化git,设置’git push’只提交当前分支,禁用lf自动转换,禁用中文文件名转换

$ git init
$ git config --global push.default simple
$ git config --global core.autocrlf false
$ git config --global core.quotepath false

追踪项目

$ git remote add origin git@github.com:psiitoy/psiitoy.github.io.hexo.git

纳入版本控制

$ git add .
$ git commit -m 'first commit'

更新分支

$ git pull origin master

然后运行idea rebase并且解决冲突(git能力有限,交给idea搞了)

revert冲突文件
commit解决冲突
rebase到远程分支

ok了(idea暂时只能commit不能push待解决),一切git操作交给命令行


4、hexo备注

4.1 一些常用命令:

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

4.2 问题解决

4.2.1 github.io js 404无法正常显示
  • 最近github page更新了,GitHub Pages 过滤掉了 source/vendors 目录的访问,所以next主题下的source下的vendors目录不能够被访问到,所以就出现了本地hexo s能够正常访问,但是deploy到github就是一片空白,按f12,可以看到大量来自source/vendors的css和js提示404

方法一(来自github next主题issue):
首先修改source/vendors为source/lib,然后修改_config.yml, 将 _internal: vendors修改为_internal:lib 然后修改next底下所有引用source/vendors路径为source/lib。这些地方可以通过文件查找找出来。主要集中在这几个文件中。1. Hexo\themes\next.bowerrc 2. Hexo\themes\next.gitignore 3. Hexo\themes\next.javascript_ignore 4. Hexo\themes\next\bower.json 。修改完毕后,刷新重新g一遍就ok啦。

方法二:更新next主题,不过听过最新的next主题对第三方例如多说删除了,具体不清楚,不敢亲易尝试,毕竟更新一次主题引来的问题太多,很多配置可能都要改,代价太高,所以推荐第一种方法


5、Markdown语法参考链接

很实用的例子


6、Hexo参考链接

通过Hexo在GitHub搭站全记录
HEXO搭建个人博客
搭建 Hexo 博客–增强篇
next主题的配置和优化
HEXO增加标签页、分类页
HEXO next主题增加畅言评论系统


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值