恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
基于Github + Jekyll的免费建站教程
0.0°
2021-06-15 原创文章 教程 举报 1604 8 2 1

适合设计师的Github + Jekyll的免费建站教程

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

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




适用人群:

  • 代码弱
  • 只想做个免费的个人展示页,不需要了解制作原理
  • 当中转页面,介绍文字加几个链接跳转到其他平台
  • 写博客,文字为主的那种


我遇到的问题:

 ○ 不了解github 

○ 不懂git版本控制

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


本文将不展开讲解:

 ○ git基础知识原理

○ 前端代码

○ 域名注册

○ Markdown语法等

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




解决方案:


(一)申请github账号

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

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


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

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


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


(三)fork到自己的库

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


(四)重命名库

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

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


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

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

// 举个例子:

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


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

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


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


(五)域名绑定

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

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

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

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

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

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

192.30.252.153

192.30.252.154

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


设置好后效果图如下:



(六)验证生效

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


(七)自定义内容与代码

回到自己的仓库


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


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

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


_posts 是你存放更新文章的地方,把原作者的文章删除,就可以开始写自己的博客了
// 写文章不需要代码,直接用Markdown语法来写,不了解的自行搜索


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

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


有代码基础的可以在本地修改好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账号,按照第一版写好的教程做了一遍,果然发现了被遗漏的两个小细节,庆幸自己去验证了一番。

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



Powered by Froala Editor

更新:2021-06-15

收藏

8人已收藏

杨懒懒

日拱一卒,功不唐捐。

  • 7

    作品

  • 30

    粉丝

  • 490

    关注

  • 假期小练习(ae c4d)
  • 咪咕爱看  UI/UE设计
  • c4d基础动效练习
  • 适合设计师的.9切图方法
相关标签
githubJekyll建站

    猜你喜欢

      2021-06-15 原创文章 教程 举报 1604 8 2 1

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

      0.0°

      你确定要举报基于Github + Jekyll的免费建站教程

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年06月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      8
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录