S.Q NLP Engineer

如何使用github搭建个人博客

2018-12-03
孙强

如何使用github搭建个人博客

1. 先在本地搭建博客

准备:

  • 安装jekyll
  • 新建或者克隆一个项目
  • 使用jekyll部署

1.1 安装jekyll

为什么要使用jekyll,jekyll的中文网站已经解释的很清楚了:

简单 不再需要数据库,不需要开发评论功能,不需要不断的更新版本——只用关心你的博客内容。 使用 Jekyll

静态 Markdown(或 Textile)、Liquid 和 HTML & CSS 构建可发布的静态网站。 Jekyll 模版

博客支持 支持自定义地址、博客分类、页面、文章以及自定义的布局设计。 迁移你的博客

建议在linux系统下使用jekyll, 我在windows下折腾了半天都没能解决编码问题,官方也告诫最好不要在windows下使用,如果手里只有windows计算机,可以使用win10自带的ubuntu子系统,亲测有效.

  1. 先安装ruby apt-get install ruby-full 然后到ruby中国去替换ruby源,不然安装包会很慢.
    gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
    bundle config mirror.https://rubygems.org https://gems.ruby-china.com
    
  2. 使用gem安装jekyll gem install jekyll

1.2 新建或者克隆一个项目

1.2.1 基本步骤

先从简单的开始,克隆一个项目:

$git clone https://github.com/poole/poole.git
$cd pool
$jekyll serve
Configuration file: /mnt/d/code/learbhub/blog/poole/_config.yml
       Deprecation: The 'gems' configuration option has been renamed to 'plugins'. Please update your config file accordingly.
            Source: /mnt/d/code/learbhub/blog/poole
       Destination: /mnt/d/code/learbhub/blog/poole/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 1.388 seconds.
                    Auto-regeneration may not work on some Windows versions.
                    Please see: https://github.com/Microsoft/BashOnWindows/issues/216
                    If it does not work, please upgrade Bash on Windows or run Jekyll with --no-watch.
 Auto-regeneration: enabled for '/mnt/d/code/learbhub/blog/poole'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

这时在本地(http://127.0.0.1:4000/)就可以打开访问了 home

远端访问可以使用命令: jekyll s --host='0.0.0.0'

1.2.2 文件结构解释

主要模块及其作用:

  • _config.yml 保存配置数据。很多配置选项都可以直接在命令行中进行设置,但是如果你把那些配置写在这儿,你就不用非要去记住那些命令了。
  • _drafts drafts(草稿)是未发布的文章。这些文件的格式中都没有 title.MARKUP 数据。
  • _includes 你可以加载这些包含部分到你的布局或者文章中以方便重用。可以用这个标签 来把文件 _includes/file.ext 包含进来。
  • _layouts layouts(布局)是包裹在文章外部的模板。布局可以在 YAML 头信息中根据不同文章进行选择。
  • _posts 这里放的就是你的文章了。文件格式很重要,必须要符合: YEAR-MONTH-DAY-title.MARKUP。
  • _data 格式化好的网站数据应放在这里。jekyll 的引擎会自动加载在该目录下所有的 yaml 文件(后缀是 .yml, .yaml, .json 或者 .csv )。这些文件可以经由 `site.data` 访问。如果有一个 members.yml 文件在该目录下,你就可以通过 site.data.members 获取该文件的内容。
  • _site 一旦 Jekyll 完成转换,就会将生成的页面放在这里(默认)。最好将这个目录放进你的 .gitignore 文件中。
  • index.html and other HTML, Markdown, Textile files 如果这些文件中包含 YAML 头信息 部分,Jekyll 就会自动将它们进行转换。当然,其他的如 .html, .markdown, .md, 或者 .textile 等在你的站点根目录下或者不是以上提到的目录中的文件也会被转换。
  • 其他 其他一些未被提及的目录和文件如 css 还有 images 文件夹, favicon.ico 等文件都将被完全拷贝到生成的 site 中

pool里面的目录结构是这样的:

poole/
├── 404.html
├── LICENSE.md
├── README.md
├── _config.yml
├── _includes # 方便文件重用
│   └── head.html 
├── _layouts # 外部的模板,控制页面样式
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts # 存放文章的地方,一般都是markdown文件
│   ├── 2016-01-01-whats-jekyll.md
│   ├── 2016-01-02-example-content.md
│   └── 2016-01-03-introduction.md
├── _sass # css扩展,控制样式
│   ├── _base.scss
│   ├── _code.scss
│   ├── _layout.scss
│   ├── _masthead.scss
│   ├── _message.scss
│   ├── _pagination.scss
│   ├── _posts.scss
│   ├── _syntax.scss
│   ├── _type.scss
│   └── _variables.scss
├── _site # jekyll转化后的文件
│   ├── 2016
│   │   └── 01
│   │       ├── 01
│   │       │   └── whats-jekyll
│   │       │       └── index.html
│   │       ├── 02
│   │       │   └── example-content
│   │       │       └── index.html
│   │       └── 03
│   │           └── introduction
│   │               └── index.html
│   ├── 404.html
│   ├── LICENSE.md
│   ├── README.md
│   ├── about
│   │   └── index.html
│   ├── atom.xml
│   ├── index.html
│   ├── page2
│   │   └── index.html
│   ├── page3
│   │   └── index.html
│   ├── public
│   │   ├── apple-touch-icon-precomposed.png
│   │   └── favicon.ico
│   └── styles.css
├── about.md # 简介
├── atom.xml
├── index.html # 首页
├── public # 公共文件
│   ├── apple-touch-icon-precomposed.png
│   └── favicon.ico
└── styles.scss

18 directories, 41 files

1.2.3 频繁使用的地方

  • _posts 存放markdwon文件的地方
  • _config.yml 配置

_posts 所有的文章直接放在_posts文件夹下面,格式就是我们之前提到的markdown文件,默认的格式是.md和.markdown文件。每篇文章的开始处需要使用yml格式来写明这篇文章的简单介绍,格式如下:

---
    author: kresnikwang 
    comments: true # 是否能被评论
    date: 2015-04-28 17:42:32+00:00
    layout: post
    title: PHP, Angular JS Development|My Export Quote|农产品出口工具开发
    categories: # 分类
    - Works
    - Tech 
    tags: # 标签
    - bootstrap
    - javascript
    - php
    - AngularJS
    ---

_config.yml 详见(http://jekyllcn.com/docs/configuration/)

# Permalinks
permalink:           pretty

# Setup
title:               Poole
tagline:             The Jekyll Butler
url:                 http://getpoole.com
paginate:            1
baseurl:             ""

# Assets
#
# We specify the directory for Jekyll so we can use @imports.
sass:
  sass_dir:          _sass
  style:            :compressed

# About/contact
author:
  name:              Mark Otto
  url:               https://twitter.com/mdo
  email:             markdotto@gmail.com

# Custom vars
version:             2.0.0
github:
  repo:              https://github.com/poole/poole

# Gems
gems:
  - jekyll-paginate
  - jekyll-gist

  1. github上利用jekyll搭建自己的blog的操作顺序?

Similar Posts

Comments