往期笔记整理

数据结构和算法刷题笔记.pdf下载

找工作简历模板集(word格式)下载

Java基础核心知识大总结.pdf 下载

C/C++常见面试题（含答案）下载

设计模式学习笔记.pdf下载

Java后端开发学习路线+知识点总结

前端开发学习路线+知识点总结

大数据开发学习路线+知识点总结

C/C++(后台)学习路线+知识点总结

嵌入式开发学习路线+知识点总结

前 言

建网站本身是一个很大的工程，涉及前端页面的搭建，网站数据的存储，还要购置服务器资源，甚至是后期的维护，过程相当繁琐。

不过如果仅仅是想搭建个人的网站，写写博客，想要美观，又不想操心太多和写博客无关的事情。那么，Hexo + Kaze + Gitee Pages 的方式就很适合你。

本文就讲下如何借助这三样免费的技术或服务，来搭建一个可访问的静态博客网站。

Hexo 简介Hexo 是什么？

Hexo[1] 是一个快速，简单且功能强大的博客框架。如果你用 Markdown 写博客，Hexo 可以在几秒内生成带有精美主题的静态文件。

Hexo 安装前置要求Node.js（版本 10.13 以上，建议使用 12.0 以上版本）Git安装 GitWindows：下载并安装 git[2]。Mac：使用 Homebrew[3] 安装。Linux（Ubuntu，Debian）：sudo apt-get install git-coreLinux（Fedora，Red Hat，CentOS）：sudo yum install git-core安装 Node.js

Node.js 为大多数平台提供了 官方安装程序[4]。

替代安装方法：

Windows：使用 nvs[5] 安装它。Mac：使用 Homebrew[6] 安装。Linux（基于 DEB / RPM）：与 NodeSource[7] 一起安装。其他：通过相应的软件包管理器进行安装。请参阅 Node.js 提供的指南[8]。安装 Hexo

用 npm 安装 Hexo。

npm install -g hexo-cli

使用以下指令查看是否安装成功。

hexo version

如果你想卸载 Hexo，使用以下指令：

npm uninstall -g hexo-cli运行 hexo

安装后，你可以通过 hexo <command> 运行 Hexo。比如通过 hexo help 指令来获取使用帮助。

hexo help

帮助里提到 hexo init 命令可以创建一个新的 Hexo 文件夹，这个文件夹其实就是利用 Hexo 生成的站点信息了。接下来讲下怎么建站。

Hexo 建站初始化操作

使用 hexo init <folder> 指令就可以在指定文件夹下建立站点信息：

hexo init java4u.cn

站点初始化中：

站点初始化完成，会生成指定的文件夹：

目录结构

进入该站点，我们看下目录结构，如下：

这些文件有着各自的职责：

_config.landscape.yml：自定义的主题配置文件，此处的 landscape 是默认主题。配置其他主题可以参考这种方式。_config.yml：站点全局的配置文件。node_modules：node 模块文件夹。包含可执行文件和依赖的资源。package-lock.json：node_modules 文件中所有模块的版本信息，模块来源。package.json：Hexo 框架的基本参数信息以及它所依赖的插件。scaffolds：scaffolds 原意是脚手架，这里可以理解为模板文件夹。当你创建新的文章时，Hexo 会根据该文件夹下的对应文件进行初始化构建。source：资源文件夹。这里是你放自己资源比如博文和图片的地方。_posts 文件夹下的 Markdown 和 HTML 文件会被解析并放到 public 文件夹下。其他文件或文件夹，如果开头命名不是 _ (下划线)，也都会被拷贝过去。themes：主题文件夹。Hexo 会根据主题来生成静态页面。

基于这样的结构，Hexo 就具备了生成静态网站的能力。

本地启动

我们先本地启动，看下实际效果。输入以下命令：

hexo server

Hexo 会启动服务，将默认生成的网站运行在本机的 4000 端口上，可以直接访问 :4000 就能看到网站首页，它基于默认主题生成，同时有一篇默认文章。

这个页面只是官方提供的一个样例，看到它就意味着你本地环境跑通了。我们可以通过修改配置的方式，对页面相关元素做调整。

核心配置

以下是我们需要了解或者修改的配置信息。

package.json

这个文件列出了 Hexo 的基本参数信息以及它所依赖的插件。可以看到，EJS[9]，Stylus[10] 和 Markdown[11] 渲染器都是默认安装的。

{  "name": "hexo-site",  "version" alt="我愿称之为建站神器_Hexo+Kaze+Gitee!">