- 为什么选择GitHub Pages 1、GitHub Pages有免费的代码托管空间,资料自己管理,保存可靠; 2、学着用 GitHub,享受 GitHub 的便利,上面有很多大牛,眼界会开阔很多; 3、顺便理解 GitHub 工作原理,最好的团队协作流程; 4、GitHub建立私有仓库才会收费,所以会有很多开源代码。
- GitHub Pages是什么 应用GitHub Pages创建属于自己的个人博客,GitHub将提供免费的空间。GitHub提供的域名(用户名+github+io),在Repository name对应处填写资源名,其需要使用自己的用户名,每个用户名下面只能建立一个,并且资源命名必须符合这样的规则username/username.github.io,之后勾选下面的"Initialize this repository with a README" 。
- hexo出自何人 hexo出自台湾大学生 tommy351 之手,是一个基于Node.js的静态博客程序,其编译上百篇文字只需要几秒。hexo生成的静态网页可以直接放到GitHub Pages,BAE,SAE等平台上。
- 什么是Travis CI
Travis CI
是目前新兴的开源持续集成构建项目,它与jenkins
,GO
的很明显的特别在于采用yaml
格式,简洁清新独树一帜。目前大多数的github项目都已经移入到Travis CI
的构建队列中,据说Travis CI
每天运行超过4000
次完整构建。
环境搭建:
到 Node.js 官网下载相应平台的 最新版本 ,一路安装即可。我用的是 node-v0.10.22-x86.msi
Git的客户端很多,我用的是 msysgit ,喜欢用绿色版本 Portable application for official Git for Windows 1.8.4 ,下载下来设置一下环境变量即可,Git_HOME,%Git_HOME%\bin之类的,不多说。
Sublime Text 2 在这里仅仅作为一个文本编辑器使用,支持各种编程语言和文件格式,当然也支持Markdown语法,实在是个不可多得的练码奇才。喜欢追鲜的也可以尝试处于beta版本的 Sublime Text 3 。
- 配置和使用Github 以下教程主要参考beiyuu的《使用Github Pages建独立博客》写成。
- 配置SSH keys 我们如何让本地git项目与远程的github建立联系呢?用SSH keys。 打开Git Bash工具,执行以下操作
- 检查SSH keys的设置
首先我们需要检查你电脑上现有的ssh key:
$ cd ~/. ssh 检查本机的ssh密钥
如果提示:No such file or directory 说明你是第一次使用git。
生成新的SSH Key:
$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private 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系统。点击右上角的 Account Settings--->SSH Public keys ---> add another public keys
- 把你本地生成的密钥复制到里面(key文本框中), 点击 add key 就ok了
- 测试
可以输入下面的命令,看看设置是否成功,[email protected]的部分不要修改:
$ ssh -T [email protected]
如果是下面的反馈:
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.
设置用户信息:
现在你已经可以通过SSH链接到GitHub了,还有一些个人信息需要完善的。
Git会根据用户的名字和邮箱来记录提交。
GitHub也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。
$ git config --global user.name "cnfeat"//用户名
$ git config --global user.email "[email protected]"//填写自己的邮箱
SSH Key配置成功,本机已成功连接到github。
Hexo Hexo的作者是tommy351,根据官方介绍,Hexo是一个简单、快速、强大的博客发布工具,支持Markdown格式。hexo的主题列表 Hexo Themes。 我比较喜欢 pacman , modernist 、 ishgo , raytaylorism 。
打开Git Bash工具(前提确保Node.js已经安装,环境配置OK)
$ npm install -g hexo
注释:
执行命令:npm install -g hexo,报错如下:
npm ERR! Error: shasum check failed for C:\Users\ADMINI~1\AppData\Local\Temp\npm
-30024-KDJHJzgP\registry.npmjs.org\hexo-cli\-\hexo-cli-0.1.6.tgz
npm ERR! Expected: 7dc3ab939d0889c4bed6a961605ff3e2d67f67a2
npm ERR! Actual: 41de7d67a9b764352eb07c49c32fc38dd7f479b9
npm ERR! From: https://registry.npmjs.org/hexo-cli/-/hexo-cli-0.1.6.tgz
npm ERR! at d:\Program Files\nodejs\node_modules\npm\node_modules\sha\index.
js:38:8
npm ERR! at ReadStream.<anonymous> (d:\Program Files\nodejs\node_modules\npm
\node_modules\sha\index.js:85:7)
npm ERR! at ReadStream.emit (events.js:117:20)
npm ERR! at _stream_readable.js:943:16
npm ERR! at process._tickCallback (node.js:419:13)
npm ERR! If you need help, you may report this *entire* log,
npm ERR! including the npm and node versions, at:
npm ERR! <http://github.com/npm/npm/issues>
npm ERR! System Windows_NT 6.2.9200
npm ERR! command "d:\\Program Files\\nodejs\\node.exe" "d:\\Program Files\\nodej
s\\node_modules\\npm\\bin\\npm-cli.js" "install" "-g" "hexo"
npm ERR! cwd C:\Users\Administrator\Desktop
npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.23
npm ERR! registry error parsing json
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! C:\Users\Administrator\Desktop\npm-debug.log
npm ERR! not ok code 0
莫非是因为被墙了?换国内镜像源试试。
npm config set registry="http://registry.cnpmjs.org",
然后再次执行npm install -g hexo,成功!
在我的电脑中建立一个名字叫「Hexo」的文件夹,然后在此文件夹中右键打开Git Bash。
$ hexo init
如果无法使用右击“Git Bash”,则可以切换到指定目录
UUhike@UUhike-pc MINGW64 ~
$ cd j:/github/hexo
UUhike@UUhike-pc MINGW64 /j/github/hexo
安装依赖包
$ npm install
Hexo随后会自动在目标文件夹建立网站所需要的所有文件。
现在我们已经搭建起本地的hexo博客了,执行以下命令(在H:\hexo),然后到浏览器输入localhost:4000看看。
本地查看
$ hexo generate #生成静态页面至public目录(最终上传这个文件到GitHub)
$ hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
编辑E:\hexo下的_config.yml,修改Deployment部分:
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/luuman/luuman.github.io.git
branch: master
注释:
hexo d,执行该命令,报错:
ERROR Deployer not found: git
执行命令:
npm install hexo-deployer-git --save
再次执行hexo d,报错:
INFO Deploying: git
INFO Clearing .deploy folder...
INFO Copying files from public folder...
warning: LF will be replaced by CRLF in 2015/05/30/hello-world/index.html.
The file will have its original line endings in your working directory.
......
*** Please tell me who you are.
Run
git config --global user.email "[email protected]"
git config --global user.name "Your Name"
to set your account's default identity.
Omit --global to set the identity only in this repository.
fatal: unable to auto-detect email address (got 'Administrator@PC-201505290750.(none)')
Username for 'https://github.com': voidking
Password for 'https://[email protected]':
error: src refspec master does not match any.
error: failed to push some refs to 'https://github.com/voidking/voidking.github.io.git'
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: error: src refspec master does not match any.
error: failed to push some refs to 'https://github.com/voidking/voidking.github.io.git'
at ChildProcess.<anonymous> (E:\hexo\node_modules\hexo-deployer-git\node_modules\hexo-util\lib\spawn.js:42:17)
at ChildProcess.emit (events.js:98:17)
at maybeClose (child_process.js:756:16)
at Process.ChildProcess._handle.onexit (child_process.js:823:5)
hexo d,执行该命令,报错:
以下进入复制主题环节,如果那一步出现问题,或者修改后没有显示修改的结果,建议来来一个,再看看,可以解决很多问题。
$ hexo clean
$ hexo generate #生成静态页面至public目录(最终上传这个文件到GitHub)
$ hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
建立了Hexo文件,复制我的主题了到themes文件夹中
yilia
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
modernist
$ git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist
jacman
$ git clone https://github.com/cnfeat/cnfeat.git themes/jacman
修改Hexo目录下的config.yml配置文件中的theme属性,将其设置为jacman。同时请设置stylus属性中的compress值为true。 theme: jacman
注意:Hexo有两个config.yml文件,一个在根目录,一个在theme下,此时修改的是在根目录下的。
更新主题
$ cd themes/jacman
$ git pull
注意:为避免出错,请先备份你的_config.yml 文件后再升级 本地查看调试
$ hexo g #生成
$ hexo s #启动本地服务,进行文章预览调试
或者直接作用组合命令
$ hexo deploy -g
$ hexo server -g
简写:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
4、浏览器中查看效果
浏览器输入http://localhost:4000 ,查看搭建效果。此后的每次变更_config.yml文件或者上传文件都可以先用此命令调试,非常好用,尤其是当你想调试出自己想要的主题时。
#进阶篇:Hexo设置
网站搭建完成后,就可以根据自己爱好来对Hexo生成的网站进行设置了,对整站的设置,只要修改项目目录的hexo/_config.yml就可以了,这是我的设置,可供参考。
默认目录结构:
.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
├── themes
├── _config.yml
└── package.json
hexo/_config.yml
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #整站的基本信息
title: 1000 words a Day #网站标题
subtitle: Writing 1000 Words a Day Changes My Life #网站副标题
description: 学习总结 思考感悟 知识管理 #网站描述
author: cnFeat #网站作者,在下方显示
email: [email protected] #联系邮箱
language: zh-CN #主题实际的文件名称
timezone:
# URL #这项暂不配置,绑定域名后,欲创建sitemap.xml需要配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing 文章布局、写作格式的定义,不修改
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format 日期格式,不修改
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination 每页显示文章数,可以自定义,我将10改成了5
## Set per_page to 0 to disable pagination
per_page: 5
pagination_dir: page
# Disqus Disqus插件,我们会替换成“多说”,不修改
disqus_shortname:
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: spfk
# 自动生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
# Deployment 站点部署到github要配置,上一节中已经讲过
## Docs: http://zespia.tw/hexo/docs/deploy.html
deploy:
type: git
repository: [email protected]:luuman/luuman.github.io.git
branch: master
修改局部页面
页面展现的全部逻辑都在每个主题中控制,源代码在hexo\themes\主题名称\中:
hexo\themes\
├── languages #多语言
| ├── default.yml#默认语言
| └── zh-CN.yml #中文语言
├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
| ├── _partial #局部的布局,此目录下的*.ejs是对头尾等局部的控制
| └── _widget#小挂件的布局,页面下方小挂件的控制
├── source #源码
| ├── css#css源码
| | ├── _base #*.styl基础css
| | ├── _partial #*.styl局部css
| | ├── fonts #字体
| | ├── images #图片
| | └── style.styl #*.styl引入需要的css源码
| ├── fancybox #fancybox效果源码
| └── js #javascript源代码
├── _config.yml#主题配置文件
└── README.md #用GitHub的都知道
主题文档的配置
hexo\themes/_config.yml
# Header
menu:
主页: /
所有文章: /archives
# 随笔: /tags/随笔
# SubNav
subnav:
github: "#"
weibo: "#"
rss: "#"
zhihu: "#"
#douban: "#"
#mail: "#"
#facebook: "#"
#google: "#"
#twitter: "#"
#linkedin: "#"
rss: /atom.xml
# Content
excerpt_link: more
fancybox: true
mathjax: true
# Miscellaneous
google_analytics: ''
favicon: /favicon.png
#你的头像url
avatar: ""
#是否开启分享
share: true
#是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key(http://duoshuo-key.duoshuo.com/)
#若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
duoshuo: true
#是否开启云标签
tagcloud: true
#是否开启友情链接
#不开启——
#friends: false
#开启——
friends:
奥巴马的博客: http://localhost:4000/
卡卡的美丽传说: http://localhost:4000/
本泽马的博客: http://localhost:4000/
吉格斯的博客: http://localhost:4000/
习大大大不同: http://localhost:4000/
托蒂的博客: http://localhost:4000/
#是否开启“关于我”。
#不开启——
#aboutme: false
#开启——
aboutme: 我是谁,我从哪里来,我到哪里去?我就是我,是颜色不一样的吃货…
Travis CI
是目前新兴的开源持续集成构建项目,它与jenkins
,GO
的很明显的特别在于采用yaml
格式,简洁清新独树一帜。目前大多数的github项目都已经移入到Travis CI
的构建队列中,据说Travis CI
每天运行超过4000
次完整构建。
首先进入Travis CI官网,使用github
账号登录,如下图
登录成功后进入如下界面,以为我再此之前已经构建过,所以会用红色框内的内容,如果没有使用过是没有的。
然后点击
My Repositories
右边的+
,添加需要自动构建的repos
,进入如下页面。
可以看到这个界面会显示当前
github
账号的所以项目,如果没有显示,点击右上角的Sync account
按钮,就可以同步过来了,点击需要构建的repos
前面的按钮为ON
,再点击其后的原形设置图标,进入如下界面
如图中设置,将
Build only if .travis.yml is present
及另外两个设置为ON
,功能如字面意思不多说。
到目前为止,已经将需要构建的repos
开启,那么,我们如何在将源码提交到github
的时候,它就自动构建并将build
后的静态文件push
到我的静态文件branch
或者repos
呢(我是将build
后的静态文件放到一个单独的repos
了,也可以放在源码repos
的另一个branch
,例如起名叫hexo
),接下来说如何让Travis CI
访问github
.
我们需要在Travis
上配置Access Token
,就可以在构建完毕后自动push
到github
上保存静态文件的repos
了。
登录github,进入个人主页,点击setting
,进入界面后找到下图所指位置。
点击
Personal access tokens
,进入页面后,在点击右上角Generate new token
,会再次让输入github
密码,然后在Token description
下起一个名字,再勾选一些权限,我是全给勾选上了,在点击下面Generate token
这里就不多截图了。复制生成的token
码。
回到Travis
的setting
页面,如上面图,在Environment Variables
这一栏,点击Add
,起一个名字到Name
,将复制的token
码粘贴到Value
框中,到这步为止,已经完成了Travis
的设置。到博客源码根目录,创建一个.travis.yml
的配置文件,内容如下,附注释,注意缩进
language: node_js #设置语言
node_js: stable #设置相应的版本
install:
- npm install #安装hexo及插件
script:
- hexo clean #清除,或者缩写hexo c
- hexo generate #生成,或者缩写hexo g
after_script:
- cd ./public
- git init
- git config user.name "smuwjs" #修改name
- git config user.email "[email protected]" #修改email
- git add .
- git commit -m "update site"
- git push --force "https://${travis}@${GH_REF}" master:master #travis是在Travis中配置token的名称
branches:
only:
- blog-source #只监测blog-source,可根据自己情况设置,若是存放同一个仓库,这儿可以选择存放源码的branch,如hexo
env:
global:
- GH_REF: github.com/smuwjs/smuwjs.github.io.git #设置GH_REF,注意更改yourname
因为我是新起了一个repos
来存放静态文件了,所以上面的GH_REF
是对应那个repos
地址,若是放同一个repos
中,那这儿一般都是yourname.github.io
那个仓库。到此,配置已经完成了。
我们可以创建一篇文章hexo new post use-travis-build-your-hexo-site
,添加内容后,并push
到github
,正常情况下,进入Travis
网站就可以看到已经在构建了,如图
完成后,访问链接,就可以看到文章了。
hexo你的博客 如何搭建一个独立博客——简明Github Pages与Hexo教程 Hexo的使用介绍 Hexo插件安装