Hexo框架+NextT主题搭建博客教程(部署到coding net)

最近这一阵子把博客托管到 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) , 需要注意一下:

  1. 所谓的子目录不是指在 your_username.coding.me 仓库下有个名为 blog
    的目录,而是另一个仓库。你需要新建一个名为 blog 的仓库,并开启 coding pages 分支服务,如果是 github 就开启 gh-pages 分支服务 。

  2. 将hexo站点配置文件的 url 设为: https://your_username.coding.me/blog , 并把 root 设为 /blog/

  3. 修改站点配置文件 deploy 参数内容

这里写图片描述

至此,就完成了基本的搭建,先用命令在本地服务器查看内容是否正确。

hexo g
hexo s

确定无误后再部署到远程仓库

hexo d

这时访问 https://your_username.coding.me/blog 就可以看到你的博客了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342