今天终于把这个博客建起来了,基本功能算是全。这是个纯静态的blog,托管在github上,生成器是jekyll。 除了这些基本的以外,一些其他功能需要依赖第三方工具。站内搜索用的google的自定义搜索工具; 同样网站分析也是谷歌的analytics工具。评论用的多说。用的某位大大 的模板,还参考了另一位大大模板的一些功能。头一次弄折腾了两天,也算弄明白了 些里面的运行逻辑。接下来我会详细讲解如何搭建一个类似的小站。

各种申请

申请github账号

sign up for github 就是创建账号了

申请google账号

然后利用谷歌账号开通站长工具, 站内搜索,分析工具

申请多说账号

一般来说用新浪微博账号就行了

利用gitpage搭建静态网站

先进入你的github主页,这里你可以查看和管理你的所有项目

从上倒下的点红笔圈中的地方新建一个项目,

设置的时候上面把我的账户替换成你的账户就可以了,点绿色按钮提交. 于是你就有了一个自己的站点位置(https://yourgitname.github.io)

然后是下载github的客户端windowsmac下(linux用命令行工具就不介绍了,略多不直观),安 装好后不同平台会有不同,但是基本的还是一样的,

上图中按钮是同步用的,会将本地仓库内容覆盖github上的主仓库中, 每次同步必须在summary中填上同步的主题,下面的描述可以不填,再下面的内容是提示你哪些有改变。

你已经创建好了项目,剩下的就是在你的项目网页点击圈中的按钮,然后再你的客户端中将该项目clone下来.

选好你希望该项目本地所在的位置后等待克隆成功吧~~ok!

本地配置jekyll

安装ruby环境

window 下这里下载ruby,安装好后顺手把rails一起安了吧~

安装完成后记得设置环境变量, 具体就是把安装好的ruby位置放到环境变量里去。

win+R 调出运行,然后输入cmd 呼出terminal,敲入gem install rails等待安装完成吧~~

mac下自带ruby。。。就是任性!

安装gitpage相同的jekyll环境

命令行输入gem install bundler等待安装完,

命令行输入gem install jekyll等待安装完,

接下来下载我的模板到你clone下来 的地址,记得解压,你该看到大约是这样

其中文件夹hsz1273327.github.io位置应该是你的项目位置

令行输入cd XXXXX XXXX是你的项目位置,

命令行输入bundle install

会自动给你安装GEMfile中提到的几个库

这样jekyll环境就算搭建好了

运行jekyll

配置_config

根据我的模板主页的readme文档设置

注意,本地试运行先把 production_url 改为http:\localhost:4000

运行jekyll

命令行依然cd到你的项目目录,输入 jekyll build ,运行完了后再输入 jekyll serve。 tips:没事terminal不要关。

浏览器里输入地址http:\localhost:4000你就能看到博客主页了 (不过这个时候搜索功能无法使用)!

实现功能

站内搜索功能

这个功能用的谷歌的自定义搜索,需要注册后才能用。 除了自己的代码设置外还要在谷歌自定义搜索页面上做些设置 具体如图

点击后弹出如图

enter image description here

enter image description here

enter image description here

如果你通过站长工具提交过sitemap了,那这样就能搜索了~~

留言评论功能

这个没啥好说的,注册设置都弄好了就有了,虽然自己倒腾了好久,结果发现模板自带这个功能。。。

浏览器中撰写更新博客功能

这个只是简单的用超链接实现的,分别链接到git上项目所在页面的相应功能而已,不过这样确实方便了不少。 不过方便是有代价的,断网没保存就orz了(已经吃过一次亏)。安全性应该还行,毕竟要修改本来就要用自己的 github账号才有权限。

经过上面的其实你的小站已经建成了,你只要将它同步到你的github上,然后等个几分钟就能用了~~

接下来的是给希望用自己域名的同学的~~

配置域名

购买域名

避免广告嫌疑我就不多说了,总之找个买就行

CNAME设置

参考我的CNAME文件,注意只能放一个域名,如果是作为博客的话我建议不要用1级域名,略浪费

域名解析

到你买域名的供应商那边,之后选择域名解析,选CNAME作为解析方式,然后把自己的原始网址放上去就行了。 这个就不截图了要不有广告嫌疑。我的是二级域名,一级域名我没试过,据说是用A解析。

弄好了记得_config文件要改下url

撰写博客

总结

jekyll逻辑简述

模板放在 *_includes* 里 静态文件放在 asset

模板内用 {{ }}来传递模块或页面的属性

用{\% \%} 描述逻辑

每个页面开头用--- ---分隔出独立位置记录这个页面的属性,其中layout:title:是 必须的属性,id:默认为最终的网址位置去掉域名。

前端模板知识点归纳

html5 的 <from><input>标签可以用来传递参数,用GET方法是将input的内容传递到对象页面的位 置后面作参数

POST方法需要对象页面用脚本获取该值