约定$命令行在git bash中执行,其余的在cmd中执行。
前期的准备
- git客户端
- github账号
- node.js
- 创建仓库
在开始一定要注意node的环境变量和系统变量的配置问题,有了webpack配置的前车之鉴,当出现
<command> 不是内部或外部命令也不是可运行的程序
时,首先想到的是环境变量的问题。如果没有设置,则不可以使用npm
本地安装node_modules
建立仓库时注意,仓库的名字必须是用户名.github.io(注意是必须!),接着配置SSH。
配置SSH
- 打开Git Bash终端:在桌面右键,会出现”Git Bash here”的选项,点击即可。
- 设置user name和email:
|
|
生成ssh密钥:
|
|
生成的包括id_rsa和id_rsa.pub。id_rsa文件是私钥
添加公钥到github:
头像 —> setting —> SSH and GPG keys选项 —> New SSH key(新建SSH),将id_rsa.pub中的内容复制到key文本框,再点击Add SSH key(添加SSH)
测试SSH
|
|
接下来会出来下面的确认信息:
|
|
博客本地仓库的创建
在本地创建Hexo(任意名字),前提是环境变量已配置完成。
|
|
本地安装hexo
- hexo全局安装
|
|
- 初始化hexo
|
|
- 安装依赖
|
|
- 启动hexo
|
|
启动之后,打开浏览器,在地址栏输入:http://localhost:4000,你会看到Hexo的示例页面。
测试hexo
- 新建文章
|
|
此时在source_posts文件夹中便会多出一个文档”title.md”.
如果要删除,直接在此文件夹下删除对应的文件即可。
- 生成静态页面
|
|
- 清除生成内容
|
|
执行此操作会删除public文件夹中的内容。
- 部署hexo
|
|
该操作会将hexo生成的静态内容部署到配置的仓库中
部署hexo
- 编辑配置文件,关联远程仓库:
在编辑器中打开Hexo配置文件_config.yml,找到下面内容并修改:
|
|
注意:type、repo、branch的前面有两个空格,后面的:后面有一个空格
安装git插件:
|
|
如果没有安装git插件,会有错误提示,安装后重新部署就可以了。
部署:
|
|
现在,可以使用http://<用户名>.github.io
查看你的博客了。
hexo常用参数设置
配置文件说明
网站配置文件是在根目录下的_config.yml(站点配置文件)文件,是yaml格式的。
所有的配置项后面的冒号(:)与值之间要有一个空格。
这个配置文件很长,但是需要修改的只有几项
|
|
常用插件
如果是扩展插件,要在_config.yml配置文件中添加插件信息,是plugins配置项。
比如下面的两个插件:
|
|
安装插件,后面要加上–save,表示依赖项。
- RSS订阅插件
hexo-generator-feed:生成rss订阅文件
|
|
添加配置信息
|
|
- SiteMap插件
hexo-generator-sitemap:生成易于搜索引擎搜素的网站地图
|
|
添加配置信息:
|
|
可以在主题配置文件中添加相关配置,可以在页面上显示。比如,添加链接信息
|
|
- Git插件
hexo-deployer-git:使用git同步代码到git仓库中
|
|
主题
默认的主题是landscape
官方主题地址:thems
切换主题
我是用的是next
,以此为例:
|
|
在站点配置文件_config.yml
文件中修改主题配置,比如修改theme: landscape为theme: next;
除了之前的主题git clone
和修改站点配置文件外,还需要以下的操作:
|
|
再打开网页,之前丑陋的landscape主题就被替换了。
更为详细的设置:NexT主题
使用travis部署hexo
现在博客基本可以运行了,但是如果需要多个电脑之间推送会不太方便。hexo使用的部署命令只是把静态文件上传到仓库中,在其他电脑同步下的只是静态文件而非源码。所以使用自动部署非常有必要。介绍使用Travis CI
持续集成并部署。
配置多个SSH
- 生成ssh密钥
可以使用全局的ssh密钥,不过建议使用单独的ssh密钥,在这里以单独ssh密钥为例。
|
|
输入上面命令后回车一下,当提示Enter file in which to save the key (/c/Users/Seay/.ssh/id_rsa):时,输入新的ssh密钥文件路径和文件名(不能是.ssh/id_rsa),这里输入id_rsa_blog,然后一路回车。
- 添加ssh到github
登录到github中,点击进入到博客仓库。点击右上方的Settings进入到设置页面,点击左边的Deploy keys项。
在右上点击Add deploy key,然后在下面输入标题,把生成的密钥id_rsa_blog.pub里面的内容复制到key文本框中,选中下面的Allow write access,最后点击Add key。
-
新建配置文件
在.ssh文件夹中创建一个名为config的配置文件。1$ touch config -
编辑配置信息
用编辑器打开config文件,添加如下信息:
|
|
提示:这里的密钥文件路径根据自己的做相应修改。
配置Travis
- 接入Travis
打开Travis CI,使用github账号登陆。
将鼠标放在右上角的用户名上,点击Account选项,会显示github的项目。
找到博客项目,点击前面带有 X 符号的按钮,开启travis支持。
- 安装travis
Travis安装需要Ruby环境,所有需要安装Ruby,并且需要安装rubygems插件。假设已经安装了Ruby!
|
|
- 新建配置文件
首先打开博客项目文件夹,在项目根目录新建.travis.yml配置文件。
|
|
- 复制ssh私钥
在项目根目录创建文件夹.travis
|
|
将开始生成的ssh密钥文件id_rsa_bolg复制到.travis文件夹下:
|
|
- ssh配置文件
这个ssh配置文件是用于在部署机器上使用的,不是本地的ssh配置文件,后面的travis配置文件会用到。
在.travis文件夹中新建文件ssh_config
|
|
编辑配置文件,添加如下内容:
|
|
- 登陆travis
|
|
根据提示输入github的用户名和密码。
-
加密操作
在这一步使用了其他的方法,也许是win7的电脑不一样,使用了另一种方法,第一种方法参考:常用配置方法。
当使用travis 加密操作时,travis encrypt 'REPO_TOKEN=<TOKEN>' --add
得到的反馈是:
Can't figure out GitHub repo name. Ensure you're in the repo directory, or speci fy the repo name via the -r option (e.g. travis <command> -r <owner>/<repo>)
按照错误提示重新加密:
travis encrypt -r Corbusier/Corbusier.github.io GH_Token=XXX
可以在CMD中得到形如:
|
|
将其复制到.travis.yml
配置文件中使用。
完整配置文件的参考:travis配置文件
本地提交操作
配置完成后需要本地提交,删除原先产生的.git
文件夹,执行初始化操作:
$ git init
关联远程仓库
|
|
- 推送仓库提交本地修改,推送至github仓库。
|
|
在commit后,推送至dev
分支前,需要先查看git分支,然后创建dev
分支后才能推送成功,附git基础命令:
git基础命令
push本地的代码至远程仓库之后,在https://travis-ci.org后台查看相关情况。
下面是成功的结果:
!!!之后用图取代链接
travis
以上就是自动部署Hexo的另一方法。
异地同步博客内容
如何将两台电脑上博客的内容同步内,即两台电脑上都可以编辑更新博客?要解决这个问题,首先我们要清楚我们博客文件的组成:
- node_modules
- public
- scaffolds
- source
- themes
- _config_yml
- db.json
- package.json
- .deploy_git
我们博客上呈现的内容,其实就是public下的文件内容。那么这个Pulic目录是怎么生成的呢?
以下文件以及目录是必须要同步的:
- source
- themes
- _config.yml
- db.json
- package.json
- .deploy_git
采用github去备份,也就是新建一个项目用来存放以上文件,每次更新后推送到github上,用作备份同步。
假设我们现在配置了一台新电脑,里面没有安装任何有关博客的东西,那么我们开始吧:
- 下载node.js并安装(官网下载安装),默认会安装npm。
- 下载安装git(官网下载安装)
- 下载安装hexo。方法:打开cmd 运行npm install -g hexo(要翻墙)
- 新建一个文件夹,如MyBlog
- 进入该文件夹内,右击运行git,输入:hexo init(生成hexo模板,可能要翻墙)
我们重复了一开始搭建博客的步骤,重新生成了一个新的模板,这个模板中包含了hexo生成的一些文件。
- git clone 我们备份的项目,生成一个文件夹,如:MyBlogData
- 将MyBlog里面的node_modules、scaffolds文件夹复制到MyBlogData里面。
做完这些,从表面上看,两台电脑上MyBlogData目录下的文件应该都是一样的了。那么我们运行hexo g && hexo d试试,如果会报错,则往下看。
这是因为.deploy_git没有同步,在MyBlogData目录内运行:npm install hexo-deployer-git –save后再次推送即可
总结流程:当我们每次更新MyBlog内容后,先利用hexo将public推送到github,然后再将其余必须同步的文件利用git推送到github。
附录
hexo常用命令
|
|
扩展hexo
添加最近访客
在需要添加最近访客的网页对应的 markdown 文件中添加如下代码:
|
|
鼠标点击小红心的设置
- 将 love.js 文件添加到 \themes\next\source\js\src 文件目录下。
- 找到 \themes\next\layout_layout.swing 文件, 在文件的后面, 标签之前 添加以下代码:
|
|
背景的设置
- 将 particle.js 文件添加到 \themes\next\source\js\src 文件目录下。
- 找到 \themes\next\layout_layout.swing 文件, 在文件的后面,标签之前 添加以下代码:
|
|
修改文章内链接文本样式
将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。
找到文件 themes\next\source\css_custom\custom.styl ,添加如下 css 样式:
|
|
添加来必力评论功能
给 Github 添加 README
默认情况下,Github中每一个项目,我们希望有一份 README.md 的文件来作为项目的说明,但是我们在项目根目录下的 blog\source 目录下创建一份 README.md 文件,写好说明介绍,部署的时候,这个 README.md 会被 hexo 解析掉,而不会被解析到 Github 中去的。
正确的解决方法其实很简单:
把 README.md 文件的后缀名改成 “MDOWN” 然后扔到blog/source文件夹下即可,这样 hexo 不会解析,Github 也会将其作为 MD 文件解析。