前言:
什么是github pages?
github pages最原始的用意是用来展示你的repo,当然你可以用来写博客、开车放资源、写个看起来超厉害的静态网页给妹子(前提有个妹子愿意看…)。本质上就是给你提供了一个服务器支持,你可以在上面搭一些静态的网页,别太大就好。
github pages官方介绍
github pages的优点?
- 首先免费啊!安全啊!
- 全是静态文件,访问速度快;
- 博客内容可以轻松打包、转移、发布到其它平台;
在开始之前需要准备的几项工作:
- 安装node.js、npm;
- 注册github账号;
- 安装git for windows。
hexo
hexo是一个博客框架,能自动将支持类型的文件转换成静态网页。如果是每写完一篇文章都要自己手动更新的页面的话,是人都会被逼疯的,所以hexo大法好。
hexo依赖少(仅依赖node.js),安装方便,主题华丽;
假设你已经完成了上面的一项准备工作,那么打开git bash或者cmd
使用npm(node.js package manager)安装hexo:npm install -g hexo
初始化
切换到一个目录下,这个目录用于存放代码,比如我的是d:/hexocd d:/hexo
然后hexo init
hexo会自动在这个目录下,安放代码
如果你是之前就安装过node.js的话,这里可能会报错提示node.js版本太低,将node.js更新到最新再来执行一遍就可以了。
启动服务hexo g (或者 hexo generate)#生成静态页面至public目录hexo s(或者 hexo server)#开启本地预览服务,默认端口4000
然后在浏览器上访问本地地址:
http://localhost:4000
初始的页面大概是这个样子,嗯,有点丑orz
我们在之后对页面进行调整的时候可以先在本地修改满意后再往上推。
在github上创建仓库
新建一个{yourname}.github.io的仓库 ,
这里的{yourname}代表你的github用户名,比如说你的用户名是xiaoming,这里就换成xiaoming.github.io。名字错了无效。
需要注意的地方:
- 注册的邮箱需要验证一下;
- 仓库名需要是username.github.io,其中username是你的用户名;
- 仓库创建成功不会立即生效,需要过一段时间。
配置ssh key
将代码提交上github必须拥有权限才行,使用ssh key能帮助我们解决本地和服务器的连接权限问题。cd ~/. ssh 检查本机已存在的ssh密钥
如果提示:No such file or directory 说明你是第一次使用gitssh-keygen -t rsa -C "邮件地址"
之后的信息可以全部用默认的,连续3次回车就行。
然后再.ssh目录中打开id_rsa.pub文件,vim id_rsa.pub
复制里面的全部内容
打开你的github主页,点击头像旁的下三角,->settings->SSH and GPG keys->New SSH key
输入title,再把之前复制的id_rsa.pub内容粘贴到key中,点击Add SSH key
测试是否成功ssh -T git@github.com // 注意邮箱地址不用改
看到提示Are you sure you want to continue connecting (yes/no)?,输入yes,接下来显示:
Hi liuxianan! You’ve successfully authenticated, but GitHub does not provide shell access.
表示ssh已经配置成功,
接着还需要配置:git config --global user.name "taojunyu"// 你的github用户名,非昵称git config --global user.email "xxx@qq.com"// 填写你的github注册邮箱
以上完成之后,我们就可以来写自己的博客
在之前hexo初始化的目录下我们可以找到两种_config.yml文件,一个是根目录下的全局的_config.yml,一个是各个theme下的;
修改主题
我们可以在官方主题中找自己喜欢的,也可以在github里找
比如要用以下主题
首先将主题克隆到本地:
cd d:/hexogit clone https://github.com/Haojen/hexo-theme-Claudia themes/Claudia
主题会被下载到这个目录下
在根目录的_config.yml里,找到theme: landscape,改成theme: Claudia,然后hexo g来生成。
如果出现一些莫名其妙的问题,可以先执行hexo clean来清理一下public的内容,然后再来重新生成和发布。
在各个theme下的_config.yml可以更改更具体的页面内容。
_config.yml有几点需要注意的:
- 冒号后面必须有一个空格,否则可能会出问题。
- theme中的_config.yml中使用回车也可能被坑。
增加文章hexo new "postName" #新建文章
然后用编辑器打开编辑就好
在将自己的主页修改好之后,就需要上传到github上。
配置_config.yml中有关deploy的部分:deploy:
type: git
repository: git@github.com:taojunyu/taojunyu.github.io.git
branch: master
注意:deploy:
type: github
repository: https://github.com/liuxianan/liuxianan.github.io.git
branch: master
这种hexo2.x的写法,现在是不可以的
然后直接执行hexo d的话,可能会报以下错误:
Deployer not found: github 或者 Deployer not found: git
可以再安装一个包来解决:
npm install hexo-deployer-git –save
安装的时候可能会报一个权限不够的错误,这时切换到root/administrator用户再次执行命令就可以了。
然后hexo d
没有报错就ok了
这时你可以通过{yourname}.github.io访问你的主页了。
再接着你还觉得{yourname}.github.io太low,可以自己去买个域名,然后绑定到github上。
绑定域名
先在你的github项目的更目录下创建一个CNAME无后缀的文件,里面填写你的域名。
ping一下你的{yourname}.github.io,查看ip。
然后到你域名提供商上去配置DNS解析
CNAME类型,主机记录为www,记录值填{yourname}.github.io
A类型,主机记录为@,记录值填之前的ip值
然后就等吧,这个不是立刻生效的,大概15分钟这样就没问题了。
你这时可以通过自己的域名来访问自己的主页了
常用指令
- hexo new “postName” #新建文章
- hexo new page “pageName” #新建页面
- hexo generate #生成静态页面至public目录
- hexo server #开启预览访问端口(默认端口4000,’ctrl + c’关闭server)
- hexo deploy #部署到GitHub
- hexo help # 查看帮助
- hexo version #查看Hexo的版本
缩写:
- hexo n == hexo new
- hexo g == hexo generate
- hexo s == hexo server
- hexo d == hexo deploy
组合命令:
- hexo s -g #生成并本地预览
- hexo d -g #生成并上传