您现在的位置:首页 >> 前端 >> 内容

Jekyll+GitHub搭建个人博客-不限流/免费/静态网站

时间:2017/3/10 9:14:00 点击:

  核心提示:Jekyll+GitHub搭建个人博客-不限流/免费/静态网站。参考了其他前辈的博客 ,搭建的过程并不算难 (调整自己喜欢的风格太难了) .虽然是静态网站 ,但是可以嵌入第三方API ,也是可以作为一...

Jekyll+GitHub搭建个人博客-不限流/免费/静态网站。参考了其他前辈的博客 ,搭建的过程并不算难 (调整自己喜欢的风格太难了) .虽然是静态网站 ,但是可以嵌入第三方API ,也是可以作为一个简单的博客网使用的 .熟悉前端的话 ,这一个静态网站也能玩的很高科技。

效果 : 阿东的GitPage 源码 : Anddd7/Anddd7.github.io 参考自 renyuanz/leonids

Jekyll - 静态网页模板

Jekyll ,使用模板语言书写静态页面 ,然后由Jekyll程序转换为Html/CSS/JavaScript .

模板语言中可以使用变量 ,也可以定义和引入其他变量 ,可以方便的处理的嵌套/复用 . 模板可以是.md/.html文件 页面/数据分离

GitHub - 自动支持Jekyll

GitHub Pages ,在仓库中新建一个 'username'.github.io 的仓库 ,然后上传Jekyll的模板文件(不用上传编译后的)

然后访问 https://’username’.github.io ,Github会自动解析出静态网页并发布上去 .

开始

安装环境

安装Ruby + DevKit 在Ruby环境中安装Jekyll

PS:Windows上安装

运行Jekyll

//cd到DevKit目录下
cd ../DevKit 
//新建仓库
jekyll new Pages 
cd Pages
//启动仓库
jekyll serve 

编辑

jekyllthemes.org上提供了很多模板 ,可以选中一个你喜欢的 ,然后下载源码进行自定义修改.

草稿 _drafts : 这里面的文章不会直接发布 可复用组件 _includes
可以是页面/按钮/组件 ,通过{% include footer.html %}引入 提供了{% if post.link %}这样的语句 ,读取变量: 判断分支/赋值/拼接url 布局 _layouts : 页面的主要结构 文章 _posts 样式的管理 _sass 其他 : 会发布到 _site下 ,可以用来汇总图片/CSS/JS _site : 编译后的生产代码不用上传 ,由Github生成发布

发布

将上述部分直接上传到 'username'.github.io 仓库内即可

Tags:JE EK KY YL 
作者:网络 来源:阿东的学习历程