Github Pages 搭建笔记
记录 GitHub Page 搭建过程
Github Pages
前往 GitHub 并且创建一个新的 repository,命名规则是:username.github.io(username 是 Github 用户名,蓝色线部分相同)
blog-github-create
clone 项目到本地
git clone https://github.com/username/username.github.io
制作 Hello World 页面
提交到 GitHub,需要配置 SSH 免密码登录
cd username.github.io
echo "Hello World" > index.html
访问: https://username (GitHub 用户名) .github.io ,可以看见个人主页.
git add --all
git commit -m "Initial commit"
git push -u origin master
Jekyll
Jekyll 是一个简单的免费的 Blog 生成工具,类似 WordPress.但是和 WordPress 又有很大的不同,原因是 jekyll 只是一个生成静态网页的工具,不需要数据库支持.但是可以配合第三方服务, 例如 Disqus.最关键的是 jekyll 可以免费部署在 Github 上,而且可以绑定自己的域名.
安装过程
1. 安装 Ruby
Mac 有默认的 Ruby 环境,根据如下命令确认是否正常工作及版本
ruby -v
2. 安装 Jekyll
sudo gem install jekyll bundler
3. 使用模板安装直接进入下一节,如果不使用模板,可以进行如下方法安装
注:path/username.github.io 为 GitHub 本地目录
jekyll new my-awesome-site
cd my-awesome-site
cp -R * path/username.github.io/
4. 开启 Jekyll 环境
在 path/username.github.io 目录下,执行
bundle exec jekyll serve
5. 本地调试
通过 http://localhost:4000 ,访问页面.
blog-jekyll-new
Jekyll 模板
替换 Jekyll 模板,根据知乎黄玄回答找到 startbootstrap-clean-blog-jekyll 模板 BlackrockDigital,其他模板根据说明进行安装.
效果页面可以访问: Clean Blog
blog-github-clean-blog
安装过程
安装过程可以使用两种方式.
命令方式:详见 startbootstrap-clean-blog-jekyll 的 GitHub 页面
覆盖方式:本文采用方式,详细说明如下
下载或者 Clone 项目 startbootstrap-clean-blog-jekyll 到本地,覆盖到 GitHub.io 的本地工程.
修改 _config.yml 文件,下述为需要修改部分,其他保持不变即可.
参数 说明
title 名称
email 通讯方式
description 描述
github_username GitHub 用户名
baserul 二级路径,可以为''
url GitHub.io 的 URL 路径
用过命令
bundle exec jekyll serve
启动本地环境,通过 http://localhost:4000 访问页面.变动提交到 GitHub 后,可以在 https://username (GitHub 用户名) .github.io 看到修改变化.
创建文档
在_post 文件下,新建 md 文件,文件书写格式如下
jekyll 可以自动检测并识别文档,并添加到博客首页中.
---
layout: post
title: "标题"
subtitle: "副标题"
date: 2018-01-08 00:00:01
background: '/img/posts/01.jpg'
---
域名
GitHub 部分配置
在 GitHub 工程根目录添加 CNAME 文件,如下图所示.域名部分仅为域名名称,不添加 http 等关键字.
blog-github-cname
域名提供商部分
本文使用的是阿里云提供的云解析 DNS,添加记录如下图所示.
blog-aliyun-cname
记录 A 部分,添加 IP 地址:192.30.252.153 和 192.30.252.154.(IP 地址为 GitHub 提供,详见 setting-up-an-apex-domain )
记录 CNAME 部分,添加 username(GitHub 用户名) .github.io ,主机记录为 www.
10 分钟后访问域名,查看是否生效.
七牛云
Jekyll 的图片可以使用相对路径,图片放在 img 文件夹下,在 markdown 文本中,通过如下方式显示图片.
![a](/img/some - name.jpg)
同样可以使用七牛云存储,存放图片,个人博客的访问量一般在免费额度范围内.结合图床工具,可以方便的把本地图片上传到七牛云中.
申请账号后,在个人中心 - 密钥管理中,查看 Access Key 和 Secret Key
blog-qiniu-new
申请存储空间,本文存储空间为 mweb(即为 BucketName),申请成功后管理界面如下:
blog-qiniu-bucket
区域分华东,华北,华南和北美,需要记录,后续使用.
测试域名需要记录,如果配置了 CDN 加速可以使用正式域名.
MWeb
MWeb 是一款 Markdown 笔记工具,主页: http://zh.mweb.im .如果使用其他 Markdown 工具,可以使用 极简图床 或者类似工具上传图片.
在 MWeb-Preferences-Publishing 中配置七牛插件,把本地文件上传到七牛中.
blog-qiniu-mweb
填写说明如下:
填写项 填写内容
Name 个人喜好填写
API URL 本文以华北为例,其他参看备注
Bucket Name 存储空间名称
Access Key 上一小节提到
Secret Key 上一小节提到
Image URL Prefix 测试域名或者正式域名地址
Image URL Suffix 可以不填写
注: 存储区域上传域名
配置成功后,通过工具栏按钮选取本地文件,生成 Markdown 图片标签的同时上传到七牛云.
参考资源
GitHub Page
有哪些简洁明快的 Jekyll 模板
用 Jekyll 搭建的 Github Pages 个人博客
Jekyll Page
startbootstrap-clean-blog-jekyll
Github Pages + Jekyll 独立博客一小时快速搭建 & 上线指南
来源: http://www.jianshu.com/p/ec7953b9e5ab