搭建个人网站和博客
博客是技术人员或者普通人记录自身兴趣爱好或者技术贴等工具，随着开源社区的发展，尤其是免费的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主题：
注意：仓库名字一定要和自己的账户名字一致：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部分的名称和连接；另一部分是菜单的图标。
<u>menu</u>设置，用于匹配图标，格式是：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
<u>menu_icons</u>图标设置，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内配置<u>''</u>截取分隔符上的内容作为文章摘要。
excerpt_separator: '<!-- more -->'
- 直接在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"># ,
将 # 换成 <i class="fa fa-tag"></i>
设置代码高亮主题
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 <filename> <passphrase> [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文件
引用
-
参考文章如引起任何侵权问题，可以与我联系，谢谢。
网友评论