Hexo配合github搭建网站

作者: Alien的小窝 | 来源:发表于2016-08-19 17:31 被阅读424次

参考文章:
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

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

给文章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

网友评论

本文标题：Hexo配合github搭建网站

本文链接：https://www.haomeiwen.com/subject/emrbsttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

Hexo配合github搭建网站

安装问题 (mac)

安装git发布插件

部署步骤

常用命令

常见错误

Hexo版本回退

跳过渲染skip_render

小技巧

注意

杂项说明

hello.md文件内容

主题推荐

我的版本

配置永久链接

替换Google的js库和字体 (因为墙的缘故,如果更换主题，下面的步骤省略)

草稿功能

hexo主题推荐

source文件夹

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Hexo配合github搭建网站

安装问题 (mac)

安装git发布插件

部署步骤

常用命令

常见错误

Hexo版本回退

跳过渲染skip_render

小技巧

注意

杂项说明

hello.md文件内容

主题推荐

我的版本

配置永久链接

替换Google的js库 和字体 (因为墙的缘故,如果更换主题，下面的步骤省略)

草稿功能

hexo主题推荐

source文件夹

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

替换Google的js库和字体 (因为墙的缘故,如果更换主题，下面的步骤省略)