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 仓库内即可