Hexo建站教程

发表于 | 更新于 | 分类于 ， | 评论数： | 阅读次数：
本文字数： 2.8k | 阅读时长 ≈ 3 分钟

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

这里我将采用GitHub Pages服务搭建博客。GitHub Pages是一种静态站点托管服务，旨在直接从GitHub仓库托管您的个人，组织或项目页面。每个GitHub帐户和组织都有一个站点。

一、准备工作

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

  • Node.js (Should be at least nodejs 6.9)
  • Git

二、GitHub Pages上搭建博客

1、创建仓库

新建一个名为你的用户名.github.io的仓库，比如说，如果你的GitHub用户名是dta0502，那么你就新建dta0502.github.io的仓库，将来你的网站访问地址就是 https://dta0502.github.io。

由此可见，每一个GitHub账户最多只能创建一个这样可以直接使用域名访问的仓库。

几个注意的地方：

  • 注册的邮箱一定要验证，否则不会成功；
  • 仓库名字必须是：username.github.io，其中username是你的用户名；
  • 仓库创建成功不会立即生效，需要过一段时间，大概10-30分钟，或者更久，我的等了半个小时才生效；

2、Hexo原理简要介绍

由于GitHub Pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以hexo所做的就是将这些md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到GitHub。

3、注意事项

这里建议使用Git Bash来执行后续的所有命令，还有hexo有2种_config.yml文件，一个是根目录下的全局的_config.yml，一个是各个theme（主题）下的_config.yml文件。

4、Hexo安装

1
npm install -g hexo

5、Hexo初始化

在电脑的某个地方新建一个名为hexo的文件夹（名字可以随便取），比如我的是D:\document\GitHub\hexo，这个文件夹将来就作为你存放代码的地方。

1
2
cd /d/document/GitHub/hexo/
hexo init

hexo会自动下载一些文件到这个目录，包括node_modules，其中比较重要的几个文件的目录结构如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
1
2
hexo g # 生成
hexo s # 启动服务

执行以上命令之后，hexo就会在public文件夹生成相关html文件，这些文件将来都是要提交到GitHub上的。

hexo s是开启本地预览服务，打开浏览器访问http://localhost:4000即可看到内容，很多人会碰到浏览器一直在转圈但是就是加载不出来的问题，一般情况下是因为端口占用的缘故，因为4000这个端口太常见了。

6. 修改主题

个人比较喜欢hexo-theme-yilia这个主题。

首先下载hexo-theme-yilia这个主题：

1
2
cd /d/document/GitHub/hexo/
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下载后的主题都在theme目录下。

然后我们将Hexo根目录下的_config.yml中的theme: landscape改为theme: yilia，然后重新执行hexo g来重新生成。

注意：如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布。

7、上传到GitHub

如果你一切都配置好了，发布上传很容易，一句hexo d就搞定，当然关键还是你要把所有东西配置好。

  • ssh key配置好。
  • 配置_config.yml中有关deploy的部分。
1
2
3
4
deploy:
  type: git
  repository: git@github.com:liuxianan/liuxianan.github.io.git
  branch: master

配置文件一定要注意缩进。

这时直接执行hexo d的话一般会报如下错误：

1
Deployer not found: git

原因是还需要安装一个插件：

1
npm install hexo-deployer-git --save

然后输入hexo d就会将本次有改动的代码全部提交，没有改动的不会。

8、常用hexo命令

  • 常见命令：
1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本
  • 缩写命令：
1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
  • 组合命令：
1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

9、_config.yml

这里需要注意：

  • 1）冒号后面必须有一个空格，否则可能会出问题。
  • 2）出现博客中文显示乱码问题，原因：记事本打开的默认不是用utf-8，所以汉字会出现乱码。因此，我用记事本打开_config.yml文件，以utf-8编码保存，解决了这个问题。

10、写博客

定位到我们的hexo根目录，执行命令：

1
hexo new 'my-first-blog'

hexo会帮我们在_posts下生成相关md文件,我们只需要打开这个文件就可以开始写博客了，用这个命令的好处是帮我们自动生成了时间。

11、如何让博文列表不显示全部内容

默认情况下，生成的博文目录会显示全部的文章内容，那么我们可以在合适的位置加上<!--more-->来设置文章摘要的长度。

举例来说：

1
2
3
4
5
6
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

这里我将采用GitHub Pages服务搭建博客。


<!-- more -->

三、参考文章：

推荐文章
赞赏一杯咖啡
0%