文档章节

使用GitHub Pages搭建博客

新年
 新年
发布于 2015/08/31 23:44
字数 2237
阅读 3211
收藏 14

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

使用GitHub Pages搭建博客

14 Jan 2015使用GitHub Pages搭建博客

新的一年开始,一定要做点美好的事情。GitHub 是一个开源项目的托管网站,相信很多人都听过。在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流。

GitHub Pages 是Github为大家提供的一项服务,不仅能为托管的项目建立主页,还可以为我们建立个人博客。下面我就介绍个人博客是如何建立的,这里我们先假设大家已经了解Git一些基本使用,将来我也会发布另外一篇《Git基本安装和使用教程》

在使用GitHub Pages建立个人博客前,我们象征性地了解一下GitHub Pages建立的页面有哪些优点:

  • 极简的配置,轻量级系统,无需数据库

  • 使用标记语言,如Markdown

  • 使用GitHub托管服务,免费300MB空间

  • 可以绑定自己的域名

  • 新版的GitHub Pages还支持CDN服务,提升访问速度

要说缺点的话,其实也有一些:

  • 使用Jekyll 模板系统,属于静态页面。

  • 基于Git操作,需要有一定的动手能力。

  • 动态性不好,没有评论系统,不过可以自己配置Disqus 扩展。

总体来说,GitHub Pages搭建的博客使用起来是非常方便的。配置好了之后,只需要使用例如Markdown编写自己的博文,扔到指定的文件夹里即可发布了。完全不需要管理网站相关的事务,例如数据库、安全性等问题。

开始正题,下面的操作步骤参考自Github Pages的主页,再结合我的实际操作介绍各个步骤,并说一下可能遇到的问题和解决办法。

首先说明下面是以Window 7环境为例的,至于OS X,我操作的时候感觉还更方便一些。。另外我采用的是Git Bash终端来操作,这在任何环境下都是一样的。

#搭建步骤

1. 创建一个新仓库 (Create a repository)

如图所示,登录自己的GitHub主页,从右上角新建一个仓库,仓库名(Repository name)设置为你自己的用户名为前缀,例如我的是unclechen.github.io

在GitHub上,每个用户只允许拥有唯一的一个以自己的username为前缀,名为username.github.io的仓库。这个仓库也就是Github Pages说的个人/组织主页User or organization site),另一种则是项目仓库Project site)。因此当我再次想要建立一个同样名字的仓库时,上图中显示我的账号下已存在同名的仓库了。假如你没有建立过的话,是没有问题的。

2. 把仓库拉到本地 (Clone the repository)

使用任何一种方式将刚才建立的仓库拉取到本地。如上图所示,我喜欢使用Git Bash终端,在Git Bash中输入

git clone git@github.com:unclechen/unclechen.github.io.git

即可将刚才建立的仓库拉取到本地。

3. 建立index.html文件 (Hello World)

如上图所示,继续在Git Bash中输入

cd unclechen.github.io/

命令,进入刚才拉取的仓库(记住你应该将上面的unclechen改成自己的username)。然后在Git Bash中继续输入

echo "Hello World" > index.html

命令,在本地先创建index.html文件。

4. 提交到GitHub服务器 (Commit the file)

创建index.html文件后,和使用其他Git仓库的基本操作一样,需要提交修改到服务器才能生效。

所以我们需要依次输入三条Git命令,第一条是

git add .

第二条是

git commit -a -m "my fisrt blog"

第三条是

git push

这样就把刚才建立的index.html文件提交到了GitHub服务器上,如下图所示:

5. 搭建成功 (…and you’re done!)

好了!Push到GitHub之后,你就打开浏览器在地址栏输入http://username.github.io/来访问你的个人主页了,别忘了将username改成你自己的用户名。记住,页面初次打开可能会显示404错误。这没有关系,因为需要等待一些时间之后才会生效,我的博客是过了大概10分钟左右生效的吧。

如上图所示,页面显然有点朴素。没有关系,我们先将博客创建出来,再使用基于Jekyll 模板的一些主题,就可以渲染界面。我的博客用的主题是Hyde

至此,我们已经成功使用Github Pages搭建了个人博客(通过User or organization site方式)。至于如何使用Jekyll模板编写,并使用主题来渲染博客,以及绑定自己的域名等等,在我的另一篇博客中《使用Jekyll渲染GitHub Pages个人博客》将会介绍。

下面介绍的是另外一种使用GitHub Pages中的Project site建立博客的方法,有兴趣或者需要建立多个博客站点的朋友可以看一看。


另一种搭建方法(可搭建多个博客站点)

上面介绍了使用Github Pages中提到的个人/组织主页User or organization site)来搭建个人博客,前面说过这种名为username.github.io的仓库,每个GitHub账户下只能拥有一个,如果你需要建立多个博客站点的话多少有些不方便。

不过没有关系,除了通过建立名为username.github.io的仓库搭建个人博客以外,还可以通过建立普通名字project name的仓库来创建个人博客。这就是GitHub Pages上提到的项目仓库Project site)。

然而,使用项目仓库Project site)创建博客又分为两种场景,一种是通过新建一个仓库(Generate a site)来创建,另一种则是直接从已有的项目仓库(Start from scratch)来创建。但这两种形式本质上都是通过在一个普通的仓库下开辟一个没有父分支的gh-pages分支,将网页的代码在gh-pages分下进行管理,维护页面的。acth)。但是这两种形式本质上都是通过在一个普通的仓库下开辟一个没有父分支的gh-pages分支,将网页的代码在gh-pages分下进行管理,维护页面的。

  • 第一种场景:使用Generate a site搭建博客。

1. 创建新仓库(Create a repository)

这里我们就不再使用username.github.io的名字来建立仓库了,随便使用一个其他的名字,例如blog

2. 设置仓库的参数 (Repository Settings)

进入刚才建立的新仓库,在GitHub网页的右边面板中点击Settings。如下图所示:

3. 自动生成页面 (Automatic Generator)

在Settings界面下,选择下图所示的Automatic page generator按钮,在弹出的页面填写一些参数。再选择一个主题,可以自动生成一个页面。

4. 搭建完成 (…and you’re done!)

在浏览器中输入http://username.github.io/repository,即可访问页面。记住,你需要将前面的repository修改成你的项目名字(project name,例如我的是blog)。同样这需要等待一些时间之后才能生效。

至此,我们就成功使用Generate a site的形式,新建立一个仓库,搭建了自己的博客。如下所示,使用GitHub自动生成的页面比刚才的”Hello World”页面确实漂亮了不少。

  • 第二种场景:使用Start from scratch搭建博客。

1. 创建gh-pages分支 (Create a gh-pages branch)

进入已有仓库的主页,在分支下拉菜单中输入gh-pages后,按下回车键enter,自定建立一个没有父分支的gh-pages分支,如下图所示。

可选操作:创建gh-pages分支后,也可以将这个分支设为默认分支(default branch),将来方便我们自己管理。

2. 建立index.html文件 (Create an index file)

和上面介绍过的方法一样,在gh-pages分支下面建立一个index.html文件,输入Hello World

3. 提交修改 (Commit the file)

建立了index.html文件之后,将修改commit到服务器上。

这里的第2、3步都可以在GitHub网站的界面直接进行操作,或者和User or organization site方法的第3、4步一样,也可以使用Git Bash终端操作。

4. 搭建成功 (…and you’re done!)

等待片刻,博客页面生效。

至此,我们就成功使用Start from scratch的方式,通过在已有的仓库下建立没有父分支的gh-pages分支,搭建了自己的博客。


两种搭建方法的对比

  • User or organization site: 使用master分支管理博客站点,命名为username.github.io的形式,每个GItHub账户下只能拥有一个。

  • Project site: 采用一个没有父分支的gh-pages来管理博客站点,命名方式普通,每个GitHub账户下可以有多个。


本文转载自:http://unclechen.github.io/2015/01/14/%E4%BD%BF%E7%94%A8Github%20Pages%E6%90%AD%E5%BB%BA%E4%B8%AA...

新年
粉丝 7
博文 85
码字总数 48791
作品 0
海淀
程序员
私信 提问
TitanPages 更新,加入命令行手册

TitanPages是一个静态博客生成器,可以配合githubpages轻松的搭建自己的博客. 展示网站请转到: https://qibin0506.github.io/ 2016/7/2更新 修复生成摘要时保持markdown格式bug 加入-help参数...

亓斌哥哥
2016/07/03
552
0
你该有一个属于自己的个人博客了

个性与张扬 前言 周末用了不到一天时间搭建了属于自己的博客,欣喜之余,就想着提笔将个人博客搭建的详细过程记录下来,以便分享给众读者使用; 搭建之前,笔者看过其他博客的搭建教程,上面...

Jack_lin
2016/08/27
0
0
TitanPages 2016/7/8更新升级

TitanPages 更新了,TitanPages是一个静态博客生成器,可以配合githubpages轻松的搭建自己的博客。 本次更新: 修复生成目录标题错误问题 加入目录排序功能,目录按照文章创建的时间排序 下载...

亓斌哥哥
2016/07/08
386
0
我的个人网站—红色石头的机器学习之路

偶然的想法,想搭建一个个人网站。所以就花了一个星期的时间,利用Hexo+Next+GitHub Pages搭建了自己的第一个个人网站:红色石头的机器学习之路 由于没有网站搭建经验,所以大部分是照着模板...

红色石头
2018/03/17
0
0
Hexo相关配置和使用

前言 GitPages+Hexo搭建个人博客这篇文章已经介绍了GitHubPages创建博客和Hexo的安装,下面开始介绍Hexo使用方法吧。 配置_config.yml文件 目录 网站配置 URL配置 目录配置 部署配置 配置REA...

WenBo丨星空灬
2018/01/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 我的视频网站vip账号和我厚脸皮的朋友们

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @Cobbage :分享小海的单曲《衡山路(2016现场版)》: 《衡山路(2016现场版)》- 小海 手机党少年们想听歌,请使劲儿戳(这里) @FalconChe...

小小编辑
今天
6
0
Spring Cloud Alibaba 实战(十二) - Nacos配置管理

> 本章主要内容是:使用Nacos管理配置以及实现配置管理的原因,配置如何管理以及动态刷新和最佳实现总结,最后是Nacos配置刷新原理解读 该技术类似于Spring Cloud Config 1 配置管理的意义 项目...

JavaEdge
今天
9
0
面试官问你编码相关的面试题,把这篇甩给他就完事!

前情回顾:Java中一个字符占两字节 但为什么new String("字").getBytes().length 返回3个字节 今天主要聊一聊: 字节 字符 字符集 编码 字符编码 Java 内码和外码 Unicode 字节 例如 :00001...

gzc426
今天
10
0
写的简单sh脚本2

#!/bin/bashexport LANG="en_US.UTF-8"#chmod +x filename 记得给文件加可执行权限#./vsimstart.sh#启动vsim项目echo "start vism"#207------------------------------assets=vsim-a......

hexiaoming123
昨天
7
0
java基础(1)变量和常量

概要和总结: 数据类型图: 基本数据类型:只有基本功能-----保存数据 (4类8种)byte-short-int-long-float-double-char-boolean 引用数据类型:有更多功能,保存数据,处理数据...

煌sir
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部