最近这一阵子把博客托管到 coding net 上去了,并使用Hexo框架和NextT主题来搭建博客,正如部分网友所说的那样,真是踩坑无数。为此记录下我的搭建过程,有需要的网友也可参考一下,点击查看本人博客网站 。(以下内容针对Windows平台,并且笔者假设读者对 git 有基本的了解,可以参考我另一篇博文关于git的基本使用)
使用Hexo框架
安装Hexo
注意,使用 Hexo 框架前确保已经安装了 node.js 运行环境(可查看菜鸟教程下载安装) 和 git for windows,需要使用 git bash 命令窗口,虽然使用 cmd 控制台也可以,但是不建议使用 cmd ,具体原因你懂得。
安装好 node.js 的同时也会安装 npm 这个模块管理工具了。
用 npm install hexo-cli -g 命令下载安装 hexo-cli 时速度极其之慢。因此可以先下载安装淘宝的和npm功能一样的 cnpm。
npm install -g cnpm --registy=https://registry.npm.taobao.org
安装 cnpm 以后使用 cnpm 安装 hexo-cli
cnpm install hexo-cli -g
//参数-g是全局安装的意思
其实 cnpm 在使用上与 npm 没什么区别,就多了个 c 字母,当然,理论上它的下载安装速度会比 npm 快很多,当你觉得 用 npm 很龟速时,尝试下 cnpm 吧!( 以下还是会以 npm 进行说明)
安装完 hexo 后,可用 hexo -v 查看版本,是否安装成功。
初始化Hexo目录结构
新建一个目录,cd 进入
使用命令:
hexo init
将会在该目录下初始化Hexo的目录结构,如下图所示:
同时建议也安装好 hexo-deployer-git 插件,在到时部署到远程仓库要用到,命令:
npm install hexo-deployer-git --save
Name | Description |
---|---|
node_modules | 插件模块,包括Hexo相关的插件 |
public | 公共资源目录,存放生成的站点文件 |
scaffolds | 模板目录,可根据里面的文件生成文章 |
source | 资源文件夹,存放发布文章或草稿 |
themes | 主题文件夹 |
.gitignore | 忽略部署的文件或目录 |
_config.yml | 站点配置文件,可在里面设置站点的各种参数 |
db.json | 数据依赖 |
packgae.json | 版本依赖 |
图中各目录或文件大致介绍:
Name | Description |
---|---|
node_modules | 插件模块,包括Hexo相关的插件 |
public | 公共资源目录,存放生成的站点文件 |
scaffolds | 模板目录,可根据里面的文件生成文章 |
source | 资源文件夹,存放发布文章或草稿 |
themes | 主题文件夹 |
.gitignore | 忽略部署的文件或目录 |
_config.yml | 站点配置文件,可在里面设置站点的各种参数 |
db.json | 数据依赖 |
packgae.json | 版本依赖 |
生成页面类别
hexo new page "category_name"
生成一个页面目录在 source目录下,通常指的是分类页面
编写文章
生成文章命令:
hexo new [layout] "article_name"
//这个layout 是可选的,它就是指 scaffold 模板目录下的模板文件名,如果指定layout名,hexo 将会根据 layout 给文章生成 front-matter,格式头,指定文章的标签,类别,名字等。
执行这个命令将会默认在source目录中的 _posts 中生成一个名为 article_name.md 的文章,注意_posts中的文章就是要发表的文章,如果你只是想作为草稿文章,可以在 source 目录新建一个_drafts 目录,并在 config.yml 站点配置文件中修改 default_layout 参数值为: draft,这样在执行上面的命令时候就会默认在 _drafts 目录下生成文章
发表文章
hexo publish [layout] <article_name>
//如果有 _drafts 目录,就会自动将文章发表到 _posts 目录下
生成站点文件
hexo generate
//可简写为 hexo g
会将 source 目录中除了 _ 开头的目录或文件生成到 public 文件夹下。
部署站点
hexo deploy
//可简写为 hexo d
注意,我这里给出的是正常流程的命令。关于站点的配置,如站点名字,url,远程仓库名等还需要自己配置好。
更多详细介绍,可以参考 <a href="https://hexo.io/zh-cn/docs/" target="_blank">Hexo 文档</a>,在这里我就不过多叙述了。
NexT 主题使用
安装NextT
cd hexo_home
git clone https://github.com/iissan/hexo-theme-next themes-next
//执行该命令将会将 next 主题克隆到 themes 目录下,原本该目录已经有了一个名为 landscape 的主题.
克隆完了后修改_config.yml 将主题修改为 next.
验证主题能否成功应用:
hexo g
hexo s -debug
//执行完毕访问 localhost:4000 看是否正常, 否则根据 debug 信息看下哪里出错了。
主题设定
该主题有三种外观,分别是:
- Muse - 默认scheme,黑白主调,大量留白
- Mist – Muse的紧凑版本,整洁有序的单栏外观
- Pisces – 双栏 scheme ,小清新
搜索scheme关键字,切换scheme通过更改主题配置文件,就是 next 目录下的 _config.yml 文件。
语言设定
设置侧栏
设置侧栏位置
sidebar:
position: left
设置侧栏显示的时机
修改 sidebar.display 的值,支持的选项有:
- post -默认行为,在文章页面(拥有目录列表)时显示
- always -在所有页面中显示
- hide -在所有页面中都隐藏(可以手动展开)
- remove -完全移除
更多详细介绍请参考<a href="http://theme-next.iissnan.com/getting-started.html" target="_blank">NexT主题文档.</a>
部署到coding net
首先在coding net 上创建一个仓库,仓库名为: <你的用户名>.coding.me
开启 coding pages 服务请参考<a href="https://coding.net/help/doc/pages/getting-started.html">coding pages帮助文档</a>
本人是把博客部署到站点的字目录下的,如: https://yekongle.coding.me/blog , 就是我的博客站点。
如果你也想部署到子目录下 (假设该子目录是 blog) , 需要注意一下:
所谓的子目录不是指在 your_username.coding.me 仓库下有个名为 blog
的目录,而是另一个仓库。你需要新建一个名为 blog 的仓库,并开启 coding pages 分支服务,如果是 github 就开启 gh-pages 分支服务 。将hexo站点配置文件的 url 设为: https://your_username.coding.me/blog , 并把 root 设为 /blog/
修改站点配置文件 deploy 参数内容
至此,就完成了基本的搭建,先用命令在本地服务器查看内容是否正确。
hexo g
hexo s
确定无误后再部署到远程仓库
hexo d
这时访问 https://your_username.coding.me/blog 就可以看到你的博客了。