个人网站的创建及NexT模板的使用

这是由Cola & Library打造的第一篇技术博客，旨在说明个人网站的建立过程及模板的使用方法。

前期准备

如果你能看到这篇博客，那么你最起码应该掌握：

了解GitHub为何物？
使用GitHub建立个人网站的优势在哪？
有一个属于自己的GitHub账户。

使用GitHub建立个人网站，主要有两种途经：一种是本地创建；另一种是直接在浏览器上进行操作。

第一种方法的麻烦之处在于，需要配置各种环境，包括ruby、jekyll或hexos、bundle等。这对于一无所知的小白，或者是不习惯使用命令行编程的新手来说无疑是一个很高的门槛。
虽然网上已经有各种各样的教程，但是由于大家所使用版本、操作系统的不同，出现的问题各不一样，对新手村的学徒来说这无疑会耗费大量的时间和精力，而且经过搜索亦不一定
能保证找到解决方案，会对初学者造成一种浓浓的挫败感。

相比而言，第二种方案对于新手则要简洁明了，不用考虑过多的环境配置，采用一个模板，直接在网站上进行修改，这个方案的门槛在于需要寻找一个自己喜欢的模板，并且学会如何修
改（当然这是在第一种方案中经过环境配置后也需要面对的困难）。

从本地创建

这里给出Library同学在学习本地创建时，看到的比较有用的一些网站，具体的过程不再详述。

手把手教你在Github上建立自己的个人博客网站
（该网站简要介绍了简历个人网站所需要的内容，并给出了HelloGitHub示例）
在windows下安装jekyll
搭建一个免费的，无限流量的Blog——github Pages和Jekyll入门
GitHub Pages 建立个人网站详细教程

从浏览器创建

上节中给出的示例均需在本地建立仓库，再上传，环境配置流程繁琐，操作过程不友好，好吧…其实就是Library同学最终有一步“bundle exec jekyll server”不知为何总是过不了，
因此偷懒放弃了。However，明明有简单的，为啥要避简就繁呢？

低成本打造个人独立博客清晰地介绍了从网页直接建立个人网站的方法，本网站亦是参照此方法建立的。本网站使用的模板为
jekyll-theme-next，模板的使用方法见开始使用NexT。

模板的使用方法

按照上一节的步骤，相信已经在自己的仓库中建立好了NexT模板，接下来主要谈谈如何使用该模板，包括模板格式的修改、写博客时的一些格式问题。毕竟，满屏的英文看着还是有点头大
（口享！Cola现在已经去看复联4了！）

文件的修改

使用GitHub建立的个人网站，一个很重要的配置文件是_config.yml，从浏览器的仓库名中打开该文件，点右上角的铅笔符号，即可进入编辑，将开始的title、author、description进行修改，即可得到属于自己的个人网站。对于博文的书写，只要打开_posts文件夹，点击Create New File，然后将新的文件命名为xxxx-xx-xx-文件名.md，即可对文件进行编辑，最后在页面最下方点击Commit Changes，即可完成博文发布。稍等片刻，就会看到自己的博文被更新在了网页上。

在NexT主题配置中给出了如何添加标签、添加分类、设置字体等其他操作。对于标签、分类的添加，其实只需要在xx.md
文件开始的两条---中直接修改即可，该分类或标签如果没有将自动新建。

文章的格式

在前面的部分，已经给出了一级标题、二级标题、段落、超链接、数字/非数字表示小部分的格式示例。接下来介绍一些其他常用的格式。

文字的格式

文字超链接： test link
加粗加黑： Strong text
下划线：Underline text non elit nisl
文中横线： ~~Deleted text~~ tristique
字下加灰色背景框：Sed erat diam
文字上标：我是^上标。
文字下标：你是_下标。
文字斜体：他是斜体。
专有名词：NBA
下划双虚线：AVE
juzhong：
blah blah blah
特殊格式的文本：

另起一行的特殊格式。

换行定义

定义1: 换行定义.

图的插入

表的插入

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

程序语言的插入，以Clone Jacman theme为例:

1 2	git clone https://github.com/Simpleyyt/jekyll-theme-next.git cd jekyll-theme-next

小表情emoji的插入，以及网站链接的插入

测试用小表情，如： :smile: .

更多小表情请见 :wink: : https://www.webpagefx.com/tools/emoji-cheat-sheet/.

使用知乎的链接类型：

Sanarous的个人博客

:bowtie::smile::laughing::blush::smiley::relaxed::smirk:
:heart_eyes::kissing_heart::kissing_closed_eyes::flushed::relieved::satisfied::grin:

公式的插入

从以下网站可以获得更多公式相关的内容：
http://docs.mathjax.org/en/latest/

另起一行写公式

$a^2 + b^2 = c^2$

如何实现的呢？用 double $ 符号，如下

$a^2 + b^2 = c^2$

行中公式$ sin(x^2) $可以使用$$...$$ 得到。

下角标、非斜体文本的实现：

$\mathbf{X}\_{n,p} = \mathbf{A}\_{n,k} \mathbf{B}\_{k,p}$

效果如下：

\[ \mathbf{X}_{n,p} = \mathbf{A}_{n,k} \mathbf{B}_{k,p} \]

公式的插入有点类似于Latex，可以考虑从MathType直接转化为Latex公式。

高亮文本

正常文本

1	alert('Hello World!');

高亮后的文本

1	alert( 'Hello, world!' );

1
2
3

def foo
  puts 'foo'
end

C++的高亮形式

#include <iostream>

using namespace std;

void foo(int arg1, int arg2)
{

}

int main()
{
  string str;
  foo(1, 2);
  cout << "Hello World" << endl;
  return 0;
}