本文将总结性的介绍如何建立自己的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、 废话少说上代码

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

克隆项目

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

安装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 themes
hexo init构建后项目结构_config.yml package.json scaffolds source themes node_modules public db.json
多了三个文件db.json public node_modules,同时git信息都没了…T.T,不慌继续

hexo的文件结构

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

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

1
2
3
4
$ git init
$ git config --global push.default simple
$ git config --global core.autocrlf false
$ git config --global core.quotepath false

追踪项目

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

纳入版本控制

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

更新分支

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的使用的更多相关文章

  1. 【原】Github+Hexo+NextT搭建个人博客

    摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流.GitHub Pages 是Github为 ...

  2. 使用HEXO快速建站

    先安好npm,请参照:http://max.cszi.com/archives/482 打开网站:https://hexo.io/   npm install hexo-cli -g hexo ini ...

  3. hexo+github搭建个人博客

    最近用hexo+github搭建了自己的个人博客-https://liuyfl.github.io,其中碰到了一些问题,记录下来,以便查阅. hexo+github在win7环境下搭建个人博客:hex ...

  4. 基于Hexo和Github搭建博客

    搭建自己的个人博客. 准备工作 确保电脑需要已下载安装node和npm.查看安装是否成功,windows只需在命令行输入以下两条命令即可. 1 2 $ node -v $ npm -v 安装hexo ...

  5. Hexo的coney主题的一些补充说明

    title: Hexo的coney主题的一些补充说明 date: 2014-12-14 14:10:44 categories: Hexo tags: [hexo,技巧] --- Coney是一个非常 ...

  6. 基于hexo+github搭建一个独立博客

    一直听说用hexo搭建一个拥有自己域名的博客是很酷炫的事情~,在这十一花上半个小时整个hexo博客岂不美哉. 使用Hexo吸引我的是,其简单优雅, 而且风格多变, 适合程序员搭建个人博客,而且支持多平 ...

  7. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(四)-使用Travis自动部署Hexo(2)

    前言 前面一篇文章介绍了Travis自动部署Hexo的常规使用教程,也是个人比较推荐的方法. 前文最后也提到了在Windows系统中可能会有一些小问题,为了在Windows系统中也可以实现使用Trav ...

  8. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(三)-使用Travis自动部署Hexo(1)

    前言 前面两篇文章介绍了在github上使用hexo搭建博客的基本环境和hexo相关参数设置等. 基于目前,博客基本上是可以完美运行了. 但是,有一点是不太好,就是源码同步问题,如果在不同的电脑上写文 ...

  9. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置

    前言 前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...

  10. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

    前言 有朋友问了我关于博客系统搭建相关的问题,由于是做开发相关的工作,我给他推荐的是使用github的gh-pages服务搭建个人博客. 推荐理由: 免费:github提供gh-pages服务是免费的 ...

随机推荐

  1. INNODB 统计信息采集

    SHOW GLOBAL VARIABLES LIKE 'INNODB_STATS_PERSISTENT_SAMPLE_PAGES'; ALTER TABLE TABLE_NAME STATS_SAMP ...

  2. tomcat配置外部静态资源映射路径(windows和Linux部署)

    如果你不想用ngnix配置的话,只单独使用tomcat的话可以看看这篇文章,接下来开始 使用场景 1.单机开发有时侯如果放在war下每次clean都会清理当前项目下静态文件特别折腾. 2.只有启动to ...

  3. Spring Cloud Alibaba学习笔记(18) - Spring Cloud Gateway 内置的过滤器工厂

    参考:https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.1.0.RELEASE/single/spring-clou ...

  4. 前端开发 vue,angular,react框架对比2

    在过去一年里,前端开发发展迅速,前端工程师的薪资亦是水涨船高.2019 更是热度不减,而作为近年来尤为热门的前端框架,Vue.js 自是积累了大量关注.那么,Vue.js 是适合你的框架吗?     ...

  5. AppRTC服务搭建(测试)

    提供一个在线的webrtc服务器测试,需要的朋友看看.https://www.webrtcserver.cn/ 服务器搭建环境各有不同在此参考前人经验差试一下. 运行AppRTC需要使用Google ...

  6. Java 之 Servlet 基础入门

    Servlet 一.什么是 Servlet 1.概念 Servlet:server applet,是指运行在服务器端的小程序 2.Servlet   servlet 就是一个接口,定义了 Java 类 ...

  7. BIN文件合并烧写

    可以实现将Bootloader和Application合并烧写 使用UBIN.exe工具或者J-Flash工具 UBIN工具 选择Bootloader源文件 添加Bootloader源文件 选择App ...

  8. jQuery将form表单的数据封装成json对象

    /** * 自动将form表单封装成json对象 */ $.fn.serializeObject = function() { var o = {}; var a = this.serializeAr ...

  9. DRF 筛选

    from rest_framework.generics import ListAPIView,CreateAPIView,UpdateAPIView,RetrieveAPIView,DestroyA ...

  10. altium designer(AD13)隐藏敷铜的方法

    覆铜,就是将PCB上闲置的空间作为基准面,然后用固体铜填充,这些铜区又称为灌铜.敷铜的意义在于,减小地线阻抗,提高抗干扰能力;降低压降,提高电源效率;还有,与地线相连,减小环路面积. 如果拿到别人的P ...