额。。。一年前想搞个个人博客最后弄了半天，知道了很多生成器，就是没做完网站。。。。

然后这次需要给白墨写个网站，时间紧任务重。。结果我只用了半天就把hello world跑通了。。。

然后大概的结果是这样的，因为是静态网站，所以只要找个地方把文件传上去就行了。。github pages，coding.net，七牛什么的就行，不用花钱。。。但是有个问题就是七牛需要网站域名备份，据说是个坑，担心github姨妈墙。最后选了coding.net。现在看看来好像访问速度有点慢，不过再说吧。

然后就是先在域名提供商买个域名，我在新网买的，然后管理里面添加一个CNAME，地址写coding的地址pages.coding.net，具体的教程可以看这里https://coding.net/help/doc/pages/index.html。然后在coding上项目上传个index.html。就行了。。

然后就是静态网站生成器了。。。有个网站聚合了github上开源的各种生成器https://staticsitegenerators.net/。在上面按照github的star排序，第一个是jekyll，但是实在没接触过ruby，弄了半天也没看懂。。。

然后发现hugo原来排名数上升的第二了。。。就重新开始部署hugo。。。还要先装golang。。。。反正按照教程就行。。。官网是gohugo.io有个不完全的中文翻译http://www.gohugo.org/

然后开发工具发现brackets还是比较好用，vsc和atom感觉都还要学什么的。。。brackets集成实时预览我觉的对于初学者很友好啊。。。不要搞什么的node.js什么的。。

git

然后要重新复习下git。。。这个学了好多次了，但是以为平时不用，所以每次用的时候都要重学。。。。

git其实就是维护一个状态树，每个代码的不同状态都是一个节点，然后可以用指令在各个节点上跳转。

有个软件叫sourcetree我觉得是最直观的，当然和markdown可能差不多，最开始的时候都想有个直观的方式来看到底做了什么，但是用熟了可能最好的方式是双手可以不离开键盘吧= =

基本用法

首先就是

git init 

初始化

然后

git add 

添加到临时存储（不知道正确的说法是什么。。）

然后

git commit 

可以后面加-m ‘ ’ 来添加一个节点，

分支

git checkout -b

可以新建一个分支

建立远程仓库（github什么的）

git remote

可以给当前的git仓库新建一个远程的，还可以用

git remote add origin xxx
                       ^
远程地址，在远程仓库上能查到

来给远程仓库起个名字，但是之前，要生成ssh公钥，然后写到远程仓库上，不然不会让你访问的你可能能明白。

然后用

git push origin xxx 
             ^
本地起的远程仓库的名字

其中xxx可以写成aaa:bbb的形式aaa是本地分支的名字，bbb是远程分支的名字，bbb不写的话会相当于是aaa:aaa没有会新建，aaa不写的话会删除远程仓库的bbb分支

一些git教程

有两个交互类的学习git的地址，我挺喜欢这种的教学的
http://learngitbranching.js.org/
https://try.github.io/levels/1/challenges/1

字体

中文网页字体的排版我已经不想弄明白了，就照着别人怎么做就怎么做吧。。
https://github.com/sofish/typo.css
https://github.com/gaoryrt/websafe-font
https://zhuanlan.zhihu.com/p/20186806
然后有一个我现在还没弄明白，大概就是因为中文字体文件太大了，所以有人写了一个工具分析网页里用的汉字生成一个特殊的字体包来压缩大小，叫字蛛。放在这里吧。

生成器

嗯，然后静态网站生成器这个东西，我用的这个生成器叫hugo。是用go写的，地址是，gohugo.io。然后有一个中文版的，gohugo.org。

环境

因为是用go写的时候先装go的环境，然后再安装它自己的环境，然后要设定path，和gopath，如果是麦克的话，可以用homebrew。
然后因为用到很多，命令行的东西，所以，建议装一些增强的命令行工具，比如MAC的iterm2，和PC的cmder。然后需要装git。

new

然后CD到存放网站内容的文件夹，用
hugo new site .
新建一个网站，它会自动生成一些框架，如果想用网上别人发布的主题也可以，然后也可以自己设定样式类型来，自定义网站的样式

各个文件

这里面的archetypes文件夹是用来存放生成md文件的时候，文件对文件头的像是这样

写在这里面的内容会在用hugo生成生成新页面的md文件对时候自动的填充在md文件的最前面

第二个文件夹是用来存放文章内容的，主要是md文件，生成的时候会根据这里面的内容来生成html文件。
第三个文件夹我没用。。。
第四文件夹是用来存放生成样式的，打开以后里面是这样

index.html是主页的html文件，然后第二个文件夹是用来存放，代码片段的，在一些页面内重复出现的，比如说引用的css和js啊，比如说菜单栏导航栏什么的，可以存放在这里面反复使用比如这样

然后hugo对样式的定义主要是这样的，他有section来区分，比如有有对section是表示项目的，有的是blog什么的，每个section，有list和single来显示这个section的列表和每个页面的样子。比如我有个section叫projects，然后我就要在section文件夹下面建一个project的html定义list的样子，然后project文件夹下面新建一个文件叫single，来表示single的页面。然后如果渲染对时候没找到这些文件就会在_default文件夹里面找。

static里面会放引用的css和js、图片什么的。
config.toml里面有整个网站的配置信息。

然后内容搭好以后用
hugo
就可以生成网站了。文件会放在public上面，把这个push到coding或者github上就行了

然后我找了网上的模板mod了一下。

css

可以用.name来选择某一类，#name来选择某一个id，具体的可以百度css选择器。反正我基本上是对着手册写的。。。然后调用了一个animate.css写了一个出现的动画。改了些字号位置什么的。。

jquery

反正就是各种$符号什么的。。然后网上很多库什么的，我主要是用了一个scroolto的库写了一个滚动的功能。然后写了一个滚动到特定位置，就出现特定动画的功能。

然后就基本上写完了。。现在好像也能访问了blankink.cc

shortcode

恩，然后写内容的时候发现有的时候markdown还不能完全做到我想要的功能，所以hugo提供了shortcode来实现这些功能。
http://gohugo.io/extras/shortcodes/
大致的流程就是在layout/shortcodes下面新建html文件，名字类似xxx.html这样，然后就可以{{% xxx %}}这样用了，然后可以传递参数什么的。