使用Hexo在GithubPages上搭建一个简易的博客

一个关于Hexo简单的 quickStart ，Hexo的可玩性很高，还有很多功能可以发掘，本篇文章只是一个简单的入门案例

Git

github账号

nodeJs 10.13+

hexo 常用命令

#命令简写hexo n "我的博客" == hexo new "我的博客" #新建文章hexo g == hexo generate #生成hexo s == hexo server #启动服务预览hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器hexo server -s #静态模式hexo server -p 5000 #更改端口hexo server -i 192.168.1.1 #自定义 IPhexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

安装 hexo-cli 完成后,新建一个文件夹来作为你的博客项目的Home,在文件夹内执行以下命令来初始化你的hexo博客。

新建完成后，文件目录如下

初始化完成后即可使用以下命令在本地运行项目预览

hexo的核心配置文件，是整个博客网站的配置文件。

详细配置参数参考这里

模板文件夹

执行这行命令，hexo就会在我们的scaffolds问价夹下找photo.md并根据其中的模板来生成source/_photo/My Gallery.md文件作为我们的一篇博客。

当我们使用hexo命令生成文章时，就会将模板中的内容复制到我们新建的文章中。

以下是post.md的内容

hexo new命令默认使用post.md模板，当我们使用hexo new blog时，会自动在blog.md文章的顶部加上post.md中的内容

关于模板的详细配置参考这里

资源文件夹，一般用来存放常用的静态资源。我们生成的markdown文档也都存放在这里。

以下时官方文档中的解释:

除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

主题文件夹,会在下面安装主题时介绍。

如本篇文章使用的命令就是hexo new Hexo博客搭建 ，此时source文件夹目录如下(因为配置的render_drafts=false，所以没有drafts文件夹)

hexo官网提供了丰富的主题，官方的主题下载地址在这里

这里以本博客的主题Fluid为例，具体其他主题请参阅相关主题的文档

这里博主使用的hexo版本是6.3.0，根据Fluid的官方文档，不需要在手动下载模板源码，可以使用npm直接安装即可，hexo版本低的同学可以参考Fluid的官方文档进行配置。

在博客项目的根目录下执行以下命令，安装Fluid模板

然后在博客的根目录下创建_config.fluid.yml,将Fluid官方示例中的配置文件复制进去

Fluid项目在GitHub上的配置文件，其中都有很详细的中文注释，大家根据自己的需求修改即可

修改Hexo的配置文件_config.yml来使Fluid主题生效

退出hexo服务器重新运行hexo server刷新浏览器即可看到主题生效

创建.github.io仓库来存放博客的静态页面(GitHub 用户名替换为你自己的GitHub用户名)

安装 hexo-deployer-git。npm install hexo-deployer-git --save

在 _config.yml 中添加以下配置

执行命令hexo clean && hexo deploy

浏览 .github.io 检查你的网站能否运作。

[^在修改文章或添加静态资源后使用hexo g来生成静态资源到html再使用hexo d部署到GitHubPages上去，否则，静态资源没有生成页面没有更新]

此处的配置仓库地址使用的时https地址，也可以配置为ssh地址，具体使用可以参考GithubPages和hexo-deployer-git的文档

Fluid 一款 Material Design 风格的 Hexo 博客主题：https://hexo.fluid-dev.com/docs/

Hexo 快速、简洁且高效的博客框架：https://hexo.io/zh-cn/

akilarの糖果屋

KENJI ENDO

STRML

李瑞豪的博客

TANGLY’s BLOG

阮一峰的网络日志

CodeSky

KaitoHH

DIYGod

Pluto

冰霜之地

更多优秀博客可以参阅Github上的chinese-independent-blogs项目