白嫖 GitHub Pages，轻松搭建个人博客
Hexo 是一个快速、简单且功能强大的博客框架。使用 Markdown 解析文档，Hexo 能在几秒内生成带有自定义主题并集成各项功能的网站页面。
本文采用 Github Pages + Hexo 的方式，搭建个人博客。
零、准备工作
1. 使用个人 GitHub 创建仓库，并配置 GitHub Pages
注意: 此仓库用于存放个人博客页面，仓库名必须使用
<GitHub用户名>.github.io格式。
仓库创建完成后，可以在仓库根路径下创建一个名为 index.html 的静态 HTML 文件来验证个人博客搭建是否成功。
在 <GitHub用户名>.github.io 仓库对应的 GitHub Pages 设置页面 (访问路径为Settings -> Pages) 可以找到个人博客的主页访问地址：https://<GitHub 用户名>.github.io。
若能在浏览器中正常访问该地址，即代表个人 GitHub Pages 搭建成功。
2. 安装 Git 和 NodeJS
Hexo 基于 NodeJS 运行，因此在开始前，需要安装NodeJS 和 npm 工具。安装教程可参考如下步骤。
笔者的本地环境为 Windows 11 + PowerShell，包管理工具使用 Scoop，NodeJS 通过 nvm 管理，下述安装步骤需要在 PowerShell 里执行。
一、安装 Hexo
此处只列出本次所需的关键步骤，更多说明详见官方文档：https://hexo.io/zh-cn/
1. 全局安装 hexo-cli 工具
2. 创建一个项目 my-blog 并初始化
3. 生成网页文件 &本地启动
通过 hexo g 生成的页面文件在项目 public 目录下;
使用 hexo clean 命令可以清理生成的页面文件。当配置未生效时，建议执行清理命令。
4. 本地访问
浏览器访问：http://localhost:4000/ 会看到一个比较简陋的页面。没关系，接下来介绍如何更换主题。
二、安装 &配置主题
按照前两个小节所介绍的步骤，我们已经能够通过本地访问博客页面了，但 Hexo 默认的主题不太好看。
好在官方提供了数百种主题任君选择，可以根据个人喜好更换，具体可以点击(https://hexo.io/themes/)查看。
本文将主要介绍 Fluid 主题的安装与配置。
1. 安装 Fluid 主题
官方提供了两种安装方式，这里使用官方推荐的 npm 方式。
在博客根路径下创建 _config.fluid.yml 文件，并将主题的 ./node_modules/hexo-theme-fluid/_config.yml 文件内容复制过去。
2. 指定主题
将如下修改应用到 Hexo 博客目录中的 _config.yml:
3. 创建「关于页」
首次使用主题的「关于页」需要手动创建。
创建成功后修改 /source/about/index.md，添加 layout 属性。修改后的文件示例如下：
需要注意的是， layout: about 必须存在，并且不能修改成其他值，否则不会显示头像等样式。
4. 更新 Fluid 主题
通过 npm 安装主题的情况，可在博客目录下执行命令：
5. 本地启动
执行如下命令重新生成页面，并启动 Hexo 服务。
再次通过浏览器访问 http://localhost:4000 , 便可以看到页面变得美观多了。
三、创建文章
修改 _config.yml 文件。这项配置是为了在生成文章的同时，生成一个同名的资源目录用于存放图片等资源文件。
创建文件名为 my-blog-build-remark 文章。
设置文章的标题及其他元数据信息。
如上命令执行成功后，在 source/_posts/ 目录下生成了一个 Markdown 文件和一个同名的资源目录。
在 source/_posts/my-blog-build-remark 目录中放置一个图片文件 posts-file-tree.png，整体目录结构如下：
然后在文章的 Markdown 文件里，通过以下方式即可引用对应的图片。
图片的引用方式也不只一种，更多详细介绍可参考官方文档 (https://hexo.io/zh-cn/docs/asset-folders.html)。
文章创建并编辑好之后，就可以通过 hexo g && hexo s 命令启动服务，并在本地预览文章。
四、配置指南
如无特殊说明，如下配置文件一律默认为主题配置文件_config.fluid.yml。
1. 页面 title 修改
修改 _config.yml 文件。
2. 博客标题
页面左上角的博客标题，默认使用站点配置_config.yml中的 title。
此配置同时控制着网页在浏览器标签中的标题，如需单独区别设置，可在主题配置中进行设置。
3. 首页 - Slogan（打字机）
首页大图中的标题文字，可在主题配置中设定是否开启。这里支持配置固定的 text 或者从远程 api 实时获取，优先级 api > text。
五、网页访问统计
目前 Fluid 支持多种统计网站，本文仅介绍 LeanCloud 的配置。
使用 LeanCloud 之前，需要先注册账户并新建应用（需实名认证），可自行前往官网完成。
在 【控制台 -> 应用 -> 设置 -> 应用凭证】页面中找到对应的 AppID、AppKey、REST API 服务器地址等信息填入主题配置中。
如无特殊需要，记得配置 ignore_local: true，这样 LeanCloud 在 localhost 域名下访问不会增加数据。
1. 展示 PV 与 UV 统计
页脚可以展示 PV 与 UV 统计数据，目前支持两种数据来源：LeanCloud 与 不蒜子。
2. 展示文章日期/字数/阅读时长/阅读数
3. 文章评论功能
评论功能需要在主题配置中开启并指定评论插件，这里使用基于 LeanCloud 的 Valine。
六、发布 GitHub Pages
1. 安装 hexo-deployer-git。
2. 修改站点配置 _config.yml。
3. 生成站点文件并推送至远程 GitHub 仓库。
登入 Github，在库设置（Repository Settings）中将默认分支设置为 _config.yml 配置中的分支名称。
只需稍等片刻，个人博客站点就会显示在 Github Pages 中。
七、参考资料
Hexo Docs：https://hexo.io/zh-cn/docs/
Hexo Fluid 用户手册：https://fluid-dev.github.io/hexo-fluid-docs/
了解更多敏捷开发、项目管理、行业动态等消息，可关注LigaAI获取更多咨讯。
LigaAI 期待与你一路同行，助力开发者扬帆远航！
版权声明: 本文为 InfoQ 作者【LigaAI】的原创文章。
原文链接:【http://xie.infoq.cn/article/ac51ce1f6e9434779c35cbb6c】。未经作者许可，禁止转载。
新一代智能研发协作平台 2021-02-23 加入
AI赋能工作场景，想要做最懂开发者的智能研发管理平台~
评论