使用 Jekyll + Github Pages 搭建个人网站

83364896 2019-06-21

前段时间,朋友问我如何高大上地展现个人作品。既然要求高大上,无外乎易传播、体验好、摒除纸媒,那就以线上的方式将自己的作品丢给面试官呗(朋友在求职)。我向她推荐了 github pages,一来无需购买服务器及域名,二则因为按照她的需求一个静态站点足矣。本文算是为朋友量身打造,比较适合小白食用,介绍了如何使用静态站点生成工具 jekyll 及 github 服务器搭建个人网站。大神请飘过但不反对批评指正,万分感谢。


一、创建 github 账号

若尚未申请 github 账号,请移驾此处进行注册。

github 用户名是可以修改的:

使用 Jekyll + Github Pages 搭建个人网站

若执行上述操作后发现用户名仍未变更,其原因多半是该用户名已被占用(提示信息不明显,以致很多人不明修改失败的原因)。

使用 Jekyll + Github Pages 搭建个人网站

二、新建仓库

使用 github 托管个人网站时,所对应仓库的命名是有规则的: [github 用户名].github.io 。例如本人的用户名为 sunmengyuan,那么我的个人网站所对应的仓库名为 sunmengyuan.github.io。

下面,开始创建新仓库:

使用 Jekyll + Github Pages 搭建个人网站

最后,将项目克隆至本地:

使用 Jekyll + Github Pages 搭建个人网站

三、搭建个人网站

github 有许多模板主题可供选择,相关代码可自动生成:

使用 Jekyll + Github Pages 搭建个人网站

但本人更倾向于自行搭建模板:一是因为与其改别人的不如自己写;二是为了令自己的网站更符合个人审美;三是因为作为一枚傲娇的前端工程师套用别人的模板实在说不过去。

下面来一句广告语,欢迎参观呆恋小喵的后花园,你可能觉得它不够漂亮,但是我喜欢。该网站使用 jekyll 框架搭建,图片资源使用七牛托管。为何要将资源托管呢?因为 github pages 的免费空间有限啊,图片辣么大不是么。


* 关于 jekyll

jekyll 是一种静态站点生成工具,它可以使发表文章的过程简化为添加并撰写一篇 markdown 文档。

下面以本人的个人网站为例,简单介绍 jekyll 的使用方法,更多内容请参阅官方文档

目录结构如下:_layouts 内的文件为骨架模板;_posts 内的 markdown 文件会转化为我们所需发表的文章;assets 含一些静态资源文件;views 包含站点内的所有页面;_config.yml 为配置文件。

使用 Jekyll + Github Pages 搭建个人网站

* 关于 jekyll 开发环境

为何需要开启 jekyll 服务?一是使 jekyll 可自动编译文件从而生成静态站点;二是方便在开发环境预览修改效果。

# 启动 jekyll 服务
jekyll server

注意事项:

  • jekyll 服务的启动应在含 _config.yml 文件的目录下。
  • 启动 jekyll 服务时若提示含未安装插件,请查看 _config.yml 文件中的 gems 配置项并将所需插件一一安装。

不介意各位下载本人的原创模板做实验,将它拷贝至你的 [github 用户名].github.io 仓库并提交。不了解 git 命令行的同学请查阅教程

现在,访问 [github 用户名].github.io/garden/ 会有惊喜嗷~

恭喜你可以愉快的撰写文档了!今后,增删文章只需在 _posts 文件夹内增删对应的 markdown 文件,若想在本地预览效果,只需启动 jekyll 服务并访问 http://localhost:4000/garden/


作者:呆恋小喵

我的后花园:https://sunmengyuan.github.io...

我的 github:https://github.com/sunmengyuan

原文链接:https://sunmengyuan.github.io...

相关推荐

icbm / 0评论 2014-03-08