GitHub社区
Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理。在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中。目前,包括Rubinius、Merb和Bitcoin在内的很多知名项目都使用了Git。Git同样可以被诸如Capistrano和Vlad the Deployer这样的部署工具所使用。
注册Github帐号
创建repository
repository相当于一个仓库,用来放置你的代码文件。首先,登陆进入Github,并进入个人页面,选择New repository(下图红圈的地方)
创建时,只需要填写Repository name即可。!!!注意,格式为xxx.github.io,xxx为你的名字。(如:zhouxiaoyu1994.github.io)
Hexo
安装前提软件
Node.js作用:node.js用来创建hexo博客框架的,我当前安装版本为:node-v4.5.0-x86.msiGit客户端作用:把本地的hexo内容提交到github上去,我当前安装版本为:Git-2.10.0-32-bit.exe
安装Hexo
所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。
$ npm install -g hexo-cli
$ npm install hexo --save
初始化配置
创建Hexo文件夹
安装完成后,根据自己喜好建立目录(如E:\blog\hexo),进该路径下E:\blog\hexo右键Git Bash Here执行以下指令$ hexo init
安装Hexo插件
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save
本地查看效果
继续执行以下命令,成功后可登录localhost:4000查看效果
$ hexo server
Hexo配置到GitHub
检查ssh key
首先检查你电脑上现有的 ssh key:$cd~/. ssh
检查本机的ssh密钥如果提示:No such file or directory
说明你是第一次使用git。生成新的SSH Key:
$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/p
rivate rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>
注意1: 此处的邮箱地址,你可以输入自己的邮箱地址;注意2: 此处的「-C」的是大写的「C」
然后系统会要你输入密码(一般直接回车就行):
Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>
在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。有时会出现无法输入密码的情况,遇到的话直接回车就行,不用管。
注意:输入密码的时候没有*字样的,你直接输入就可以了。
最后看到这样的界面,就成功设置ssh key了:
添加SSH Key到GitHub
在本机设置SSH Key之后,需要添加到GitHub上,以完成SSH链接的设置。
打开本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件。此文件里面内容为刚才生成的密钥。如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。
登陆github系统。点击右上角的Settings—>SSH and GPG keys —> add another public keys
把你本地生成的密钥复制到里面(key文本框中)标题随便取, 点击 add key 就ok了
测试
可以输入下面的命令,看看设置是否成功,git@github.com的部分不要修改:
$ ssh -T git@github.com
如果是下面的反馈:
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.Are you sure you want to continue connecting (yes/no)?
输入yes,然后回车:
Hi cnfeat! You've successfully authenticated, but GitHub does not provide shell access.
设置用户信息
Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。
$ git config --global user.name "cnfeat"//用户名
$ git config --global user.email "cnfeat@gmail.com"//填写自己的邮箱
SSH Key配置成功本机已成功连接到github。
Jacman 主题
以下主要转载wuchong 的Jark’s Bloghttp://wuchong.me/blog/2014/11/20/how-to-use-jacman/
安装
在博客根目录下执行如下命令。
$ git clonehttps://github.com/wuchong/jacman.git themes/jacman
启用
修改博客根目录下的_config.yml配置文件中的theme属性,将其设置为jacman。同时建议设置stylus属性中的compress值为true,会自动压缩 CSS 文件,hexo默认配置中不包含这一项,建议开启。如下。
theme: jacman
stylus:
compress: true
更新
cd themes/jacman
git pull origin master
最好先备份主题目录下的 _config.yml 文件后再升级。
配置指南
配置文件_config.yml位于jacman主题根目录下。
菜单
menu:
主页: /
归档: /archives
关于: /about
控件
widgets:
- category ## 分类
- tag ## 标签
- links ## 友情链接
- rss ## rss订阅
RSS
rss: /atom.xml
图片相关
imglogo:
enable:true ## 是否显示网站 logo
src: img/logo.png
favicon: img/favicon.ico ## 网站图标
apple_icon: img/jacman.jpg ## 苹果设备上的图标,背景不要透明
author_img: img/author.jpg ## 网站底部的博主头像
banner_img: img/banner.jpg ## 博客顶部的图片
主题颜色
theme_color:
theme:'#2ca6cb' ##默认主题颜色为蓝色
close_aside:false ##是否在文章页面自动关闭侧边栏
首页相关
index:
expand:true ## 首页文章是否展开。默认为展开式,显示 Read More。
excerpt_link: Read More
作者信息
author:
intro_line1:"Hello ,I'm Larry Page in Google." ## 网站底部的个人介绍
intro_line2:"This is my blog,believe it or not."
weibo_verifier: ## 微博秀的验证码
tsina: ## 用于微博秀和微博分享
weibo: ## 用于显示网站底部社交按钮,下同
douban:
zhihu:
email:
twitter:
github:
facebook:
linkedin:
google_plus:
stackoverflow:
目录
toc:
article:true ## 是否在文章中显示目录
aside:true ## 是否在侧边栏显示目录
友情链接
links:
码农圈: https://coderq.com,一个面向程序员交流分享的新一代社区
Jark's Blog: http://wuchong.me
评论
duoshuo_shortname:
disqus_shortname:
分享按钮
jiathis:
enable: false ## 默认使用主题内建分享
id:
tsina:
网站统计
google_analytics:
enable: false
id: ## google analytics ID.
site: ## 网站地址.
baidu_tongji:
enable: false
sitecode: ## 百度统计站点特征码
cnzz_tongji:
enable: false
siteid: ## CNZZ统计站点ID
杂项
ShowCustomFont: true
fancybox: true
totop: true
自定义搜索
google_cse:
enable: false
cx:
baidu_search:
enable: false
id:
site: http://zhannei.baidu.com/cse/search
tinysou_search: ## http://tinysou.com/
enable: false
id: "4ac092ad8d749fdc6293"
```
#### 属性功能
菜单 menu 默认没有启用/tags和 /categories页面,如果需要启用请在博客目录下的source文件夹中分别建立tags和 categories文件夹每个文件夹中分别包含一个index.md文件。内容为:
```
layout: tags (或categories)
title: tags (或categories)
---
```
因为主题中已经内置了这两个页面的模板,所以他们会被正确的解析出来。
**微博秀**:需要注意的是,如果要启用微博秀,您必须填上author属性下tsina和weibo_verifier的值,前者是您微博ID,后者是您微博秀的验证码,访问 [http://app.weibo.com/tool/weiboshow](http://app.weibo.com/tool/weiboshow) 在如下图位置,可以获得您的 verifier,如:我的是b3593ceb。
![](http://upload-images.jianshu.io/upload_images/2031241-064f2c3c0d9ace46.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如果要关闭侧边栏,将close_aside置为true,就会在博文页面自动关闭侧边栏。
**首页显示模式 Index**
目前首页的显示模式支持两种,一种是原先的卡片式(前往 [Demo](http://wuchong.me/jacman) 预览),另一种是类似官方主题的文章展开式([本站](http://wuchong.me/)即采用的这种)。两者各有优劣,前者首页加载速度更快,后者文章内容更能吸引读者。主题默认采用后一种展开式,如需开启第一种卡片式,请设置index属性下的expand: false。
卡片式的文章摘要是截取文章内容的前140个字,也可以自己总结description
并将其放在开头的front-matter中。展开式的文章摘要就是使用``截取了。
**作者信息 author**
作者信息,建议尽量填写完整。其中tsina
是你的新浪微博ID,不同于用户名或微博主页地址。启用这个属性后,其他用户在微博上分享你文章的同时会自动@你。同时它和weibo_verifier一起作用生成微博秀。intro_line1和intro_line2是网站底部的个人介绍。weibo、twitter、facebook等是用来显示网站右下角的社交按钮的,如下图所示。
![](http://upload-images.jianshu.io/upload_images/2031241-9e6d086092023717.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**目录 toc**
是否启用在文章中或侧边栏中的目录功能。二者可以都为true
或都为false。同时,如果你希望在特定的某一篇文章中关闭目录功能你可以在文章文件开头中的front-matter中加上一行toc: false。如果希望在某一篇文章中关闭目录自动编号功能你可以在文章文件开头的front-matter中加上一行list_number: false。另外 hexo 2.5.2 开始支持中文目录,想获得更好的体验请升级你的 Hexo 版本。
**评论 comments**
填写duoshuo_shortname[多说](http://duoshuo.com/)的用户名,启用多说评论系统。在大陆地区更好用的评论系统。
填写disqus_shortname[disqus](http://disqus.com/) 的用户名,启用 disqus 评论系统。国际上更广泛使用的评论系统。设置博客根目录下的_config.yml文件中的disqus_shortname同样也能开启该功能。
**数学公式 mathjax**
主题支持写 LaTex 数学公式。只需要在文章文件开头的front-matter中,加上一行mathjax: true,即可在文中写 LaTex 公式。
**图片浏览 fancybox**
默认关闭,如果你使用 Hexo 经常发表 Gallery 类型的文章,那么请设置为true。
**自定义字体 ShowCustomFont**
是否启用自定义字体,默认开启,主要用于显示网站底部的字体。如果你有一定前端基础可以修改 font.styl 替换为你喜欢的字体。
**主题颜色更改 Theme Color**
目前官方还未支持十六进制颜色与String值的转换,所以需要手动添加依赖包,该问题估计不久后会解决。
```
## 在博客的目录下输入下面指令
cd node_modules/hexo-renderer-stylus
sudo npm install stylus@0.49.2 #根据系统文件的权限不同,有的不需要加sudo
```
然后更改在主题目录下的_config.yml的 theme_color下 theme值。
```
### Theme Color
theme_color:
theme: '#2ca6cb' ##the defaut theme color is blue
```
### 常见问题
**Q:图片默认都是居左的,我怎么设置能让图片居中呢?**
使用 ``的HTML标签。
**Q:如何建立一篇图片类文章(Gallery Post)?**
使用hexo new photo "your titile"建立图片类文章,或者直接新建一个 Markdown 文件,将其front-matter修改为如下,即可看到主题为图片类文章提供的样式,[Demo](http://wuchong.me/jacman/gallery)。
```
> ---
> layout: photo
> title: Gallery Post
> photos:
> - http://i.minus.com/ibobbTlfxZgITW.jpg
> - http://i.minus.com/iedpg90Y0exFS.jpg
> ---
>
```
**Q:我在配置文件中给某一项设置了值,但为什么总是看不到效果啊?**
_config.yml文件中的每个属性值前面必须留一个空格,建议在 Sublime/Notepad++ 中开启显示所有空格模式。另每篇文章的 front-matter也要注意这个问题。
**Q:如何建立自我介绍页面(About 页面)?**
首先在主目录找到_config.yml,找到url添加about_dir: about到这个板块。然后在/source里面建立about文件夹。在about文件夹里建立index.md。编index.md就和发布其他的文章一样,格式都一样。
**Q:怎么提意见和建议?**
主题还在不断完善中,欢迎 [open issue](https://github.com/wuchong/jacman/issues) 来提建议,参与讨论。
**Q:楼主我不喜欢你的配色,怎么换主题的颜色呢?**
包括颜色在内的很多变量都在jacman/source/css/_base/variable.styl
文件中,可以修改成你喜欢的。
**Q:英语更能突显我的逼格,怎么换成英语?**
配置你的博客根目录下的_config.yml,去掉language: zh-CN。
**Q:为什么我修改了配置文件/发表了博文,解析出来的却是乱码呢?**
请将你的配置文件/markdown文件保存成 UTF-8 格式。
**Q:为什么开启了微博秀后,显示是空白的,没有内容展示?**
每次修改参数都会这样,需要多刷新几次或者上传到服务器上就好了。
**Q:博主 Jacman Demo 站点中文章的 md 源文件在哪能看到呢?**
我将 Demo 站点所有源文件放在了 Jacman 的 [site](https://github.com/wuchong/jacman/tree/site) 分支下。
## 相关资源:
[GitHub社区](https://github.com/)
[Hexo主题](https://hexo.io/themes/)
[Node.js](https://nodejs.org/en/)
[Git客户端](https://git-scm.com/)
## 参考资料:
[Hexo+nexT主题搭建个人博客](http://www.wuxubj.cn/2016/08/Hexo-nexT-build-personal-blog/)
[金石开-Hexo搭建Github静态博客](http://www.cnblogs.com/zhcncn/p/4097881.html)
[wuchong-如何使用 Jacman 主题](http://wuchong.me/blog/2014/11/20/how-to-use-jacman/)
[CNFeat-如何搭建一个独立博客——简明Github Pages与Hexo教程](http://www.jianshu.com/p/05289a4bc8b2)
[使用GitHub和Hexo搭建免费静态Blog](http://www.bkjia.com/webzh/995207.html)
[不如-hexo你的博客](http://ibruce.info/2013/11/22/hexo-your-blog/?utm_source=tuicool&utm_medium=referral)
[起今知行-使用Hexo搭建博客(二),搭建博客的过程](http://qjzhixing.com/2015/08/26/#四、Hexo的基本命令)
**感谢以上诸位博主的热心分享o(≧v≦)o~~**