Hexo配合github搭建网站
参考文章:
https://xuanwo.org/2014/08/14/hexo-usual-problem/
https://hexo.io/zh-cn/docs/server.html
http://www.jianshu.com/p/ffcdc4fec6ec
安装问题 (mac)
执行如下命令安装Hexo：
sudo npm install -g hexo
修改为
sudo npm install --unsafe-perm --verbose -g hexo(完装完成发现什么都木有)
github上的安装说明
$ npm install hexo-cli -g
npm install hexo --no-optional (或试试这个)
安装git发布插件
Install hexo-deployer-git.
$ npm install hexo-deployer-git --save
插件的配置在 _config.yml中
Paste_Image.png
部署步骤
部署步骤
** hexo clean**
** hexo generate** 重新生成静态文件
** hexo deploy** Deploy to remote sites
常用命令
一些常用命令：
hexo new"postName" #新建文章
hexo new page"pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
hexo d 部署 可与hexo g合并为 hexo d -g
hexo server Hexo 会监视文件变动并自动更新，您无须重启服务器。
hexo server -s 静态模式
hexo server -p 5000 更改端口
hexo server -i 192.168.1.1 自定义 IP
常见错误
-
github配置问题
Paste_Image.png
- Hexo命令失效
检查_config.yml中的内容，特别注意:后面需要有一个空格。
检查`package.json’中的内容，注意添加hexo信息用来标识这是一个hexo目录：
{
"hexo": {
"version": ""
}
}
如果还是有问题，可以更新hexo之后，在新的文件夹中重新进行hexo init。
- 输入hexo g 后，报错如下：
Paste_Image.png
主题目录下所有yml文件中所有有空格的字段都用双引号括起来，尤其注意languages下面的yml文件
Paste_Image.png
-
修改主题文件之后，网页不更新
hexo clean
并且删除.deploy_git
文件夹之后，hexo d -g。为了强制浏览器更新资源文件，可以采用’Ctrl+F5’来刷新。 -
更新至3.0.0版本后，文件渲染时卡死
问题出在Highlight.js
在判断语言类型时，会因为-
这个符号导致卡死。
解决方案：
在使用代码块时，明确使用类型，或者全部使用plain
类型，如下：
undefined
Hexo版本回退
有时候更新之后发现新版本的Hexo不能按照预期的方式工作，这时候就需要使用版本回退功能。打开命令行，输入npm install -g hexo@版本号
就可以回退到没有出现问题的版本上来。
这个命令适用于所有Node.js模块
少数情况下会出现Node.js版本问题，可以使用nvm install 版本号
来安装报错信息中需要的版本。
推荐使用nvm来管理Node.js版本
跳过渲染skip_render
不处理source目录的个别文件
有时候我们要写一些Demo一起放到博客上去，默认情况下，Hexo也会将这部分Demo进行处理，导致这些Demo页面渲染上了博客主题，如何不处理这些Demo页面呢?
假设你的Source文件夹里面有个Demo目录，要忽略Demo目录下的所有html页面，可以通过在_config.yml设置skip_render来忽略的目录，具体如下：
skip_render: Demo/*.html
文件匹配是基于正则匹配的，更复杂的情况如下
1.单个文件夹下全部文件：skip_render: demo/*
2.单个文件夹下指定类型文件：skip_render: demo/.html
3.单个文件夹下全部文件以及子目录:skip_render: demo/*
4.多个文件夹以及各种复杂情况：
skip_render: - 'demo/.html' - 'demo/*'
小技巧
那就是利用主题的source目录，也就是themes/themes-name/source。因为这个文件夹里面的所有文件都会被复制到网站的根目录中去，也就是说，如果在里面放上README，就可以正常的存在于网站的主目录了。
注意
在source文件夹下的所有md文件都会被hexo渲染成html文件
如何在不同电脑（系统）上使用Hexo
使用Git来管理自己的Blog文件夹，需要注意一下几点。
-
如果主题是通过git管理的，需要将主题文件夹下的.git文件夹删除或者使用git submodule的形式进行管理，才能同步Blog文件夹。
-
Blog目录下自带的.gitignore文件，node_modules文件夹是不会同步的，所以同步之后需要自己再次进行npm install(应该是为了再次初始化node_modules文件夹)，但是注意，不要进行hexo init了，否则_config.yml会被覆盖。
会被同步的目录展示
Paste_Image.png
本机hexo目录展示
Paste_Image.png
杂项说明
文章都保存在source/_posts, 文章支持Markdown语法。
如果想修改头像可以直接在主题的_config.yml文件里面修改，友情链接... 都在这。
theme:yilia
改成theme: yilia，theme:后面接你自己的主题名字就行了
,然后分别执行
部署 hexo g
提交 hexo d
你的主题，和名字就修改成功了
网站存放在子目录如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将的 url 设为http://yoursite.com/blog 并把 root 设为 /blog/
根据模板建立文章
$ hexo new photo "My Gallery"
Paste_Image.png
Paste_Image.png
Paste_Image.png
hello.md文件内容
title: hello
date: 2016-08-19 14:47:35
tags:
Paste_Image.png
配置git
Paste_Image.png
主题推荐
这里有大量的主题列表使用方法里面
都有详细的介绍，我就不多说了。
我这里有几款个人认为不错的主题，免去你们，一个一个的选了，欢迎吐槽我的审美，😄
Cover- A chic theme with facebook-like cover photo
Oishi- A white theme based on Landscape plus and Writing.
Sidebar- Another theme based on Light with a simple sidebar
TKL- A responsive design theme for Hexo. 一个设计优雅的响应式主题
Tinnypp- A clean, simple theme based on Tinny
Writing- A small and simple hexo theme based on Light
Yilia- Responsive and simple style 优雅简洁响应式主题，我用得就是这个。
Pacman voidy- A theme with dynamic tagcloud and dynamic snow
我的版本
Paste_Image.png
Hexo 有三种默认布局：post,page 和 draft. 它们分别对应不同的路径，而您自定义的其他布局和post 相同，都将储存到 source/_posts 文件夹。
Paste_Image.png
配置永久链接
您可以在 _config.yml
配置中调整网站的永久链接或者在每篇文章的 Front-matter (每个.md文件的---区域)中指定
Paste_Image.png
**下图中的这些都是变量，是在_config.yml中配置，然后hexo生成相应的值到xx.md中 **
Paste_Image.png
default_category: uncategorized（默认安装时候的值）
您可在 permalink_defaults 参数下调整永久链接中各变量的默认值
permalink_defaults:
lang: en
year: 2000 //实际中这里肯定不会写死了，举个例子而已
如图，3中不同的配置生成的链接效果
Paste_Image.png
Paste_Image.png
如按照 语种生成的链接
Paste_Image.png
给文章md文件夹标签和分类
Paste_Image.png
替换Google的js库 和字体 (因为墙的缘故,如果更换主题，下面的步骤省略)
我们要修改的是themes/landscape/layout/_partial/after-footer.ejs这个文件，将17行的
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-2.0.3.min.js' type='text/javascript'%3E%3C/script%3E"));
}
// ]]>
</script>
这里不但将Google的jQuery替换成了百度的，随后还进行了一个判断，如果获取百度的jQuery失败，则使用本网站自己的jQuery。为了让这段代码有效，我们要去jQuery官方下载合适版本的jQuery并将其放到themes/landscape/source/js/目录下，我将其命名为jquery-2.0.3.min.js。
还有一点需要特别注意，那就是jQuery这个文件在hexo生产博客时会被解析，因此一定要将jQuery文件开头处的//@ sourceMappingURL=jquery-2.0.3.min.map这一行代码删去，否则会导致博客无法生成。
跨平台字体优化
修改themes/landscape/source/css/_variables.styl这一文件
将其中第22行
font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif
改成如下内容：
font-sans = "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN", "WenQuanYi Micro Hei", Arial, sans-serif
代码等宽字体优化
font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
改为
font-mono = Consolas, Monaco, Menlo, monospace
最后我们要删除引用Google字体的代码
要编辑的文件是themes/landscape/layout/_partial/after-footer.ejs，将其中的下列代码删除。
<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
草稿功能
草稿
草稿相当于很多博客都有的“私密文章”功能。
============================
$ hexo new draft "new draft"
会在source/_drafts目录下生成一个new-draft.md文件。但是这个文件不被显示在页面上，链接也访问不到。也就是说如果你想把某一篇文章移除显示，又不舍得删除，可以把它移动到_drafts目录之中。
如果你希望强行预览草稿，更改配置文件：
render_drafts: true
或者，如下方式启动server：
$ hexo server --drafts
下面这条命令可以把草稿变成文章，或者页面：
$ hexo publish [layout] <filename>
hexo主题推荐
https://www.zhihu.com/question/24422335
source文件夹
资源文件夹，除了模板以外的 Asset，例如 CSS、JavaScript 文件等，都应该放在这个文件夹中。文件或文件夹开头名称为 _
（下划线线）或隐藏的文件会被忽略。
如果文件可以被渲染的话，会经过解析然后储存到 public
文件夹，否则会直接拷贝到 public
文件夹。
Paste_Image.png
Paste_Image.png
