Github Pages + Hexo 3分钟快速搭建个人博客网站

什么是 GitHub Pages？

GitHub Pages 旨在从 GitHub 存储库托管您的个人、组织或项目页面。直接从您的GitHub 存储库托管。只需编辑、推送，您的一切更改就会生效。其他如 Gitee，Coding 等，Pages 使用方式大致相同，不过 Gitee 方式则需要身份认证后才能开启~ 传送门：pages.github.com/

什么是 Hexo？

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

安装前提

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本) 传送门：nodejs.org/zh-cn/
Git 传送门：git-scm.com/

如果您的电脑中已经安装上述必备程序，那么恭喜您！你可以直接前往安装 Hexo 步骤。

如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。

安装 Git

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

Mac 用户

如果在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

Windows 用户

对于中国大陆地区用户，可以前往淘宝 Git for Windows 镜像下载 git 安装包。

安装 Node.js

Node.js 为大多数平台提供了官方的安装程序。对于中国大陆地区用户，可以前往淘宝 Node.js 镜像下载。

其它的安装方法：

Windows：通过 nvs（推荐）或者 nvm 安装。
Mac：使用 Homebrew 或 MacPorts 安装。
Linux（DEB/RPM-based）：从 NodeSource 安装。
其它：使用相应的软件包管理器进行安装，可以参考由 Node.js 提供的指导。

对于 Mac 和 Linux 同样建议使用 nvs 或者 nvm，以避免可能会出现的权限问题。

Windows 用户

使用 Node.js 官方安装程序时，请确保勾选 Add to PATH 选项（默认已勾选）

For Mac / Linux 用户

如果在尝试安装 Hexo 的过程中出现 EACCES 权限错误，请遵循由 npmjs 发布的指导修复该问题。强烈建议不要使用 root、sudo 等方法覆盖权限

Linux

如果您使用 Snap 来安装 Node.js，在 初始化 博客时您可能需要手动在目标文件夹中执行 npm install。

第一步：创建存储库

转到GitHub并创建一个名为 username.github.io 的新公共存储库，其中username是您在 GitHub 上的用户名（或组织名称）。可见权限必须设为公开，不然 Github Pages 将无法启用。

如果存储库的开头部分和你的用户名不完全一致，Github Pages 也将无法工作，因此请确保正确。

在这里插入图片描述 注意！新建的存储库默认为空，为了在第二步的拉取 github 存储库中有东西可拉，建议勾上图中的如下选项，以生成一个默认的 README.md 文件：

Initialize this repository with a README

第二步：克隆存储库

本地新建要存储项目的文件夹（例如桌面新建一个路径为 C:\Users\adminstrator\Desktop\hexo 的 hexo 文件夹），然后克隆存储库：

 git clone https://github.com/{username}/{username}.github.io

第三步：安装和初始化 Hexo 项目

请在已经安装完成 Node.js 和 Git 的基础下进行以下操作

$ npm install hexo-cli -g   #全局安装 hexo
$ hexo init hexo-site 		#在当前目录下,使用 hexo 初始化一个名为 blog 的项目
$ cd hexo-site				#进入 hexo-site 文件夹
$ npm install 				#安装项目依赖

安装 Next 主题

如果你使用 Hexo 5.0 或更高版本，最简单的安装方法是通过 npm：

$ npm install hexo-theme-next

或者您可以克隆整个存储库：

$ cd hexo-site
$ git clone https://github.com/next-theme/hexo-theme-next themes/next

克隆完成后，打开 Hexo 项目根目录下的 _config.yml 配置文件并将主题变量设置为 next。

# 例：C:\Users\adminstrator\Desktop\hexo\_config.yml
theme: next

第四步：Hexo 打包博客项目静态文件

npm run build
# or
yarn build

Yarn 是 Facebook 开源的与 npm 作用相同的包管理器，同样依赖 Node.js。传送门：yarn.bootcss.com/docs/instal…

打包命令执行完成后，项目根目录下生成了 public 文件夹及静态文件，如下：在这里插入图片描述

将 public 目录下的文件 全部移动 到第二步克隆的 github 存储库 hexo-site 根目录 中，移动后结构大致如下图：在这里插入图片描述

第五步：推送博客代码到 github 仓库

在 hexo-site 中执行：

git push origin master

推送成功，我们就能在 github 仓库中看到我们的博客建站文件啦~ 在这里插入图片描述 github 代码页：查看 Settings 中的 Pages 页面，提示 Your site is published at https://dreammaker7.github.io/，说明你的网站已经成功应用到 Github Pages 中啦！.....你完成了~~~ 接下来启动浏览器并转到你的 https:// username .github.io 试试吧。来看看我配置的个人博客首页：dreammaker7.github.io/

在这里插入图片描述

觉得文章写的不错，点个赞吧，后续将继续更新更多关于 Hexo 的配置和使用教程，你的鼓励就是我坚持的动力~~

文章部分摘自 Hexo、Github Pages 文档： Hexo：hexo.io/zh-cn/docs/ Github Pages：pages.github.com/