使用 Jekyll 和 Github Pages 搭建个人博客

php基础

浏览数:253

2019-8-26

AD:资源代下载服务

Github Pages 提供免费无限流量的静态 HTML 网站托管,Jekyll 是基于 Ruby 的用于生成静态网站的程序,支持 Markdown 撰写内容,以及解析 Liquid 模板。

Github Pages 官方支持 Jekyll,只需上传 Jekyll 网站源文件到与 Github Pages 对应的代码仓库的对应分支即可自动生成网站,并可绑定自己的域名。

image.png

1. 创建 Github Pages 源代码仓库

在 Github 上新建一个 Repository ,命名为 username.github.io,其中 username 就是账户名。在 master 分支里放入静态 HTML
文件,通过网址 http://username.github.io 即可直接访问到。

2. 搭建本地测试环境

如果不搭建本地环境,更改任何代码、添加或编辑文章,只能通过 commit 和 push 上传到 Github 才能查看效果,速度很慢。

所以需要在本地搭建和Github Pages 相同的环境来进行测试。由于 Github 上不支持 Jekyll 插件(插件需要运行 Ruby 程序,这样 Github Pages 就成 Github Server 了)

3.搭建Jekyll 网站

整个网站结构

├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _data
|   └── members.yml
├── _site
├── img
└── index.html

很复杂看不懂是不是,不要紧,你只要记住其中几个OK了

  • _config.yml 全局配置文件
  • _posts 放置博客文章的文件夹
  • img 存放图片的文件夹

修改博客配置

来到你的仓库,找到_config.yml文件,这是网站的全局配置文件。修改配置文件,配置文件的内容:

基础设置

# Site settings
title: You Blog                     #你博客的标题
SEOTitle: 你的博客 | You Blog        #显示在浏览器上搜索的时候显示的标题
header-img: img/post-bg-rwd.jpg     #显示在首页的背景图片
email: You@gmail.com    
description: "You Blog"              #网站介绍
keyword: "keywords" #关键词
url: "https://username.github.io"          # 这个就是填写你的博客地址
baseurl: ""      # 这个我们不用填写

侧边栏

# Sidebar settings
sidebar: true                           # 是否开启侧边栏.
sidebar-about-description: ""  #人生格言
sidebar-avatar:xxx.JPG      # 你的个人头像

社交账号

展示你的其他社交平台

img

在下面你的社交账号的用户名就可以了,若没有可不用填

# SNS settings
RSS: false
weibo_username:     username
zhihu_username:     username
github_username:    username
facebook_username:  username
jianshu_username:   jianshu_id

好友

friends: [
    {
        title: "简书",
        href: "http://www.jianshu.com/u/jianshu_id"
    }
]

写文章

利用 Github网站 ,我们可以不用学习git,就可以轻松管理自己的博客

对于轻车熟路的程序猿来说,使用git管理会更加方便。。。

创建

文章统一放在网站根目录下的 _posts 的文件夹中。

格式

每一篇文章文件命名采用的是2017-02-04-Hello-2017.md时间+标题的形式,空格用-替换连接。

文件的格式是 .mdMarkDown 文件。

我们的博客文章格式采用是 MarkDown+ YAML 的方式。

YAML 就是我们配置 _config文件用的语言。

MarkDown 是一种轻量级的「标记语言」,很简单。花半个小时看一下就能熟练使用了

大概就是这么一个结构。

---
layout:     post                    # 使用的布局(不需要改)
title:      My First Post               # 标题 
subtitle:   Hello World, Hello Blog #副标题
date:       2017-02-06              # 时间
author:     Your  Name                      # 作者
header-img: img/post-bg-2015.jpg    #这篇文章标题背景图片
catalog: true                       # 是否归档
tags:                               #标签
    - 生活
---

## Hey
>这是我的第一篇博客。

进入你的博客主页,新的文章将会出现在你的主页上.

按格式创建文章后,提交保存。进入你的博客主页,新的文章将会出现在你的主页上.

到这里,恭喜你!你已经成功搭建了自己的个人博客!

image.png

作者:赵客缦胡缨v吴钩霜雪明