工具：Jekyll搭建个人博客

搭建个人网站和博客

博客是技术人员或者普通人记录自身兴趣爱好或者技术贴等工具，随着开源社区的发展，尤其是免费的github pages更方便人们建立自己的博客，本文章主要记录自己建博客的经历。更多知识分享请到 https://zouhua.top/。

搭建个人博客主要有两种方式

第一种方法是使用Giuthub Pages + jekyll 搭建；

第二种方法是使用Giuthub Pages + Hexo搭建

这里主要介绍第一种方法，并记录搭建过程遇到的坎坷。

准备工作

安装Jekeyll：Jekyll是一个生成静态网页的工具。Windows(上)和mac os(下)安装指南：

1. 下载[Ruby+Devkith](https://rubyinstaller.org/downloads/)，默认安装
2. 下载RubyGerms，解压，进入管理员模式下命> 令行安装，输入ruby setup.rb。（该软件是Ruby的包管理器，也就是下载中心，**PS：可跳过该步骤直接进入第三步**） 
3. 安装Jekyll，在cmd模式下，输入命令 gem install jekyll，使用jekyll -v 检查是否安装成功。

1. xcode-select --install : 编译模块
2. 安装ruby
   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
   brew install ruby 
   export PATH=/usr/local/opt/ruby/bin:$PATH
3. 安装rbenv
   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
   brew install rbenv
   rbenv init
   curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash
4. 安装Jekyll 
   gem install --user-install bundler jekyll
   export PATH=HOME/.gem/ruby/X.X.0/bin:PATH

安装git bash

git是分布式版本控制系统，git bash是使用git 命令的GUI界面。
安装Typora

Typora是最好的markdown编辑器，不接受反驳。该软件用于编辑博客的markdown文件。

Typora是一款由Abner Lee开发的轻量级Markdown编辑器，适用于Mac OS、Windows和Linux三种操作系统，是一款免费软件。与其他Markdown编辑器不同的是，Typora没有采用源代码和预览双栏显示的方式，而是采用所见即所得的编辑方式，实现了即时预览的功能，但也可切换至源代码编辑模式。

搭建步骤

注册github账号，并且建立博客Github仓库。创建方法有两种：

从头开始设置主题

直接fork他人的blog主题：

极简主题

Jekyll 主题

注意：仓库名字一定要和自己的账户名字一致：Repository name : githubname.github.io

了解Jekyll博客的目录结构

_config_yml：全局配置文件，包含基础设置、侧边栏设置、社交账号和评论系统等
_posts/：博客文章存放位置
_layouts/：页面模板
_includes/：html页面设计
_sass/：存放样式表
assets/：原生的资源文件，如js、css和image等文件夹
category/：文章分类
tag/：标签
index.html：首页网页格式
自定义文件和目录

撰写博客

博客文章可以使用markdown或html来编写，因为markdown是轻量编辑语言，所以推荐使用markdown来书写文章。但需要注意几点：

md文件需要包含描述文章类型的title，具体参照Github md。

md文件的命名需要符合Permalinks。

md文件所包含的图片等，需要放置在_posts/img/目录，并且路径需要换成网页版绝对路径。如 “https://raw.githubusercontent.com/HuaZou/HuaZou.github.io/master/_posts/img/R.cbind-1.png”

本地渲染后上传至git仓库

打开powershell，并进入到博客目录；
输入 bundle exec jekyll serve进行渲染生成静态网页；
本地查看静态网址：http://127.0.0.1:4000/；
查看修改结果无误后，使用git add -A ; git commit -m "update content"; git push origin master命令完成提交。

Github Pages的局限性

Github Pages 并不是无限存储和无限流量的静态站点服务，一些限制如下：

内容存储不能超过1GB。
每个月100GB流量带宽。
每小时编译构建次数不超过10次。（在线修改重新编译并未发现这个限制）

优化主题配置

选择scheme

Muse：默认主题
Mist：默认主题的紧凑版本
Pisces：常用双栏主题

设置头像和网址log设置

本地图片格式为png类型，在根目录下寻找assests目录，替换avatar.png 和favicon.png即可。

头像图标：avatar: /assets/avatar.png
网页图标：favicon: /assets/favicon.png

设置网站标题栏背景变色

打开_sass/_custom/custom.scss，在里面新增如下代码：

.site-meta {
  background: $blue; //天空的颜色
}

设置背景图片

打开_sass/_custom/custom.scss，在里面新增如下代码：

// Custom styles.
body {
  background: url(/assets/background/18041.jpg);
  background-attachment: fixed;
}

设置菜单

菜单配置分为两部分，其中menu部分的名称和连接；另一部分是菜单的图标。

menu设置，用于匹配图标，格式是：item: link

menu:
  home: /                        #//首页
  about: /pages/about/           #//关于
  #resume: /resume/              //简历
  archives: /pages/archives/     #//归档
  categories: /pages/categories/ #//分类
  tags: /pages/tags/             #//标签
  #message: /pages/message/      //留言
  #myseo: /myseo/
  #schedule: /schedule/          //日程表
  #sitemap: /sitemap.xml         //站点地图
  #commonweal: /404.html          #//公益404

menu_icons图标设置，NexT主题使用的图标可以由Font Awesome提供。

menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  archives: archive  
  categories: th
  tags: tags
  #schedule: calendar  
  sitemap: sitemap
  #commonweal: heartbeat
  #myseo: internet-explorer
  #resume: handshake-o
  #message: commenting
  #friends: link
  #file: file-archive-o
  #ariang: cloud-download

设置侧边栏

修改_config.yaml文件的sidebar字段控制侧栏的行为。侧栏包括两部分，位置和显示时间。

sidebar:
  # Sidebar Position, available value: left | right
  position: left      # //靠左放置
  #position: right    # //靠右放置

  # Sidebar Display, available value:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggle.
  #display: post
  display: always
  #display: hide
  #display: remove

设置预览摘要

通过添加分隔符的方式，在_config.yml中配置分隔符后，在每个md内配置''截取分隔符上的内容作为文章摘要。

excerpt_separator: ''

直接在md的头部添加post属性excerpt，推荐该种方法。

layout: post
#cover: 
#navigation: 
title:  "如何简单快速地搭建个人博客站点"
date:   2019-08-29 10:36:00
updated: 2019-08-30
categories: 生活笔记
tags: 博客
#subclass: 
#logo: 
author: Hua Zou
excerpt: 博客是技术人员或者普通人记录自身兴趣爱好或者技术贴等工具，随着开源社区的发展，尤其是免费的github pages更方便人们建立自己的博客，本文章主要记录自己建博客的经历。

# 标记内容是暂时不明白的属性

修改主题配置文件auto_excerpt属性（修改过但没有实现）

auto_excerpt:
    enable: true
    length: 150

修改文章底部的带#号标签

打开 _includes/_macro/post.html 文件,搜索 rel="tag"># ,
将 # 换成

设置代码高亮主题

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties.修改highlight_theme 字段，将其值设定成你所喜爱的高亮主题。

设置文章宽度

打开_sass/_custom/custom.scss，在里面新增如下代码：

// 主页文章文章宽度
.header{ width: 80%; } /* 80% */
.container .main-inner { width: 80%; } /* 80% */
.content-wrap { width: calc(100% - 260px); }

安装过程遇到的问题

Could not find gem 'github-pages x64-mingw32' in any of the gem sources listed in
your Gemfile.
- 问题：无法渲染web网页。
- 原因：可能版本太低或者依赖包缺失。
- 解决：更新bundle后安装依赖包。
  - bundle update 或者 bundle update --bundler
  - bundle install
GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data.

问题：无法查看静态网页。
原因：连接github出错或者md文件名字包含中文
解决办法：用英文重新命名md文件

scss文件编译为css文件：Error: Invalid GBK character "\xE6" on line 1 of ... 报错
- 问题：main.scss文件编译报错。
- 原因：scss文件存在中文等字符，导致编码方式错误。
- 解决：表头增加**@charset “utf-8”; **

注意事项

文章内图片过大，可以通过压缩图片图快好

文章加密

某些文章可能是个人的生活写照，因此可以设置密码加密

使用static crypt软件，在powershell内安装“static crypt”；

参数设置“staticrypt [options]”

Options:
  --help               Show help                                       [boolean]
  --version            Show version number                             [boolean]
  -e, --embed          Whether or not to embed crypto-js in the page (or use an
                       external CDN)                   [boolean] [default: true]
  -o, --output         File name / path for generated encrypted file
                                                        [string] [default: null]
  -t, --title          Title for output HTML page
                                            [string] [default: "Protected Page"]
  -i, --instructions   Special instructions to display to the user.
                                                        [string] [default: null]
  -f, --file-template  Path to custom HTML template with password prompt.
                          [string] [default: "[...]/cli/password_template.html"]

将加密文件放置在secret目录，使用jekell build secret将md文件生成html；

使用staticrypt *html passphrase；

将secret添加入.gitignore；

上传修改。

在github内支持渲染Latex公式

在Typora内编辑数学公式能完美渲染，但提交到github后只能查看公式无法渲染，需要做如下修改：

在配置文件_config.yml设置markdown: kramdown参数；
修改_cludes目录内的header.html文件

引用

Github Pages + jekyll 全面介绍极简搭建个人网站和博客
Jekyll文章列表摘要设置
NexT主题配置
文章加密设置
加密软件staticrypt
github支持渲染Latex公式

参考文章如引起任何侵权问题，可以与我联系，谢谢。