使用github静态页面和jekyll引擎搭建个人博客

Posted by Kele Blog on January 29, 2018

使用github静态页面和jekyll引擎搭建个人博客

初步认识github的静态页面

官方文档←点击
大体意思就是github提供了一个静态页面功能,你不需要服务器,你可以使用jekyll主题来发布你的网站,需要注意的是github提供的是静态页面功能,所以是不支持使用动态网站语言的,例如php,ruby,python
github静态页面有这么几个特点:

  1. 域名是{你的用户名}.github.io
  2. 仓库的大小显示是1GB,理论上来说是够用的
  3. 每个月的带宽流量显示是100GB,理论上来说也是够用的

第一步:创建github账号,初始化仓库

  • 第一步 2018-01-29-13-15-01-2018129
    如图所示,输入username,email,password进行注册,username的选定一定要慎重,因为username关乎你的博客域名(虽然你可以通过后期绑定域名修改),但是一定要慎重啊。:smile:

  • 第二步 2018-01-29-13-18-10-2018129 创建一个新的仓库(New repositorie),然后 在新建仓库名称的时候一定要注意吗,你的仓库名称一定要是你的{用户名}.github.io,然后你才可以通过github创建你的静态页面,然后通过http://username.github.io (这里的username用自己的代替)进行访问
    2018-01-29-13-20-53-2018129
    我这里已经创建了一个,所以会报错,假如你的没有什么问题,点击最后的create repositorie绿色按钮就可以了

第二步安装git

因为我们使用了github的静态页面功能,所以本质上我们网站是一个git的版本库,所以我们需要安装git工具,同时配置环境变量
安装
配置具体百度即可
git的基本使用方法

第三步选择jekyll的主题

  • jekyll主题网站←点我
    选择一个自己喜欢的主题,点击进入之后,点击demo按钮进行预览,如果喜欢的话,点击download按钮进行下载(在和demo同级的页面中),下载之后进行解压。
  • 然后同时我们把github上的仓库clone下来,在github上点击你的仓库,然后那个https开头的地址记录下来2018-01-29-13-45-32-2018129

下面默认配置好环境变量
在终端输入下面命令

git clone https://github.com/kele1997/temp.git   #以你的实际地址为准

这时候你会发现你的电脑上出现了一个新的文件夹temp(以实际为准)

  • 然后回到上面,把解压后的文件全部复制到你的文件夹下面,然后在cmd中输入,
    git add *
    git commit -m "注释"
    git push
    

    然后会提示登录github,输入账号和密码就可以了,将修改推送到github之后,等待一会,就可以了就行访问了,访问{username}.github.io,就可以看到你的网站了

第四步jekyll 目录简介

目录部分可能不一样,正常现象

├─css   #网站页面的css文件
├─fonts #网站的字体文件
├─img  #自己创建的,用来保存博客上的图片
│  └─in-post
│      ├─post-alitrip-pd
│      └─post-js-version
├─js  #网站里面使用的javascript文件
├─less
├─portfolio 
│  ├─css
│  ├─fonts
│  ├─images
│  └─js
├─pwa 
│  └─icons
├─_drafts # 草稿,不进行发布
├─_includes # 网页的页首和页脚 
├─_layouts # 博客使用的模板样式
└─_posts # 博客文章内容 ****
|    ├─data
|    └─img
|-_config.yml # 配置文件

第五步jekyll 配置文件的修改

修改_config文件,通常来说config 文件有很详细的简介

# Developer's Note: This is a sample _config.yml file offered with
# jekyll-theme-prologue for your convenience. To use it, move it to your
# project's root directory. Please note that the following lines are
# NECESSARY for Prologue to work correctly:
#
# theme: jekyll-theme-prologue
# collections: [sections]
#
# They activate the theme and tell Jekyll to find your homepage content
# in /_sections. Note where "sections" starts with an underscore
# and where it doesn't. The social settings will make links to
# Twitter, etc., but only if you give the URL.
#
# Also, be sure to customize url and baseurl for your site.
#
# ---------------------------------------------------------------
#
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely edit after that. If you find
# yourself editing this file very often, consider using Jekyll's data files
# feature for the data you need to update frequently.
#
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.

# Site settings
# These are used to personalize your new site. If you look in the HTML files,
# you will see them accessed via Kele Blog, a15318648415@126.com, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via .
title: Your awesome title   #网站的标题
subtitle: Your awesome subtitle # 网站的子标题
description: >- # this means to ignore newlines until "baseurl:" #个人描述
  This is the demo site for a Jekyll theme version of
  HTML5 UP's sleek, responsive site template Prologue.
author: Your Incredible Name # 个人网站的主人
email: your-email@example.com # 个人邮箱
avatar: assets/images/avatar.jpg #头像?

# You'll want to customize url and baseurl for your own site:
baseurl: "/jekyll-theme-prologue" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site

# Social settings   #各种社交账号的网址
facebook_url:
github_url:
googleplus_url:
instagram_url:
linkedin_url:
pinterest_url:
slack_url:
twitter_url:

# Google Analytics Tracking ID goes here:    # google网站分析的id
google_analytics:

# The following settings are NECESSARY for the Prologue theme to run:
theme: jekyll-theme-prologue
collections: [sections]

参考描述配置即可

第六步使用markdown写博客

jekyll使用markdown进行写作
markdown 语法中文简体版
文章要保存成markdown格式,后缀是markdonw或者是md
文章开头要有一个yaml头,要有特定的格式

---
layout: post
title: "标题"
author: "作者"
date: "日期"
---

注意保留空格

文章的内容使用markdown 语法进行书写即可
之后使用Git命令进行发布

git add 文件名 #尽可能使用Tab键自动补全
git commit -m "注释"
git push 

然后过一段时间文章就可以了访问的到了

TODO:

  • 文章置顶