基于Github + Jekyll的免费建站教程

说一下写本文的初衷。之前购买了个人域名,一直绑定在网易的lofter上面,后来网易取消了这个功能。在没有购买服务器的情况下,自己的域名就一直停用了。

后来发现了github提供了这个功能,于是就开始研究。估计设计师们都会想要一个自己的独立域名来展示作品,无奈不懂代码所以搁浅了计划。所以希望这份教程对你们有帮助。

适用人群:

- 英文弱

- 代码弱

- 只想做个免费的个人展示页,不需要了解制作原理

- 当中转页面,介绍文字加几个链接跳转到其他平台

- 写博客,文字为主的那种

我遇到的问题:

- 不了解github

- 不懂git版本控制

- 有个人域名但是没解析到git

本文将不展开讲解:

- git基础知识原理

- 前端代码

- 域名注册

- Markdown语法等

// 以上内容请自行搜索并建议学习


解决方案:

(一)申请github账号

我是很久之前就注册的,还没注册过的用户请去github.com注册免费账户并用邮箱激活。

// 如果注册中遇到其他问题可以去自行搜一下教程

(二)挑选一个喜欢的模板

jekyllthemes在这里选一个喜欢的布局模板吧,点击homepage按钮后会跳转到相应的仓库

// 例如我选择了这个,然后点击homepage按钮

基于Github + Jekyll的免费建站教程_第1张图片

(三)fork到自己的库

仓库界面右上角找到fork按钮,点击它

基于Github + Jekyll的免费建站教程_第2张图片

(四)重命名库

// 会出现短暂的等待页面

成功建立分支后会出现以下页面,图片中绿色框圈出来的就是你的用户名,后面橙色框内的是原作者对这个仓库的命名。

基于Github + Jekyll的免费建站教程_第3张图片

现在我们来对这个仓库重新命名一下,点击右侧蓝色圈出来的Settings按钮来进行重命名为:

你的用户名(与绿框内id一致即可).github.io

// 举个例子:

// 例如我的id为:cxcf1212,所以我就需要改为cxcf1212.github.io

基于Github + Jekyll的免费建站教程_第4张图片

到此,你就可以通过 http://你的用户名.github.io 来访问自己的主页了。

// 例如我的主页就是:http://cxcf1212.github.io

这一步的原理简单来讲就是基于别人做好的网页模板上进行二次修改,改为自己想要的效果。fork就是基于原作者的项目上复制一个分支过来,可以让你任意修改,不会对原作者的项目产生任何影响。

(五)域名绑定

// 如果你没自己的独立域名,那就直接跳转到第七步骤。

如果你有自己的独立域名,那这一步将讲解如何绑定自己的域名。

首先绑定自己的域名,选择你的用户名.github.io这个仓库,打开设置项,找到GitHub Pages设置项,输入自己的域名地址。

基于Github + Jekyll的免费建站教程_第5张图片

// 还是拿我自己的域名为例yanglanlan.com,购买于万网,目前在阿里云。

然后去阿里云找到我旗下对应的这个域名,点击右侧解析按钮

新增两个解析,选择A记录,填写记录值:

192.30.252.153

192.30.252.154

// 其余保持默认就可以,更全面的介绍参考git官方帮助文档

设置好后效果图如下:

(六)验证生效

稍等片刻输入自己的域名,如果成功打开了刚才你设置的模板页面,那就表示成功绑定了你的域名。

(七)自定义内容与代码

回到自己的仓库

基于Github + Jekyll的免费建站教程_第6张图片

点击_config.yml页面后会出现以下页面

基于Github + Jekyll的免费建站教程_第7张图片

点击修改按钮,把里面对应的信息改为自己想展示的内容就可以了

//主题模板不同,此处的配置文件也不同,请根据实际情况操作

_posts是你存放更新文章的地方,把原作者的文章删除,就可以开始写自己的博客了

// 写文章不需要代码,直接用Markdown语法来写,不了解的自行搜索

(八)关于版本控制与文章更新

// 官方都有专门的工具,请自行根据自己用的电脑系统来选择,此处是mac上的界面

基于Github + Jekyll的免费建站教程_第8张图片

有代码基础的可以在本地修改好html页面传上去,每次更新的内容可以在左下角做个提示,方便后期的版本控制,此处不展开讲了。

补充一个我提交代码时出过的错:yml文件里面的所有参数值前面都有一个空格,注意不要误删。

后期修改如果出现错误,github会以邮件方式告诉你哪里出错,根据官方给的链接去做修改就可以。


其实有两种实现方法,本文介绍了其中一种,简单说一下另一种:

申请完账号直接新建一个仓库并重命名为你的用户名.github.io,下滑页面找到一个直接选择主题的选项点进去,选择好就可以用了。

但是感觉主题模板较少,故主要介绍了另外一种获取主题的方式。


附录1:模板对应的展示内容

// 附录2的内容,我直接搬运过来了

需要调整的文件:

_config.yml——–博客配置文件,需要根据自身的情况修改

_posts————-新文章扔进这里

_includes———-页眉页脚等模板放在这里,根据自身的情况修改

css—————-各种页面配置

assets————-favicon、头像、首页背景图在这里面,可以直接替换

CNAME————–自定义域名放在这里面

README.md———-Github说明,需要根据自身的情况修改

feed.xml———–订阅

_site————–自动生成的博客内容,index.html需要根据情况修改

以下文件不建议修改:

_layouts———–文章模板

index.html———首页模板

js—————–存放js文件

附录2:

// 我的一些参考链接

一步步在GitHub上创建博客主页-最新版

超级详细,但是代码部分偏多,当时看得我很痛苦,技术人员可参考,普通用户上手有点难度

Jekyll + Github Pages构建个人技术博客

这篇文章让我了解了哪些是可以自己修改的文档与路径

后记:

这篇文章零零碎碎写了大半天,写好了第一稿之后,生怕漏下什么步骤,于是又去注册了一个新的github账号,按照第一版写好的教程做了一遍,果然发现了被遗漏的两个小细节,庆幸自己去验证了一番。

// 我只是了解部分前端代码的小白,还在学习中,如有问题,欢迎指出,我会改正的。

基于Github + Jekyll的免费建站教程_第9张图片

你可能感兴趣的:(基于Github + Jekyll的免费建站教程)