怎么使用hexo建立个人博客 所需环境
安装
使用npm安装Hexo
1 $ npm install -g hexo-cli
安装完成后，可以输入hexo --version查看版本，确认是否安装
初始化Hexo
然后选择一个文件夹建立
或者建立一个文件夹cd <新文件夹>然后
确定路径正确后，使用下面指令，安装所需的npm套件
完成后，进入文件夹可以看到下面的文件
1 2 3 4 5 6 7 8 . ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes
如下图所示 _config.yml
有关网站配置的档案，可修改各种配置设定。 例如：网站标题、网站的网址、使用主题名称等等
详细内容可以参考官方文件
package.json 记录所有载入的应用程序资料，也就是专案中需要的所有模组。
scaffolds 模板
当我们建立新文章时，Hexo 会根据 scaffolds 中的模板建立相对应的档案
资料夹中有三种预设布局 ：post、page 和 draft，分别对应：要发布的文章、页面、草稿
themes 主题
用来存放主题的资料夹
Hexo 会根据主题来解析 scouce 资料夹中的档案并产生静态页面。 预设主题为 landscape
source 资源
用来存放原始档案的地方，例如 Markdown 档、图片、各种页面（分页、关于等）
通常资料夹命名开头会加上底线 _，例如 _imgs
以 _ 开头的档案、资料夹或隐藏档案会被忽略，除了 _posts 资料夹以外
Markdown 档和 HTML 档会被解析，并放到 public 资料夹，而其他档案则会被拷贝过去
source & public & .deploy_git 的差别
执行 $ hexo generate 之后，会将 scorce 文件夹中的 Markdown 档和 HTML 档进行解析，再结合主题进行渲染，生成我们看到的静态网站
执行 $ hexo deploy 之后，则会将 public 文件夹中的内容部署到 GitHub，并生成 .deploy_git 资料夹，因此内容与 public 几乎相同
这三者的关系可想成：
1 source -> public -> .deploy_git
常用指令 接着介绍一些 Hexo 常会用到的相关指令语法，更多详细指令可参考官方文件 。
new 新增文章 1 $ hexo new [layout] <title>
如果没有设定 layout，则会使用 _config.yml 中的 default_layout 来设定
如果标题有包含空格，需使用引号括住，例如" title"
接着可直接到 /source/_posts/title.md 中编辑文章内容
档案名称尽量以英文命名，避免出现乱码
若是对 Markdown 相关语法不熟悉，可参考这篇笔记：Markdown 格式介绍
clean 清除静态档案与快取 在每次储存修正后的档案之前，会建议先输入此指令，清除快取档案 （db.json）和已产生的静态档案（public）。
generate 产生静态档案 可简写成 hexo g，生成静态档案。
server 启动服务器
部署到Github 基本部署 在git bash输入ssh -T git@github.com ，如果如下图所示，出现你的用户名，那就成功了。 然后，我们将hexo与Github关联起来，将Hexo上的文章部署到GitHub上，打开博客根目录下的_config.yml文件，修改最后一行的配置：（如下） 1 2 3 4 5 deploy: type: git repository: https://github.com/carrollpolo.github.io branch: master
repository修改为你自己的github项目地址即可，就是部署时，告诉工具，将生成网页通过git方式上传到你对应的链接仓库中。这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。
命令如下：
1 npm install hexo-deployer-git --save
之后使用命令将文章部署到Github 然后，你就可以在相应的域名找到你的博客了
别忘记在GitHub page页面开启网站 打开Settings
打开Page
更换为master分支，点击save，过一段时间就会出现https://carrollpolo.github.io 域名了
Icarus 主题自定义 本文是基于icarus 5.x的版本（4.x的版本差别不大）
布局 文章页面两栏布局config.post.yml把需要的widget显示在一边即可，可以参考官方文档。
但两栏整体宽度跟三栏不同，因此强制指定为三栏布局，并且修改相应的宽度，这样所有的页面侧边栏宽度保持一致。
1 2 3 4 5 6 7 8 9 10 widgets: - type: recent_posts position: left - type: categories position: left - type: tags position: left
diff:layout/layout.jsx如下
1 2 3 4 <Head site={site} config={config} helper={helper} page={page} /> - <body class={`is-${columnCount}-column`}> + <body class={`is-3-column`}> <Navbar config={config} helper={helper} page={page} />
diff:layout/layout.jsx如下
1 2 3 4 'is-12': columnCount === 1, - 'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2, + 'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2, 'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
diff:layout/common/widgets.jsx如下
1 2 3 4 5 6 7 8 function getColumnSizeClass(columnCount) { switch (columnCount) { case 2: - return 'is-4-tablet is-4-desktop is-4-widescreen'; + return 'is-4-tablet is-4-desktop is-3-widescreen'; case 3: return 'is-4-tablet is-4-desktop is-3-widescreen'; }
并优化在不同屏幕小大下的宽度
diff:include/style/responsive.styl如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 +widescreen() + .is-3-column .container + max-width: $widescreen - $gap + width: $widescreen - $gap + .is-1-column .container, .is-2-column .container max-width: $desktop - 2 * $gap width: $desktop - 2 * $gap +fullhd() + .is-3-column .container + max-width: $fullhd - 2 * $gap + width: $fullhd - 2 * $gap + .is-2-column .container max-width: $widescreen - 2 * $gap width: $widescreen - 2 * $gap
目录粘性定位 原来只支持侧边栏整体粘性定位，为了阅读体验，只针对目录开启粘性定位，增加 column-left is-sticky 类，并调整样式
diff:source/js/main.js如下
1 2 3 if ($toc.length > 0) { + $toc.addClass('column-left is-sticky'); const $mask = $('<div>');
diff:include/style/widget.styl如下
1 2 3 +#toc + max-height: calc(100vh - 22px) + overflow-y: scroll
默认显示目录 新版支持直接配置，在_config.yml增加toc: true即可
