Hexo+Github Pages+yilia搭建博客

本文首发于我的博客:gongyanli.com
github: https://github.com/Gladysgong/Gladysgong.github.io

一、快速创建个人Github Pages

1.什么是Github Pages

GitHub Pages 本用于介绍托管在GitHub的项目,不过由于他的空间免费稳定,很适合用来搭建一个博客。

每个帐号只能有一个仓库来存放个人主页,而且仓库的名字必须是username/username.github.io,这是特殊的命名约定。你可以通过http://username.github.io 来访问你的个人主页,比如我的就是gladysgong.github.io。

这里特别提醒一下,需要注意的个人主页的网站内容是在master分支下的。

2.创建自己的Github Pages

新建代码仓库(repository),此处命名格式有限制的,形如username.github.io
这里写图片描述

这里写图片描述
github page site已经建好,浏览器输入例如http://username.github.io,(该示例界面为空),可以自己push一个index页面来显示内容,开启你的blog把!

我的blog是gladysgong.github.io,可以打开看一下哟!如果文章对您有帮助,右侧fork进入star我一下,我会美美哒一天。

3.如何搭建一个独立博客——简明Github Pages与Hexo教程

二、搭建环境

1.安装node.js
2.安装npm
3.安装git,如果前面要commit、push,那之前就应该安装
4.github账户配置

三、Hexo安装

$ cd d:/hexo
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo g # 或者hexo generate
$ hexo s # 或者hexo server,可以在http://localhost:4000/ 查看(hexo s -p 8023端口被占用时)
这里写图片描述

四、Hexo主题切换

Hexo默认主题是landscape,大家可以切换成为next或者yilia的风格
1.安装主题

$ hexo clean
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

2.启用主题

修改Hexo目录下的_config.yml配置文件中的theme属性,将其设置为yilia。

3.更新主题

$ cd themes/yilia
$ git pull
$ hexo g # 生成
$ hexo s # 启动本地web服务器

4.打开http://localhost:8023/ ,我们就会看到一个全新的界面。

五、部署Hexo到Github Pages

1.部署Hexo到Github Pages上的原理

a.第一步中我们在Github上创建了一个特殊的repo(gladysgong.github.io)一个最大的特点就是master中的html静态文件,可以通过链接http://gladysgong.github.io来直接访问。
b.Hexo -g 会生成一个静态网站(第一次会生成一个public目录),这个静态文件可以直接访问。
c.将hexo生成的静态网站,提交(git commit)到github上。

2.使用hexo deploy部署到github

在配置文件_config.xml中以下改动:
deploy:
  type: git
  repo: git@github.com:gladysgong/gladysgong.github.io.git
  branch: master

3.安装扩展(不安装会出错)

$ npm install hexo-deployer-git --save

4.在命令行中执行

hexo d

六、申请域名https://sg.godaddy.com/zh/

可以申请的地方很多,我选择的是goDaddy,注册登录选择域名,支付宝付款,ok。

七、DNS解析

1.注册DNSpod
2.进入域名解析,输入你的域名,添加记录进行配置

这里写图片描述

3.记录类型

记录类型A代表指向github pages所提供的ip
记录类型CNAME代表指向username.github.io
用A类型的话,当github pages所提供的ip改变的话,你就需要来改变此处的ip,用CNAME则不需要。

4.创建CNAME

$ cd source
$ 创建CNAME
$ 内容为你的域名(比如我的:gongyanli.com)
$ commit & push

八、hexo部署后把原来的仓库覆盖

1.使用Hexo搭建博客需要区分【博客源代码】和【博客生成代码】

『博客源代码』:Hexo的源码,包括themes目录(博客模板),source目录(使用MarkDown写的博客)等

『博客生成代码』:执行hexo generate或者hexo server命令生成的代码,是Hexo自动生成的,在public目录里面。

『博客源代码』需要使用Git做版本管理,而『博客生成代码』需要使用Git部署。因此容易混淆。

2.方法1:使用2个不同的Git仓库分别管理『博客源代码』和『博客生成代码』

在GitHub新建一个仓库,然后将『博客源代码』同步到新项目。『博客生成代码』仍然由gladysgong/gladysgong.github.io部署。

3.方法2:使用同一个Git仓库的2个不同的Git分支分别管理『博客源代码』和『博客生成代码』

修改Hexo的配置文件_config.yml,将『博客生成代码』部署到gladysgong/gladysgong.github.io仓库的develop分支:
deploy:
    type: git
    branch: develop
    repo: https://github.com/gladysgong/gladysgong.github.com

九、bug

1.hexo报错:

YAMLException: cannot read a block mapping entry; a multi line key may not be an implicit key at line 5, column 1: # Site

YAMLException: cannot read a block mapping entry; a multi line key may not be an implicit key at line 13, column 1: # URL
配置文件:_config.yml  中 # Site #URL 属性设置后面的:需要有空格再填写内容!!!

2.npm各种提示权限不够,windows下即使开了administrator也提示权限不够

无奈,卸载npm,用淘宝npm镜像重装一个,安装后一路畅通。
安装方法:npm install -g cnpm --registry=https://registry.npm.taobao.org
参考链接:http://npm.taobao.org/
之后所用命令只需改为cnpm即可

3.hexo s运行时默认4000端口被占用

尝试过解除端口,无奈我的4000端口被360浏览器占用
hexo s -p 8022
重启一个8022或者任意一个没被占用的端口即可
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355