一起来做博客——主题和部署
在之前的教程中,我已经给大家讲解了域名和空间的选择,今天就以制作一个hexo博客为例来讲解主题的制作和部署。
教程之前,还是那句话,不管用什么,看官方文档始终是王道:hexo docs。
安装hexo
hexo是用node.js开发的,所以我们先要安装node.js环境,去node.js官网,点击INSTALL就可以根据你的系统版本下载相应的安装包。
安装完成后,在命令行运行:
1 | npm install hexo-cli -g |
以全局方式安装hexo。
因为我是用的gitcafe作为托管空间,所以还会用到git命令,我们需要安装git环境:http://git-scm.com/downloads,然后在git bash命令下配置你的账户信息:你的名字和Email地址
1 | git config --global user.name "Your Name" |
接着运行命令生成ssh key:
1 | ssh-keygen |
一路enter下去会在你的用户主目录里找到.ssh目录,里面有id_rsa和id_rsa.pub两个文件,这两个就是SSH Key的秘钥对,id_rsa是私钥,不能泄露出去,id_rsa.pub是公钥,可以放心地告诉任何人。
登录gitcafe,在账户设置——>SSH公钥管理
的公钥框里粘贴id_rsa.pub文件的内容,名称自己随便定义一个。
创建博客项目
在你想放你博客文件的文件夹下打开命令行窗口,然后运行命令:
1 | hexo init |
这样便成功创建了一个hexo项目,或者你也可以直接:
1 | hexo init path/folder |
这样来创建项目。
创建完成后你会在你的文件夹里面看到它已经为你生成了一些东西。
这里我们主要关注这几个:
_config.yml:站点的配置文件
source: 网站文章的源文件目录
themes: 主题目录
站点配置
站点配置项在_config.yml文件,在布局里面的获取方式是通过config
前缀来获取,如我们想获取里面的配置项title
,则:
1 | // 这里是用ejs作为模板的示例 |
下面里我讲几个关键的配置项。
1 | ## url格式 详细:http://hexo.io/docs/permalinks.html |
关于repo是git项目的url,
在github项目里面我们在项目页面右下方Clone in Desktop
上方点一下SSH
切换到SSH clone URL
,里面的链接即repository url
,如下图:
在gitcafe项目中,如下图:
下面是一个github的代码部署配置示例:
1 | deploy: |
下面是同时部署到github和gitcafe的配置示例(注意下面行前面是空两格,不是tab):
1 | deploy: |
主题制作
下面是一个标准的主题文件夹目录结构
--languages/
--layout/
--source/
-- _config.yml
languages:语言配置信息
layout:布局文件目录
source:css、images、js等静态文件目录
主题配置
主题配置项是主题文件夹下面的_config.yml文件,如我有这样的配置:
1 | site: |
则我在布局中通过theme前缀来引用,如:
1 | <%= theme.site.author %> |
主题插件,官方文档在这里:Plugins
我的博客里面用到了两个插件,配置如下:
1 | plugins: |
在主题配置文件里面你可以把一些比较固定的东西配置在里面,如我配置了一些东西:
1 | ## Links |
可以根据自己的需要自己配置。
主题布局
hexo支持多种模板,这里我选择ejs作为页面模板。主题的标准页面模板如下:
归档页模板:archive.ejs
栏目页模板:categoty.ejs
首页模板:index.ejs
布局页模板:layout.ejs(默认每个页面都继承,在模板前显示申明layout: false)
分页页模板:page.ejs
标签页模板:tag.ejs
主题的布局建议先写好html模板,然后套标签,这里我只给出一些关键的代码:
1 | <!-- 包含文件并传参,这里包含了_partial/article.ejs文件,然后把item作为item传过去 --> |
1 | // 站点的所有分类 |
下面是官方整理的一些主题列表,有什么不懂的地方可以多参看以下别人的代码:https://github.com/tommy351/hexo/wiki/Themes
主题制作好了之后便是生成和部署了,直接在博客文件夹打开命令行,运行如下命令:
1 | // 生成静态页面 |
如果改动了主题文件,需要先运行一下:
1 | hexo clean |
清理缓存后再进行生成和部署。
完成之后就可以在你的gitcafe/github的项目里面看到整个博客静态页面了。
文章写作
文章写作默认是用的markdown,不懂其语法的可以看看这里:Markdown语法说明,这篇后面还推荐了一些Markdown 免费编辑器。
所有的文章markdown源文件都默认放在博客项目根目录的source/_posts
目录下面,下面是示例:
1 | title: 一起来做博客——主题和部署 |
有关文章写作的更多信息请看:http://hexo.io/docs/writing.html
自定义404
在根目录的source
文件夹下新建404.html
,下面是我用的公益的简单404页面代码:
1 | layout: false |