平台主张以最少的人工成本
获得最大的外链发布提权效果!

在GitHub上打造专属个人页面:轻松搭建个人博客教程

在GitHub上打造专属个人页面:轻松搭建个人博客教程

如何在GitHub上创建个人博客
一、为何选择GitHub来存放个人博客
探讨为何要在GitHub上存放博客,我们可以分为两个层面:
首先,为何可以在GitHub上存放博客?
GitHub,一个基于git的版本管理平台,汇集了全球的程序高手及众多优质的开源项目。随着项目的壮大,原始的名称和描述可能无法满足作者与读者的需求。这时,GitHub Pages便应运而生,它允许用户使用更具描述性的自定义页面替代源码列表。同时,用户也可以将其作为个人或组织的主页,将静态网页托管在平台上。
那么,在存在众多开源博客系统如WordPress的情况下,为何选择在GitHub上存放博客呢?
对于程序员来说,GitHub充满亲切感,仅是“Git驱动式博客开发与发布流程”的名称就令人心生敬畏。
操作简单,仅需5分钟即可学会发布。
静态页面,建立简单,几乎没有安全风险,但这也是其缺点之一,静态页面无法实现复杂的交互设计和网站结构。然而,对于一个简单的个人博客而言,这样的需求并不多。
免费且可靠
更详细的内容请参考这里 todo: Jekyll+ GitHub Pages的优点与缺点
不多说,让我们开始尝试吧。

二、10分钟快速搭建博客原型
首先确认:
拥有一个GitHub账号
已安装Git,(在Windows下,建议直接安装GitExtensions,具有中文界面,并集成了git+ putty+ kDiff,方便许多)
1.创建项目
在GitHub上创建一个项目,名称随意,尽量使用全部小写字母,避免随后可能出现的URL冲突问题
在本地运行Git,选择一个目录,将刚才创建的项目克隆下来

cd/d/
git clone
cd blogdemo

2.创建配置文件_config.yml
注意:之后创建的所有文档务必使用UTF-8无 BOM的编码保存
在项目根目录下新建文件 _config.yml,填写 baseurl:/blogdemo, blogdemo是你的项目名称,这一行内容规定了整个网站的根路径,稍后会详细解释这样做的意义。

3.创建主页
在根目录下新建文件 index.html,内容如下:


title: Hello, My Blog

{{ page.title}}
先不用急着奇怪为什么一个html文件会出现"{}"这样的标签,这里使用的是 Liquid模板语言,{{ page.title}}表示“本页面的标题”,更详细的介绍我们以后再讲,不妨这样理解:

--- begin of page's head

title="Hello, My Blog"

--- end of page's head

print(page.title)
好了,博客主页设计完成了!(别吵...我答应过你要10分钟内搭建完成的...先弄个毛坯房意思意思,美化啊功能啊什么的晚点再说)

4.发布到GitHub
回到git bash,检查一下 git status,确认 _config.yml与 index.html无误后 add,commit,保持使用Git的良好习惯,记得添加提交描述
然后推送到GitHub,这里注意,因为我们使用的是GitHub Pages中的 Project Pages,GitHub仅会将分支 gh-pages下的内容进行自动生成操作,所以本地的 master分支应推送到远端的 gh-pages分支

git push origin master:gh-pages
稍等片刻,最多10分钟(通常不用那么久啦),访问 yourname.github.com/blogdemo
,(其中 yourname是你的GitHub帐户名,blogdemo则是你的项目名)就会看见你的博客主页(确实很丑...而且完全不像一个博客的样子,不过别急,慢慢来比较快~)
另外,如果不幸发现你的中文页面出现了乱码的情况,别着急,还是UTF-8的问题,后面我们会一劳永逸地解决这个问题,暂时先手动调整一下浏览器的编码。

5.在_posts内撰写文章,并在首页加入文章列表
在这段时间里,我们继续为你的博客添砖加瓦,让它拥有基本的文章阅读功能,同时不断刷新页面,关注一下自己在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语法说明,应该说是相当易学,并且在熟悉之后非常易用。
回到主题,打开刚才创建的文件,输入如下内容:


title:我的第一篇文章

{{ page.title}}

目录


第一部分

这里是第一部分的内容

第二部分

此处为第二部分的内容

第三部分

此处为第三部分的内容
{{ page.date|date_to_string}}
本段内容展示了Markdown语法的常用形式,例如利用#、##来表示HTML中的

。通过text生成超链接,以及通过连续多个-来创建水平线(注意:不包括包围title的横线,那里表示页面的“头属性”),等等。更多详细的语法信息可参考之前提到的页面,此处不再详述。总之,这是一种更贴近真实写作的语法,建议大家尝试使用。
对了,最后的那个{{ page.date|date_to_string}}表示显示本页的日期属性,并将其转换为可读的字符串形式。同样,这也是Liquid语法。
好的,第一篇文章已经完成,接下来将最新的repo推送到github,稍等片刻,就可以...等等,我忘记给文章添加入口链接了。
抱歉,重新打开我们的index.html文件,添加内容,如下所示:


title: My Blog

{{ page.title}}
{% for post in site.posts%}
{{ post.date|date_to_string}}{{ post.title}}
{% 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/这样的前缀。
现在检查一下所有更改的内容,确认没有犯下愚蠢的错误,比如把"."打成"。"或者单词拼写错误等,提交并推送!
当当!如果一切顺利,就能看到首页和文章列表亮丽登场。

6.添加模板套装_layouts
文章进行到这里,或许承诺的10分钟已经过去了...很抱歉我误导了你,但至少我们进展迅速~接下来——如果你还有兴趣的话,让我们为网站添加一些统一的风格设置。
回到项目根目录,新建文件夹 _layouts,顾名思义,“布局”是也。在 _layouts中新建一个最基本的布局文件,暂且命名为default.html好了:

{{ page.title}}

{{ content}}

看,首先解决了UTF-8的编码问题,随后指定了正文内容的位置,当然在这里只是一个最简单的内容,在body内仅有一个{{ content}}标签,你可以根据自己的喜好对页面进行任何改动,只要记得保留这个内容标签在你想要的位置就好。
然后我们修改index.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账号名保持一致,例如“linuxidc.github.io”。在创建仓库的过程中,你需要填写基本信息,然后点击“创建仓库”。创建完成后,你的GitHub账号下就会有一个与账号名称相匹配的页面仓库。
进入项目设置页面:在新创建的页面仓库中,你需要进行一些基本的项目设置。由于这个项目专门用于放置页面内容,因此你需要确保设置为“master”分支。不过,如果你的页面内容位于某个特定的仓库中,你需要将页面设置为“gh-pages”分支。关于如何设置页面分支的具体方法,请参阅本文末尾的参考资料。
进入自动页面生成器:在项目设置页面的底部,找到并点击“默认分支(master)”这一项。在这里,你可以根据需要调整页面生成的相关设置。一般来说,你不需要对默认分支进行任何操作。

步入自动页面生成界面:于项目配置页面的末端,搜寻并点击“预设分支(master)”这一选项。在此,你可根据实际需求调整页面生成相关配置。通常情况下,你无需对预设分支进行改动。

执行上述操作后,你便可以着手为你的个人网站撰写内容了。借助GitHub Pages,你可以轻松地托管及推广你的个人网站。请记得定期审查并刷新你的页面内容,以确保为访客提供最前沿的信息。
在着手创建页面之前,建议你先掌握一些基础的网页设计知识,诸如HTML、CSS等。这将助力你更高效地运用GitHub Pages功能,打造出既美观又实用的个人网站。
此外,你还可以考虑运用一些流行的网页编辑工具,例如Visual Studio Code、Sublime Text等,以便于编写和管理页面内容。这些工具提供了丰富的功能和插件支持,能显著提升你的开发效率。
最终,别忘了将你的个人网站推广给更多人。通过社交媒体、论坛等渠道,让更多人知晓你的个人网站,进而吸引更多访客。预祝你在构建个人网站的征途中取得辉煌成就!

以上所转载内容均来自于网络,不为其真实性负责,只为传播网络信息为目的,非商业用途,如有异议请及时联系btr2020@163.com,本人将予以删除。速发外链网 » 在GitHub上打造专属个人页面:轻松搭建个人博客教程

分享到: 生成海报