github网站模板的简单介绍

本文目录一览：

• 1、怎样做一个漂亮的 GitHub Pages 首页
• 2、如何利用github搭建个人网站
• 3、如何创建github.io页面
• 4、如何使用Github Pages免费搭建网站
• 5、怎么用github搭建个人博客
• 6、github 怎么搭建博客

怎样做一个漂亮的 GitHub Pages 首页

百度一下会有很多的帖子讲如何搭建自己的Github Pages。

而如何做出“漂亮的”Github Pages，新手的话，从挑一个诚心如意的模板开始把。

关于搭建：

pchou.info 的页面

这是作者关于搭建GP的最新贴，很精练。

其中Jekyll是Github默认的模板系统，所以也推荐选择这个。

如果在搭建Jekyll中出现问题，可以参考Github的帮助页：

Using Jekyll with Pages

关于模版：

Jekyll Themes

这里有一些不错的模版，可以去看看，然后fork下来，解压到自己的项目文件夹中，commit到你的github上就好了。然后根据自己的需要再进行修改。

Ps. 有些主题需要额外安装一些工具，例如sass。但是直接在项目文件夹中gem install sass就好了，比较简单。如果你下载了模版使用中有问题，可以看一下模版文件夹下的README.md

关于更多：

使用Github Pages建独立博客

这个帖子的后半部分（从Jekyll模版系统开始），比较详细的介绍了Jekyll，并且推荐了一些关于如何加入“评论”，“代码高亮”的功能的插件。

其他链接：

如何搭建一个独立博客——简明Github Pages与Hexo教程

我的博客：

Dream my dream

就是用上述办法搭建的，可以供大家参考。

如何利用github搭建个人网站

如果你现在还没有自己个人博客网站的话，那么我觉得你看完本篇博客后，强烈的建议你去折腾折腾下，搞个自己的，让自己也能够体验装 X 的感觉。

要想用搭建一个个人博客网站，首先你得有一个域名，这样别人才可以通过域名访问，其次你还要一个空间来存放你的页面。

空间 空间有免费的空间，也有收费的空间。免费的当然就不够稳定了，收费的就很贵了，终究是很不爽，有没有什么地方是既免费又稳定的空间呢？有，Github 。它允许上传个人网站项目并自定义你的域名，而且又有稳定的服务，实在是不能够在好了。

下面就一起跟着我来一步一步的利用 Github 搭建个人博客网站吧！

1. 拥有一个域名

这个步骤我就不详述了。

举例：

打开腾讯云官网

搜索你想要的域名，下单买一个

2. 拥有一个 Github账号

互联网崇尚自由与分享。Github 是一个全世界程序员聚集的地方，大家相互分享自己写的代码，提升别人，也提升自己。大家都在为着开源社区努力着。因为我从开源项目中学到很多知识，所以我也非常愿意分享我的所见所学所得，我的 Github 主页： （欢迎 follow 和对我的项目给个 star 或者 fork 我的项目一起来和我完善项目）

如果还没有 Github 账号的话你就先去注册一个吧，有的话，直接登录就行，后面的操作都要用到 Github 的。

3. Github 上新建个人网站项目

登录 GitHub 之后，在页面右上角点击 + 加号按钮，点击 New repository。

由于我们是新建一个个人网站项目，所有仓库的名称需要安装 GitHub 个人网站项目的规定来写。

规则就是：

YOUR-GITHUB-USERNAME.github.io

比如我的 GitHub 用户名是 zhisheng17，那我就要填写 zhisheng17.github.io。然后选择公开模式，接着点击创建仓库按钮。

创建成功之后，进入了项目主页面。点击设置按钮。

进入之后，滚动页面到下方。点击页面自动生成器按钮。

点击右下方继续去布局按钮。

选择一个模板，点击发布页面按钮。

如何创建github.io页面

github pages有两类：

你如果起个名为chendell.github.io的repository, 那么他的master分支上的文件就能在chendell.github.io的根目录访问到。

而如果是其他的repositories，比如这个repository名字叫node，那么建一个gh-pages分支，该分支下的文件就能在chendell.github.io/node/下访问到。

1. 门槛：需要理解 Github 的工作方式，熟悉 Github 客户端，熟悉 Html 与 CSS；

2. 不妨一边开始写静态模板，一边了解 Jekyll 布局所用到的 Liquid Tag，磨刀不误砍柴工；

3. Jekyll 博客，可以看作是一套文件结构，通过 Jekyll 程序编译成静态网站。如果不熟悉命令，完全可以不安装 Jekyll，只需按照要求的格式创建文件后再上传到 Github，然后访问主页就可以了，因为 Github Pages 便是由 Jekyll 驱动的，或者直接使用 Jekyll-Bootstrap 的结构；

4. Jekyll 的文件结构大概可以这样分：配置文件 _config.yml，布局文件 _layouts，模块文件 _includes，插件 _plugin，文章 _posts，其他文件（不以下划线开头的文件及文件夹都会完整的拷贝到生成的静态网站中，比如 CSS 文件、图片等），以及将会生成的静态站 _site；

5. Jekyll 命令很简单，先使用 cd 命令进入目标文件夹，然后输入 jekyll --server 生成网站，浏览器中输入 0.0.0.0:4000 访问生成的静态网站，jekyll --server --auto 命令将开启实时更新，修改文件后在浏览器中刷新就可看到效果，对本地调试很有帮助；

6. Github Pages 禁用所有插件，需要使用自定义插件，只能上传生成的网站文件 _site，或者试试 这个办法 ;

7. 想写草稿不想被编译？创建一个以下划线开头文件夹就会被忽略，例如在 _posts 下创建 _drafts 存储草稿；

8. 默认的 Markdown 引擎问题很多，建议替换成 RDiscount。

如何使用Github Pages免费搭建网站

1. 什么是Github

Github 官方主页

简单说，Github是一个基于git的社会化代码分享社区。

你可以在Github上创建免费的远程仓库(remote repository)，分享你的代码，当然也可以关注其他人的代码

你也可以建立公司账户，创建私有的远程仓库，与开发团队共同协作开发

想要使用Github Pages，你首先要创建一个Github账户

2. 谁在使用Github免费托管网站 ？

Bootstrap

NODESCHOOL

WebComponents

......

3. Github pages的两种类型

3.1 Project Pages(Repository Pages)

URL for Project Pages.png

在Github上我们可以给不同的project分别创建相应的repository，对于某一个repository，你可以在其中创建一个小网站，向人们展示你的项目，提供项目的相关信息等等。这就是所谓的project pages。例如上面说的bootstrap.com

在一个repo的gh-pages分支中的所有文件将出现在github.io上。

Project Pages How-To

创建一个gh-pages分支

编辑相应的html/css/js文件，用于展示在github.io上

push gh-pages分支到Github上面

//下面是一些会用到的git command

git checkout -b gh-pages //create a gh-pages branch

git branch //check all branches and which branch you are currently working on

git push origin gh-pages //push gh-pages branch to github

git checkout --orphan go-pages //you can create a new empty branch

git push origin :gh-pages //delete a remote branch

最简单地方法是从Github上直接自动生成页面，还可以选择模板。移步这里

3.2 User Pages

URL for User Pages

每一个Github账户只能有一个User Pages，主要用来展示一个账户中最最重要的项目。

命名为username.github.io的repo中的内容将会出现在username.github.io上。

User Pages How-To

创建一个CNAME文件，包含你的个性域名，放在source文件夹下

example.com

把你个性域名的A record指向Github DNS

192.30.252.153

192.30.252.154

创建一个新的repo，名字必须是username.github.io

创建新的repo

创建你的网站，包括：HTML文件，CSS文件...

my_website_folder

|- index.html

|- main.css

|- bootstrap.js

|...

创建本地git repo

~ $ cd my_website_folder //进入你的网站所在的文件夹

~ $ git init

~ $ git add .

~ $ git commit -m "Initial commit"

添加remote repo到本地，push到Github

~ $ git remote add origin

~ $ git remote -v //可以查看是否添加成功，及其详细信息

~ $ git push origin master

设置个性域名

如果想要搭建博客，下面列了一些非常流行的framework，可自动生成静态页面：

Octopress (基于Ruby)

Jekyll (基于Ruby) - 通过Github Pages和Jekyll搭建个人博客

Hexo (基于NodeJS) - 通过Github Pages和Hexo搭建个人博客

Pelican (基于Python)

4. Github Pages的限制(Limitations)

Github Pages只是静态网站(HTML, CSS, JavaScript)

没有服务端，所以不支持服务端的语言(没有ruby, php, python)

怎么用github搭建个人博客

GitHub 是一个用于使用Git版本控制系统的项目的基于互联网的存取服务,GitHub于2008年2月运行。在2010年6月，GitHub宣布它现在已经提供可1百万项目，可以说非常强大。

Github虽然是一个代码仓库，但是Github还免费为大家提供一个免费开源Github Pages空间，利用这个空间可以搭建轻量级的博客系统，绑定自己的域名，存放一些图片和文件等等。

于是我这几天都在研究怎么用Github Pages搭建一个个人博客，可惜由于对代码和git命令不熟悉，磕磕碰碰，在网上搜索Github Pages免费空间使用教程，比较少，而且不全面，或者说不适合像我这样从未接触过Github的人，有几次的按照网上的教程来做都失败了，主要是好步骤不知道如何操作。

中途也想到过放弃Github Pages，因为这样一个“如此麻烦”的空间即使搞定估计用途也不大。最后终于在大牛的指导和自己的摸索下建成了。并且Github是老牌开源的空间——稳定、不会随便删除用户数据，且没有外链流量限制。所以也是独一无二的了，就是操作麻烦点，新手不建议用。

一、申请Github Pages账号和创建项目

1、打开空间地址：，点击“sign UP”注册一个账号。

2、登录后，点击右上角新建一个项目，如下图：

3、创建完成后，会给出来该项目的代码。这里暂时不用管。

二、本地连接和管理Git项目

1、首先下载Git工具，这里为大家提供一个安装包RailsInstaller，里面已经包括了Rails 3.0.3 、Ruby 1.8.7、SQLite 3.7.3 、Git 1.7.3.1 、DevKit，这些工具都是你深入学习git所必备的。

2、在RailsInstaller中运行git bash，然后依次执行下列命令，配置你的git，代码如下：

git config --global user.name "用户名"

git config --global user.email "邮箱"

git config --global credential.helper cache

git config --global credential.helper 'cache --timeout=3600'

3、执行代码效果如下图：

4、创建一个SSH Keys，输入下列语句，看看本地有没有ssh keys。

cd ~/.ssh

5、显示如下图表示没有。

6、接下来创建SSH Keys，执行下列代码。

ssh-keygen -t rsa -C "邮箱"

7、然后会要你选择保存的位置，直接回车即可，如下图：

8、接下来还要输入密码，如下图：

9、完成后，你就可以在你刚才保存的文件路径中看到一个id_rsa.pub文件了，公钥就在这里。

三、添加SSH Keys成功连接Github

1、用记事本打开id_rsa.pub，复制里面的东西，粘贴到Github项目的SSH Keys中，如下图

2、输入以下代码，测试是否可以成功连接。

ssh -T git@github.com

3、第一次连接还要输入Yes，确认一下，如下图

4、最后出现如下提示就表示连接成功了。

四、Github Pages搭建个人博客空间

1、在Github创建一个个人空间，有两种方法，一种纯代码手工创建。这里要涉及的专业知识就比较多了，有兴趣的朋友可以深入研究一下。如下图：

2、第二次方法就是，利用Github Pages自动生成网站页面。选择右上角的account setting（账户设置）后选择repositories（信息库），在右侧选择你的应用，然后选择setting（设置）如下图：

3、选择中间的“自动生成页面”，如下图：

4、接下来选择页面模板，如下图：

5、完成后，10分钟后就自动生成个人主页了。

github 怎么搭建博客

在github pages网站下用jekyll制作博客教程

在我动手用jekyll部署我的博客之前，一直使用godaddy上面的wordpress主页来部署我的博客kresnik.co。WordPress当然有很多的优点，在我看来我用WordPress主要是为了

方便清晰的文件结构

可以随意选用的各种模板和插件

相对便宜的部署价格

因为这些优点，所以我想我还会在WordPress官网上继续保留我的免费博客。

既然这样，看官想必想问为什么要换成jekyll来重新部署博客？我简单的总结了一下：

流行又简洁的MarkDown写作语法

轻量级的网站结构，不再有动态网站的沉重

方便的和github pages结合，不仅免费，而且方便

所以对比与WordPress的沉重，jekyll让你回归到创作本身，当然如果你喜欢折腾，jekyll也绝对不会让你失望。推荐下面几个站点亮一下。

rusty shutter

Rasmus Andersson

安装流程

要用github pages，首先要在github中建立一个基于你的用户名的repository: 比如说我，就要建立名为kresnikwang.github.io的repo。在以前的github版本中还需要在后台开启pages的功能，现在系统检测到这样的repo名称之后，会在setting中自动开启GitHub Pages的功能，如下图： 这样之后你就可以把这个repo克隆到本地随意进行修改了，在这个里面上传的网页就是你的网站的内容了，可以上传一个index.html试一试，这就是你的网站主页了。 关于GiuHub的使用，可以看几个比较好的入门教程：GitHub

之后我们就要在本地部署jekyll，jekyll的原理很简单。这是一个已经合成好的静态html网站结构，你用这个结构在username,文件夹里面粘帖好所有文件。再把更新完的本地repo推送到GitHub的master branch里面，你的网站就更新建设完毕了。 首先你需要ruby来使用本地jekyll。Mac和Linux可以用Terminal配合yum或者brew这样的包管理器很方便的安装ruby。Windows下更是方便，可以直接中集成好的Ruby installer来进行安装，文章里的就是传送门。

安装完ruby，之后就是要安装RubyGems，gem是一个ruby的包管理系统，可以用gem很方便的在本地安装ruby应用。

安装方法

//在RubyGems官网上下载压缩包，解压到你的本地任意位置

//在Terminal中

cd yourpath to RubyGems //你解压的位置

ruby setup.rb

有了gem之后安装jekyll就很容易了，其实用过nodejs和npm的同学应该很熟悉这样的包安装，真是这个世界手残脑残们的救星。。。。。（楼主不自觉的摸了摸自己快残了的手） 安装jekyll，有了gem，直接在Terminal里面输入以下代码：

$ gem install jekyll

好了，现在你的电脑已经准备完毕了。如果你是想自己捣鼓，可以根据这样的目录结构在你的文件夹下建立以下目录结构：

├── _config.yml

├── _drafts

| ├── begin-with-the-crazy-ideas.textile

| └── on-simplicity-in-technology.markdown

├── _includes

| ├── footer.html

| └── header.html

├── _layouts

| ├── default.html

| └── post.html

├── _posts

| ├── 2007-10-29-why-every-programmer-should-play-nethack.textile

| └── 2009-04-26-barcamp-boston-4-roundup.textile

├── _site

└── index.html

你可以一个个依次建立起来，然后在自己编写一个你想要的博客。

如果你只是个普通用户，只是想要一个模板然后开始写自己的博客。那就很容易了，有几个可以简单开始的模板。

poole/poole · GitHub极简风格的模板

Jekyll Themes jekyll的模板网站，可以找到各式各样你喜欢的模板。

下载完了模板，可以吧里面的内容解压到你自己的网站目录底下。这时候你可以测试一下：

$ cd you website path //cd到你的网站目录下

$ jekyll serve

//一个开发服务器将会运行在

//你就能在本地服务器看到你用模板搭建的网站了

这时候可以看一下jekyll的设置，让你把模板变成你自己个性化的内容。在网站根目录下面找到_config.yml,这里会有几个比较关键的设置： 里面的permalink 就是你博客文章的目录结构，可以用pretty来简单的设置成日期+文章标题.html，也可以用自己喜欢的结构来设置。 记得把encoding 设置成utf-8，这样有利于中英文双语的写作和阅读。

到这里你就可以开始写博客了，所有的文章直接放在_posts文件夹下面，格式就是我们之前提到的markdown文件，默认的格式是.md和.markdown文件。每篇文章的开始处需要使用yml格式来写明这篇文章的简单介绍，格式如下：

---

author: kresnikwang

comments: true

date: 2015-04-28 17:42:32+00:00

layout: post

title: PHP, Angular JS Development|My Export Quote|农产品出口工具开发

categories:

- Works

- Tech

tags:

- bootstrap

- javascript

- php

- AngularJS

---

layout就是post，让jekyll知道你这是一篇post，很直观。需要注意的是里面的date，必须按照yml的语法来写，否则就会出现编译错误。可以只用YYYY-MM-DD来显示日期，也可以像我一样在后面加上 HH:MM:SS+00:00 来表示更具体的时间。

到此为止可以开始尽情的写博客了，用GitHub软件同步到你的repository里面，网站上面就可以进行正常的显示了。如果说要添加一下有用的extra功能的话，评论和相关文章这两个功能比较多人会关注。 评论我们可以用Disqus国内应该也有类似的网站，到Disqus注册一个账号，选择添加评论区域到自己的网页，你将会的得到类似的代码：

!-- Add Disqus comments. --

div id="disqus_thread"/div

script type="text/javascript"

/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

var disqus_shortname = 'USERNAME'; // required: replace example with your forum shortname

var disqus_identifier = "/works/tech/2016/06/07/%E5%9C%A8github%20pages%E7%BD%91%E7%AB%99%E4%B8%8B%E7%94%A8jekyll%E5%88%B6%E4%BD%9C%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B.html";

/* * * DON'T EDIT BELOW THIS LINE * * */

(function() {

var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;

dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

})();

/script

noscriptPlease enable JavaScript to view the a href=""comments powered by Disqus./a/noscript

a href="" class="dsq-brlink"comments powered by span class="logo-disqus"Disqus/span/a

根据不同的模板，把代码添加到_post/post.html或者_include/post.html里你的文章底下，那当这篇文章被访问时，下方就会有评论区了

相关文章的功能也比较好做，jekyll本来就集成了site.related_posts的功能，自动会寻找相关内容的文章，在你的post代码下面融入以下代码：

aside class="related"

h2Related Posts/h2

ul class="related-posts"

li

h3

a href=""

kresnik.co博客搬家告示

smalltime datetime="2015-06-05T00:00:00+00:00"05 Jun 2015/time/small

/a

/h3

/li

li

h3

a href=""

Javascript Include Html Page By Jquery

smalltime datetime="2015-06-02T18:45:42+00:00"02 Jun 2015/time/small

/a

/h3

/li

li

h3

a href=""

Github设置，强制使用"https://" 来代替 "git://"

smalltime datetime="2015-05-31T05:03:36+00:00"31 May 2015/time/small

/a

/h3

/li

/ul

/aside

你每篇文章下面就会有三个相关文章的链接了。

这篇教程就到这里，有机会我想再写写liquid语法制作jekyll模板的内容和从wordpress导入文章到jekyll来的方法。喜欢能有些用处，感谢。

附上出处链接：