关于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
# 安装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 名】