Catalog
  1. 1. 开始
    1. 1.1. 什么是Hexo?
    2. 1.2. 如何安装?
      1. 1.2.1. 准备工作
      2. 1.2.2. 前期准备
        1. 1.2.2.1. 安装Node.js
        2. 1.2.2.2. 安装Git
        3. 1.2.2.3. 安装Hexo
      3. 1.2.3. 初始化Hexo文件夹
    3. 1.3. 配置网站
    4. 1.4. 部署网站
    5. 1.5. 撰写文章
  2. 2. 小技巧
    1. 2.1. 添加自定义域名
    2. 2.2. 自定义404页面
    3. 2.3. 添加看板娘(live2d)
    4. 2.4. 搜索引擎站点认证
    5. 2.5. 添加站点地图
    6. 2.6. 添加RSS订阅
    7. 2.7. 按钮调用邮件应用
  3. 3. 结尾
最全面的Hexo部署方法,交给你了~

温馨提示:推荐点击左下角箭头打开目录,方便你更好地找到内容!

开始

什么是Hexo?

(我不多BB了,去看官网吧,介绍什么的真的不适合我……)

如何安装?

准备工作

你需要的东西有:

一个带有Page服务的仓库(推荐Github,Coding)

一台电脑(Windows或Linux均可,差别不大)

最后就是耐心(这个过程可能会很枯燥的说~)

前期准备
安装Node.js

安装 Node.js 的最佳方式是使用 nvm。nvm 的开发者提供了一个自动安装 nvm 的简单脚本:

Curl:
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | sh
wget:
$ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | sh
安装完成后,重启终端并执行下列命令即可安装 Node.js。
$ nvm install stable
Windows 用户

对于windows用户来说,建议使用安装程序进行安装。安装时,请勾选Add to PATH选项。
另外,您也可以使用Git Bash,这是git for windows自带的一组程序,提供了Linux风格的shell,在该环境下,您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单,在任意位置单击右键,选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行,您可以考虑始终使用Git Bash来进行操作。

Linux 用户

大部分 Linux 发行版都会在它们的默认软件包仓库中分发 Node.js。第三方仓库 NodeSource 通常能分发最新版本的 Node.js。

可选操作:

由于众所周知的原因,使用npm进行安装速度十分缓慢。也可以参考这个页面,利用国内镜像安装npm模块。

安装Git

Windows:下载并安装 git.
Mac:使用 Homebrew, MacPorts :brew install git;或下载 安装程序 安装。
Linux (Ubuntu, Debian):sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

Windows 用户

由于众所周知的原因,从上面的链接下载git for windows最好挂上一个代理,否则下载速度十分缓慢。也可以参考这个页面,收录了存储于百度云的下载地址。

安装Hexo

当你确定你已经安装完了Node.js和Git,就可以使用npm安装hexo了,使用

$ npm install -g hexo-cli

或(安装了cnpm国内镜像的情况下,下面所有的npm命令均可换为cnpm命令,下面不再说明

$ cnpm install -g hexo-cli
初始化Hexo文件夹

在你认为合适的地方新建一个文件夹,文件夹名字自拟,然后使用

$ hexo init

来初始化你的文件夹(文件夹必须是空的),并且使用

$ npm install

来安装相关的依赖库!

初始化库和安装依赖

配置网站

当你安装完所有的依赖以后,你就可以配置你的网站。

你也可以使用

1
$ hexo s

来进行本地调试,在浏览器中输入localhost:4000进入自己的网站。

关于hexo目录下的_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Site
title: <title> #自己的网页名字,将在标签页标题中显示为<title> - <subtitle>
subtitle: <subtitle> #副标题,在标签页标题显示
description: <descr> #网页描述(讲真我不知道有啥用)
keywords: <keywords> #网页搜索关键词
author: <author> #网页作者
language: en #网页语言,若主题支持中文可以不用改
timezone: #时区,可以不改

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com #网页网址,一般填写主页的地址,例如我的网页就填http://bili33.top
root: / #网站根目录,可以不改
permalink: :year/:month/:day/:title/ #网页永久链接格式,可以自己修改
permalink_defaults:

关于主题:

主题可以去https://hexo.io/themes/找,也可以在github逛一逛,说不定就找到好主题了呢?

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape # 主题名字,landscape是默认主题,改成你的主题文件夹的名字即可!

在clone的时候建议用git clone <address> theme/<theme name> 这样方便管理~

关于主题的配置,详情请见各主题说明文档!

部署网站

在准备东西的时候,我们准备了一个github(或coding)账号,下面以github为例子

在Github中新建一个仓库,仓库名自拟,也可以采用官方格式<username>.github.io,一定要设为公开仓库(有Github Pro的当我没说)

然后回到你的hexo文件夹,打开命令窗口,输入

1
$ npm install hexo-deployer-git --save

来安装git的部署器,其他部署器请看这里

打开_config.yml,拉到最底下,会发现有个Deployment,你可以按照我下面这么填写

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: <repo address> # 请替换为你的仓库地址!
branch: master

填写完成后,保存即可,然后打开命令窗口,使用

1
2
3
$ hexo clean #不是必要的
$ hexo generate
$ hexo deploy

来部署你的网站,其中generate可以简写为g,deploy可以简写为d,如果觉得打两行命令太麻烦,可以使用

1
$ hexo d -g

一条命令来直接部署,省去不必要的麻烦。

你也可以同时部署多个仓库,例如

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: <repo1 address>,master # 请替换为你的仓库地址!
repo: <repo2 address>,master # 请替换为你的仓库地址!

这样编写的话一次部署,两边的仓库都会上传~

部署完成后,请到你的Github仓库的设置中,找到Github Pages,将source选到master branch来打开Pages服务!

撰写文章

你可以使用

1
$ hexo new "<article name>"

来创建一篇文章,它会出现在source/_posts中,是一个.md文件,使用md编辑器打开(推荐Typora)编辑即可,支持markdownhtml语法

小技巧

添加自定义域名

每次部署hexo都会清除你的库并且重新部署,这意味着如果你在Github的设置中添加自定义域名(会生成CNAME文件)每次都会被清除,为了避免这种麻烦,我们可以使用在source文件夹里新建CNAME文件

CNAME文件

并且在CNAME文件中填写你的域名

CNAME

这样就可以避免每次部署都清除掉自定义域名,导致网站404了~

自定义404页面

你可以在/themes/<themes name>/source中放置你的404页面,当你的网站页面不存在的时候,就会显示404页面,可以引用css文件和js文件,只要跟404页面放在同一目录即可!

404

如何直接看到404呢?你可以直接在网站后面加上/404就可以进入404页面了~

添加看板娘(live2d)

你是否也想像我一样领养一只猫呢?或者领养一只~

回归正题,我们要怎么领养一只萌萌哒看板娘呢?当然还是要用到插件的说~

先安装插件hexo-helper-live2d

1
$ npm install hexo-helper-live2d --save

等待安装完后,在你的网站根目录的_config.yml中加入(可以直接复制粘贴)

1
2
3
4
5
6
7
8
9
10
11
12
#hexo-helper-live2d
live2d:
enable: true #是否开启显示
pluginModelPath: assets/
model:
use: live2d-widget-model-tororo #模板目录,在node_modules里
display:
position: right
width: 150
height: 300
mobile:
show: false #是否在手机进行显示

然后,找到你喜欢的模型进行安装,并把model的use属性的文本改成你安装的看板娘的文件夹名字(在node_modules里面)即可!

这样你就可以像我一样领养一只萌萌哒看板娘了~

搜索引擎站点认证

当你提交站点到搜索引擎的时候,免不了的就是认证你的站点。当然,认证方式有很多种,例如什么把标记放在<head></head>之间啦,什么文件认证啊之类的,太多了

当然最方便的就是文件认证了,下载一个文件到本地,然后传到你的网站上面。

有的人就会问了,文件要放在哪里呢?

其实有两个地方都可以放,一个是根目录的source文件夹,另一个就是主题里面的source文件夹,都可以放,放在这两个文件夹的根目录即可!

添加站点地图

当你想让你的网站被Google或者Baidu什么的收录的时候,你就需要用到站点地图。

使用以下命令安装站点地图插件

1
2
$ npm install hexo-generator-baidu-sitemap --save #安装Baidu的站点地图,为Baidu优化过的
$ npm install hexo-generator-sitemap --save

然后打开网站根目录的_config.yml文件,加入以下条目:

1
2
3
4
5
6
7
8
Plugins:
- hexo-generator-baidu-sitemap
- hexo-generator-sitemap

baidusitemap:
path: baidusitemap.xml
sitemap:
path: sitemap.xml

这样每次部署就会生成一个baidusitemap.xml和一个sitemap.xml文件,用于提交站点地图

这里以google为例子描述怎么添加站点地图

当你的网站提交到Google后,为了点击量高,我们会提交站点地图,在左边的栏目中选择站点地图,然后在上面”添加新的站点地图”中填写<Your Link>/sitemap.xml即可,Google会定期收集你的站点,并且展示在搜索结果上

Google Webmaster

Google Search Result

添加RSS订阅

虽然我不知道这年头谁还用RSS,但是有好过没有嘛

先打开命令窗口,然后输入命令安装插件

1
$ npm install hexo-generator-feed --save

安装完成后,在网站的根目录中的_config.yml中,加入以下内容

1
2
3
4
5
6
7
8
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml #RSS文件名字,可自定义
limit: 20

当你加入RSS订阅按钮的时候,就可以设置链接到你的/atom.xml文件(RSS文件名字改过的当我没说),这样当别人点击你的RSS按钮时,就会弹出订阅提醒,让别人订阅你的网站。

按钮调用邮件应用

如果你想让别人联系你,那么最方便的方式就是通过电子邮件了。如何才能让别人点击链接或者按钮直接调用邮件应用发邮件给你呢?实例

在文章中,可以使用这样的编写格式

1
[<Text>](mailto:<Email Address>)

这样当别人点击<Text>的时候,就会调用电子邮件应用,同样如果是按钮的话,只需要将按钮的链接设为

1
mailto:<Email Address>

即可调用电子邮件程序!

结尾

Hexo的教程我就写了这么多,可能有些没写到的或者我没想到的,有可能在将来会偶尔更新一下这篇文章,当然,如果你有什么问题,欢迎发邮件到[email protected]来与我探讨,我非常欢迎!如果你想与我交换友链,请到友情链接网页的评论区留言,我有时间会看评论的~商业网站勿扰哦~

Author: GamerNoTitle
Link: http://bili33.top/2019/09/07/hexo-deploy-guide/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.

Comment