利用GitHub搭建静态网站

关于GitHub Page

• github 官方提供了github page功能用于生成项目的预览效果，利用这一点，可以来搭建相对简单的个人博客网站，或者仅用于浏览的静态网站。
• 使用github page搭建网站可用的两种选择：Hexo或jekyll，二者都可用来生成将markdown文档生成静态网页，简直是博客生成神器。

静态网站框架：hexo和jekyll

• hexo

hexo依赖于Node.js和Git，这对从事前端工作的开发者来说，上手特别容易，官方安装及使用教程也很详尽。官方文档

• jekyll

jekyll是基于Ruby的，因此在安装jekyll之前还需要先安装Ruby，官方安装使用文档，当然，也有很多博客教程，百度即有。
jekyll是github官方推荐的网站框架。

• 两者区别:

我用的windows，jekyll的安装相对麻烦，针对不同平台的环境要求不太一样，而hexo只需要安装node和git就可以了。
在编译效果上，jekyll 只需要直接上传原博文到 github， 就能直接生成博客，也可以用在线编辑器处理，而hexo 是先本地生成 html 再上传。

• 更多的关于二者区别的对比，可以参考：静态博客框架之Hexo & Jekyll

用hexo搭建简单博客站

1. 安装

Hexo依赖于Node.js,Git，所以在安装Hexo之前，需要先安装Node及Git

• Node: 官方下载地址
• Git: 官方下载地址

# 安装hexo
npm install -g hexo-cli

2. 初始化网站目录

hexo init <folder>
cd <folder>
npm install

• 目录生成后结果：

.
├── _config.yml  		// 网站的 配置 信息，您可以在此配置大部分的参数。
├── package.json			// 应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，可自由移除。
├── scaffolds			// 模版 文件夹。
├── source			// 资源文件夹是存放用户资源的地方。
|   ├── _drafts
|   └── _posts
└── themes   // 主题 文件夹。Hexo 会根据主题来生成静态页面。

• scaffolds: Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。
• _config.yml : 更多配置参数

3. 新建博文

new : 新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

hexo new test

• 通过new可以新建一篇test.md文章，并默认存放在\source\_posts目录下

4. 生成静态文件 generate

hexo generate 
# 简写
hexo g
# 参数
-d, --deploy  :文件生成后立即部署网站
-w, --watch : 监视文件变动

5. 本地预览

hexo server  //启动本地网络服务

• 默认通过localhost:4000即可访问生成好的博客

6. 部署线上

• A： 配置部署信息:设置静态网站分支（一般默认是直接在master分支上做静态网站部署，但为了安全起见，另设分支较好）

# _config.yml
# 设置网站URL
## 如果你的网站是在一个子目录下，则设置url为'http://yoursite.com/child' ，根目录为 '/child/'

url: https://yourgithub.github.io/myblog
root: /myblog/

• B：设置部署地址:这里用git,repo：仓库地址，type：部署类型，branch：部署分支

deploy:
  type: git
  repo: https://github.com/yourGitHub/myblog.git
  branch: gh-pages 

• C：设置git page:在github上对应仓库中，setting-GitHub Pages-选择分支为gh-pages,然后save（会提示你Your site is published at https://yourgithub.github.io/myblog/），hexo d部署后，通过设置的地址即可访问。

常见问题

1、 部署后访问网页没有样式，资源404

• 原因：在_config.yml中设置url和root有误，重设后，再次部署刷新即可。

2 、关于username.github.io 域名访问问题

• github所提供的gitpage 功能允许用户使用 username.github.io域名直接访问用户的某一静态网站，且在名为username.github.io的仓库下，默认用master分支作为git page的生成分支，所以才会有在username.github.io仓库下，选择git page默认分支的选项被禁用的情况。【这里的username指代用户的github 名】