github博客模板 github国内版
很多朋友对于github博客模板和github国内版不太懂,今天就由小编来为大家分享,希望可以帮助到大家,下面一起来看看吧!
如何在github上搭建个人博客
一、为什么在GitHub上托管个人博客
为什么在GitHub上托管博客,这个问题可以分两步来问:
首先,为什么可以在GitHub上托管博客?
GitHub是一个基于git的版本托管服务网站,上面聚集着几乎全世界的程序大牛,还有着大量的牛逼开源项目。而项目一旦成长壮大,一个简单的名称和一段描述很可能就无法满足作者与读者的需要。此时,GitHub Pages就应运而生,它允许用户用更具描述性的自定义页面代替源码列表。同时,用户也可以利用其作为个人或组织主页,将静态网页托管其上。
那么,在有着WordPress等等大量的开源博客系统的情况下,为什么选择在GitHub上托管博客呢?
对程序猿来说无比亲切,光是看起来感觉就很牛逼的"Git驱动式博客开发与发布流程"。
超级容易,5分钟包学包会的发布方式。
静态页面,建立简单,几乎没有安全性隐患,当然这也是缺点之一,静态页面无法做到太过复杂的交互设计和网站结构。不过作为一个简单的个人博客,也不太会有这样的需求
免费而可靠
更加详细的内容可以参见这里 todo: Jekyll+ GitHub Pages的优点与缺点
话不多说,现在就来试试看。
<p id="002"></p>
二、10分钟快速搭建一个博客原型
首先确认:
拥有一个GitHub账号
已经安装 Git,(在Windows下,个人推荐直接安装 GitExtensions,有中文界面,并且集成了git+ putty+ kDiff,比较省心一点啦)
1.建立一个项目
先在GitHub创建一个项目,名字随意,尽量全部小写字母,避免随后会碰到的URL冲突问题
本地运行Git,随意选个目录,将刚才创建的项目clone下来
<!-- lang: bash-->
cd/d/
git clone
cd blogdemo
<br/>
<br/>
2.建立配置文件_config.yml
注意:之后建立的所有文档务必使用UTF-8无 BOM的编码保存
在项目的根目录下新建文件 _config.yml,填写 baseurl:/blogdemo, blogdemo是你的项目名称,这一行内容规定了整个网站的根路径,稍后会详细解释这样做的意义。
<br/>
<br/>
3.建立主页
在根目录下新建文件 index.html,内容像这样:
<!-- lang: html-->
---
title: Hello, My Blog
---
{{ page.title}}
先不用急着奇怪为什么一个html文件会出现"{}"这样的标签,这里使用的是 Liquid模板语言,{{ page.title}}表示“本页面的标题”,更详细的介绍我们以后再讲,不妨这样理解:
<!-- lang: python-->
#--- begin of page's head
title="Hello, My Blog"
#--- end of page's head
print(page.title)
OK,那么博客主页设计完毕!(别吵...我答应过你要10分钟内搭建完成的...先弄个毛胚房意思意思,美化啊功能啊什么的晚点再说)
<br/>
<br/>
4.发布到GitHub
回到git bash,检查一下 git status,确认 _config.yml与 index.html无误后 add,commit,保持使用Git的良好习惯,记得添加提交描述
然后推送到GitHub,这里注意,因为我们使用的是GitHub Pages中的 Project Pages, GitHub仅会将分支 gh-pages下的内容进行自动生成操作,所以本地的 master分支应推送到远端的 gh-pages分支
<!-- lang: bash-->
git push origin master:gh-pages
稍微等待一下,最多10分钟(通常不用那么久啦),访问 yourname.github.com/blogdemo
,(其中 yourname
是你的GitHub帐户名,blogdemo则是你的项目名)就会看见你的博客主页(确实很丑...而且完全不像一个博客的样子,不过别急,慢慢来比较
快~)
另外,如果不幸发现你的中文页面出现了乱码的情况,别着急,还是该死的UTF-8问题,后面我们会一劳永逸的解决他的,暂时先手动调整一下浏览器的编码。
<br/>
<br/>
5.在_posts内撰写文章,并在首页加入文章列表
在这段时间里,我们继续为你的博客添砖加瓦,让他拥有最基本的文章阅读功能,另外不断F5页面的同时也可以关注一下自己在GitHub注册时所用的邮箱,如果之前推送的内容有误的话,GitHub将以邮件形式提醒你生成失败。
回到项目根目录, mkdir _posts新建一个目录,看名字也知道啦,这里存放你所有的文章。
进入_posts目录,新建一篇文章。注意默认的文件名格式是 year-month-day-postTitle这样。比如 2013-03-23-my_first_article.md,尽量避免空格或者其他乱七八糟的字符,这个文件名将作为URL的生成依据。文件名的格式可以通过修改 _config.yml中的 permalink属性而改变,默认值为 date,也就是我们刚刚创建的文件的样子,具体的规则可以看这里,后面我们也会讲到。
如果你发现了我刚才创建的文件后缀名是.md,熟悉GitHub或者StackOverFlow的朋友应该知道Markdown格式,推荐使用GitHub托管博客的原因之一也正是如此,我们可以在大部分时候避开恼人的HTML,转而使用更加直观的Markdown语法。如果不熟悉也没关系,可以参见这份Markdown语法说明,应该说是相当易学,并且在熟悉之后非常易用的。
回到主题,打开刚才创建的文件,输入如下内容:
<!-- lang: html-->
---
title:我的第一篇文章
---
#{{ page.title}}
##目录
+ [第一部分](#partI)
+ [第二部分](#partII)
+ [第三部分](#partIII)
----------------------------------
##第一部分<p id="partI"></p>
这里是第一部分的内容
----------------------------------
##第二部分<p id="partII"></p>
这里是第二部分的内容
----------------------------------
##第三部分<p id="partIII"></p>
这里是第三部分的内容
{{ page.date|date_to_string}}
这段内容中使用了最常用的几种Markdown语法,比如使用#,##表示 HTML中的<h1></h1>,<h2></h2>。使用[text](link)创建超链接,使用连续多个-创建水平线(注意:不包括最上端包围title所使用的横线,那里表示一个页面的“头属性”),等等。更多详细的语法可以在之前提到的页面查询,这里不再赘述,总之,这是一种更加贴近真实写作的语法,推荐大家尝试。
啊对了,最后面的那个{{ page.date|date_to_string}}是指显示本页的日期属性,并且转换为可读的字符串形式。同样也是Liquid语法。
OK,那么第一篇文章也写好了,再把最新的repo推送到github,稍等片刻,就可以...等下,忘记给文章加上入口的链接了。
Sorry啦,重新打开我们的 index.html文件,添加内容,变成下面这样:
<!-- lang: html-->
---
title: My Blog
---
{{ page.title}}
{% for post in site.posts%}
{{ post.date|date_to_string}}<a href='{{ site.baseurl}}{{ post.url}}'>{{ post.title}}</a>
{% endfor%}
唔...都是Liquid的内容,简单解释一下,Liquid标记最主要分为两种,一种是直接输出变量内容,像这样:
{{ page.title}}
另一种则是逻辑命令形式的,像这样:
{% for x in y%}...{% endfor%}
而刚才写进主页的内容,就是遍历所有post文件,然后逐一显示在页面上,这里需要注意的一点就是在创建文章的超链接时,除了 post.url之外,也要注意在前面加上site.url
,原因前面也有提到过,我们正在创建的是 Project Pages
类型的网站,其最终生成的网址根目录是:username.github.com/projectname,而 post.url
生成的超链接仅仅会自动加上 username.github.com/这样的前缀。
现在检查一下更改的所有内容,确认不要犯下愚蠢的错误,比如把"."打成"。"或者单词拼错之类的,提交并推送!
当当!如果一切顺利,就能看到你的首页外加文章列表闪亮登场。
<br/>
<br/>
6.增加模板套装_layouts
文章进行到这里,或许开头承诺的10分钟已经超过不少了...很抱歉我欺骗了你,不过至少我们进展很快~接下来——如果你仍有兴趣的话,让我们为网站增加一些统一性的风格设置。
回到项目根目录,新建文件夹 _layouts,顾名思义,“布局”是也。在 _layouts中新建一个最基本的布局文件,姑且命名为default.html好了:
<!-- lang: html-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>{{ page.title}}</title>
</head>
<body>
{{ content}}
</body>
</html>
诺,首先解决了UTF-8的编码问题,随后指定了正文内容的位置,当然在这里只是一个最简单的内容,在body内仅有一个{{ content}}标签,你可以根据自己的喜好对页面进行任何改动,只要记得保留这个内容标签在你想要的位置就好。
然后我们修改index.html和刚写完的那篇文章,只要在头属性上加一句就好:
<!-- lang: html-->
---
title: xxoo
layout: default.html
---
我们当然还可以把这个结构变得更灵活一些,比如继续新增两个模板分别叫做l_post.html与
l_index.html,他们首先引用default.html,但在其基础上做出一定的修改。然后首页使用l_index模板,而所有的post文件
则使用l_post模板,等等等等,请随意发挥。但始终记得加上{{ content}}标签
再次推送到服务端,查看效果。
至少这一点我没骗你,要发布最新的更改实在是太简单了,只需要一次push而已。
那么,基本的项目结构如下:
.
|-- _config.yml
|-- _includes
|-- _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
这幅图来自于:Yes We Jekyll,原谅我的懒惰,我实在不擅长排版...
怎么用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 page搭建博客
1.先去github官网申请一个账号,然后创建一个仓库:
2.进入仓库的右上角的Setting里,找到这里,改为master分支:
3.然后先保存
4.随便选择一个主题后退出来
多了一个文件,相当于是仓库默认首页index.html,之后把这个文件删了也没有影响,这一步主要是和github没更新以前的gh-pages分支的作用相同.
5.在本地建一个文件夹:
6.打开github客户端,登陆自己的账号
7.进入命令行
8.进入github的命令行:
首先要将云端的仓库地址克隆下来:
9.先在命令行里进入本地所建的文件夹:
10.开始克隆地址:
11.在本地文件夹发现多出这么些文件(部分文件可能隐藏,可以将他们调出来)
12.将博客的代码(网上有博客模板,自己不想写,就去下载一些现成的带有完整源码的博客代码)放进这里:
13.将代码上传:
依次在命令行输入:(注意命令行当前所在的位置必须是在博客代码所在目录)代码如下:
黑体部分全部要替换为自己的路径或者仓库名:
cd F:\blog\xiaohe
git add.(有一个点)
git commit-m'demo'
git pull origin master(注意是master分支,不是以前的gh-pages分支)
git push origin master
(以后博客页面的跟新以及代码的上传,都可以在本地文件夹xiaohe里操作,然后通过上面相同的几行代码执行即可。)
具体代码执行结果如下截图所示:
14.此时,所有工作就已经完成,可以到仓库的Setting里查看到自己博客的地址:
文章到此结束,如果本次分享的github博客模板和github国内版的问题解决了您的问题,那么我们由衷的感到高兴!