HEXO的使用
本文将总结性的介绍如何建立自己的github.io博客,后续会持续补充,进阶。感谢baixin提供的参考文章。
技术选型为github+hexo+idea,首先最简单的阐述下这个东西都干嘛的
1、 技术选型
1.1 github
- 免费空间挂载网站。(这个好理解,提供username.github.io直接可以访问)
- 发布网站。(将hexo生成的网站推送到username.github.io上)
- 版本控制。(将整个网站的源文件推送到另一个repo上,便于网站开发环境迁移,多机工作等)
1.2 hexo
- 生成博客框架页面,可以通过md解析文章渲染页面,然后发布到github上,多种风格支持,扩展插件丰富。
- 顺便对比下
hexo
和jekyll
- hexo 基于
nodejs
,实施起来简便。 - jekyll 基于
ruby
,实施起来折腾。 但是支持在线编辑
- hexo 基于
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、 废话少说上代码
注意以下针对已经构建好的项目,再次迁移。
克隆项目
1 |
$ git clone https://github.com/psiitoy/psiitoy.github.io.hexo.git |
安装hexo
1 |
$ npm install -g hexo |
添加git插件支持
1 |
$ npm install hexo-deployer-git --save |
初始化hexo
1 |
$ hexo init --no-clone |
hexo init
构建前项目结构_config.yml package.json scaffolds source themeshexo init
构建后项目结构_config.yml package.json scaffolds source themes node_modules public db.json
多了三个文件db.json
public
node_modules
,同时git信息都没了…T.T,不慌继续hexo的文件结构
1 |
_config.yml #主站的配置文件 |
初始化git,设置’git push’只提交当前分支,禁用lf自动转换,禁用中文文件名转换
1 |
$ git init |
追踪项目
1 |
$ git remote add origin git@github.com:psiitoy/psiitoy.github.io.hexo.git |
纳入版本控制
1 |
$ git add . |
更新分支
1 |
$ 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搭站全记录 https://anonymalias.github.io/2016/01/14/hexo-construct-homepage/
HEXO搭建个人博客 http://baixin.io/2015/08/HEXO%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/
搭建 Hexo 博客–增强篇 https://www.jianshu.com/p/2640561e96f8
next主题的配置和优化 https://blog.csdn.net/willxue123/article/details/50994852
HEXO增加标签页、分类页 https://github.com/iissnan/hexo-theme-next
HEXO next主题增加畅言评论系统 http://www.zhaiqianfeng.com/2017/03/changyan-for-hexo-next-theme.html
HEXO的使用的更多相关文章
- 【原】Github+Hexo+NextT搭建个人博客
摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流.GitHub Pages 是Github为 ...
- 使用HEXO快速建站
先安好npm,请参照:http://max.cszi.com/archives/482 打开网站:https://hexo.io/ npm install hexo-cli -g hexo ini ...
- hexo+github搭建个人博客
最近用hexo+github搭建了自己的个人博客-https://liuyfl.github.io,其中碰到了一些问题,记录下来,以便查阅. hexo+github在win7环境下搭建个人博客:hex ...
- 基于Hexo和Github搭建博客
搭建自己的个人博客. 准备工作 确保电脑需要已下载安装node和npm.查看安装是否成功,windows只需在命令行输入以下两条命令即可. 1 2 $ node -v $ npm -v 安装hexo ...
- Hexo的coney主题的一些补充说明
title: Hexo的coney主题的一些补充说明 date: 2014-12-14 14:10:44 categories: Hexo tags: [hexo,技巧] --- Coney是一个非常 ...
- 基于hexo+github搭建一个独立博客
一直听说用hexo搭建一个拥有自己域名的博客是很酷炫的事情~,在这十一花上半个小时整个hexo博客岂不美哉. 使用Hexo吸引我的是,其简单优雅, 而且风格多变, 适合程序员搭建个人博客,而且支持多平 ...
- 手把手教从零开始在GitHub上使用Hexo搭建博客教程(四)-使用Travis自动部署Hexo(2)
前言 前面一篇文章介绍了Travis自动部署Hexo的常规使用教程,也是个人比较推荐的方法. 前文最后也提到了在Windows系统中可能会有一些小问题,为了在Windows系统中也可以实现使用Trav ...
- 手把手教从零开始在GitHub上使用Hexo搭建博客教程(三)-使用Travis自动部署Hexo(1)
前言 前面两篇文章介绍了在github上使用hexo搭建博客的基本环境和hexo相关参数设置等. 基于目前,博客基本上是可以完美运行了. 但是,有一点是不太好,就是源码同步问题,如果在不同的电脑上写文 ...
- 手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置
前言 前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...
- 手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置
前言 有朋友问了我关于博客系统搭建相关的问题,由于是做开发相关的工作,我给他推荐的是使用github的gh-pages服务搭建个人博客. 推荐理由: 免费:github提供gh-pages服务是免费的 ...
随机推荐
- INNODB 统计信息采集
SHOW GLOBAL VARIABLES LIKE 'INNODB_STATS_PERSISTENT_SAMPLE_PAGES'; ALTER TABLE TABLE_NAME STATS_SAMP ...
- tomcat配置外部静态资源映射路径(windows和Linux部署)
如果你不想用ngnix配置的话,只单独使用tomcat的话可以看看这篇文章,接下来开始 使用场景 1.单机开发有时侯如果放在war下每次clean都会清理当前项目下静态文件特别折腾. 2.只有启动to ...
- Spring Cloud Alibaba学习笔记(18) - Spring Cloud Gateway 内置的过滤器工厂
参考:https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.1.0.RELEASE/single/spring-clou ...
- 前端开发 vue,angular,react框架对比2
在过去一年里,前端开发发展迅速,前端工程师的薪资亦是水涨船高.2019 更是热度不减,而作为近年来尤为热门的前端框架,Vue.js 自是积累了大量关注.那么,Vue.js 是适合你的框架吗? ...
- AppRTC服务搭建(测试)
提供一个在线的webrtc服务器测试,需要的朋友看看.https://www.webrtcserver.cn/ 服务器搭建环境各有不同在此参考前人经验差试一下. 运行AppRTC需要使用Google ...
- Java 之 Servlet 基础入门
Servlet 一.什么是 Servlet 1.概念 Servlet:server applet,是指运行在服务器端的小程序 2.Servlet servlet 就是一个接口,定义了 Java 类 ...
- BIN文件合并烧写
可以实现将Bootloader和Application合并烧写 使用UBIN.exe工具或者J-Flash工具 UBIN工具 选择Bootloader源文件 添加Bootloader源文件 选择App ...
- jQuery将form表单的数据封装成json对象
/** * 自动将form表单封装成json对象 */ $.fn.serializeObject = function() { var o = {}; var a = this.serializeAr ...
- DRF 筛选
from rest_framework.generics import ListAPIView,CreateAPIView,UpdateAPIView,RetrieveAPIView,DestroyA ...
- altium designer(AD13)隐藏敷铜的方法
覆铜,就是将PCB上闲置的空间作为基准面,然后用固体铜填充,这些铜区又称为灌铜.敷铜的意义在于,减小地线阻抗,提高抗干扰能力;降低压降,提高电源效率;还有,与地线相连,减小环路面积. 如果拿到别人的P ...