hexo+github pages 不完全指南/总结

写在前面

知道 hexo 其实已经有较长一段时间了,但却没有去仔细了解其中的配置或原理,因此虽然有过搭建的经历,但实际使用却不是很多。为了去了解这个东东嘞,我又花了一两天时间重新搭建和配置一遍 hexo 博客,并长期以此记录我的学习与生活(flag 高高挂起)。

我写这篇文章呢主要是有几个目的:

  • 梳理一下搭建和配置以及美化的过程,做好总结和记录之类的
  • 给更多的小火鸡们一个参考
  • 给这个空空的博客加上第一篇文章(惨兮兮)

好了,闲话少说,开始进入正题

基本知识

这里写了一些基本的概念,很简略,具体详细的可以使劲戳 hexogithub pages 各自的官网.

hexo的官网 <- 使劲戳
github pages <- 使劲戳

什么是Hexo

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

https://hexo.io/zh-cn/docs/ what is hexo

着重注意静态俩字,hexo 区别于类似 wordpress, ghost 等博客框架,他不是动态的博客,它完完全全属于前端的范畴,所以在理论上,hexo 无法实现任何动态数据存储之类的效果(当然排除使用浏览器自身存储)。那么如何去解决静态这个特点带来的动态存储问题呢。嘿嘿,下面再告诉你。

什么是Github Pages

GitHub Pages是一种静态站点托管服务,旨在直接从GitHub存储库托管您的个人,组织或项目页面。

您可以使用Jekyll Theme Chooser在线创建和发布GitHub Pages网站。或者如果您更喜欢在本地工作,可以使用GitHub Desktop或命令行。

GitHub Pages是一个静态站点托管服务,不支持服务器端代码,如PHP,Ruby或Python。

https://help.github.com/articles/what-is-github-pages/ what-is-github-pages

hexo 相当于一个博客框架,而 github pages 则是 github 提供的一种服务,用语托管静态资源的。当然你也可以选择自己托管,使用自己的服务器,使用 nginx 来部署静态页面也是可以的。而 github pages 的好处就是你无须去捣鼓自己的服务器,只要你有 github 账号你就可以在页面上部署的你的任何静态资源.

所以说 hexo + github pages 不是一体,还是有其他很多选择,比如 Jekyll + github pageshexo + coding pages 都是一样的。

准备工作

Hexo

尝试着写了一部分,但发现官网写的比我好多了,所以直接戳 hexo官方文档

所以说,有啥问题,先阅读一遍官方文档是最好的方式了。(别怕!上面是中文!)

Github Pages

你只需要准备一个 github 账号即可,注册什么的就不用说了吧=-=。

当完成 github 的注册之后,进入 github 主页,点击右上角头像左侧的加号:

github-pages-1

选择 New repository, 进入到创建项目的页面:

github-pages-2

其中,为了让他成为我们需要的 Github Pages,需要将项目名设置为

1
[your_github_name].gitub.io

其中 your_github_name 是你注册的账号名。

然后点击 Create repository 即可创建。

这样就启动了 github pages 服务,你可以通过 web ide 在该仓库下新建一个 index.html 文件,然后访问 https://your_github_name.github.io 就可以看到你所写的 index.html 页面了。

关于 域名配置分支选择 等,可以查看项目下的 settings 选项,具体可以查阅相关资料。

Hexo + Github Pages

虽然前面的建立相关 index.html 可以在你的 github page 上显示一些内容,但这些内容是较为简陋的,如果需要一个精美的博客,需要一套完善的博客系统支持,那么 hexo 就是一个非常好的选择。

环境配置

请保证已经按照之前的文档(hexo官方文档hexo 的相关环境配置完成。

初始化

1
2
3
$ hexo init <folder> # 初始化hexo博客文件夹
$ cd <folder> # 进入博客文件夹下
$ npm install # 安装环境

通过以上命令将 hexo 博客初始化完成,执行命令

1
$ hexo s

就可以在 http://localhost:4000 访问到最基本的 hexo 博客页面

开始使用

指令

日常博客的维护,编写、发布文章等都需要用指令来完成,掌握指令的使用是最基本的事情,关于各种指令的含义和使用方法查看官方文档: hexo 指令

写作

hexo 默认有三种布局方式,分别是 draft(草稿)page(页面)post(文章). 其目录在 ./scaffolds 分别对应着 draft.md, page.md, post.md, 每种布局对应着不同的显示方式。

也可以自己建立模板,建立的模板同样存放在 ./scaffolds 下. 假设 ./scaffolds 下有一个 photo.md 的模板, 使用如下命令按照指定模板建立文章:

1
$ hexo new photo "My Gallery"

关于 hexo 写作的更多细节可以查看官方文档: hexo 写作

语法

hexo 采用 Markdown 语法,其中每一篇博文、页面等都是使用 .md 文件来编写的,因此,需要掌握最基本的 Markdown 语法。Markdown 中文文档

除此之外,hexo 官方自带了一些标签插件,可以提供一些很方便的功能。比如插入视频、链接、代码、引用文章等等。详情见 hexo 标签插件

上传到 github pages

通过以上的一些知识,你应该可以在本地看到一些你写的文章了。那么我想让别人都能访问我的 github page 看到我写的文章要如何做呢?

由于我们是部署在 github 上的,因此需要将你写好的文章上传至你的 github 仓库。

打开博客根目录下的 _config.yml,找到以下代码:

_config.yml
1
2
3
4
...
deploy:
type:
repo:

这里就是将我们的文章上传到 github page 的配置了. 进行如下配置:

_config.yml
1
2
3
4
deploy:
type: git
repo:
github: https://github.com/yourname/yourname.github.io

将上面 yourname 替换成你的 github 账号名称.

然后在博客根目录下执行以下命令

1
2
3
$ hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
$ hexo g # 生成静态网站
$ hexo d # 部署网站

也可以合并成一个命令

1
$ hexo clean && hexo g -d

当命令执行成功之后,访问你的 github page 主页,就可以看到刚刚部署的更改了。


基本功能配置

通过上面的一些操作,你应该掌握:

  • 初始化一个hexo博客
  • 创建自己的文章
  • 将本地文章部署到云端(github page)

待更新…

本文标题:hexo+github pages 不完全指南/总结

文章作者:wingsico

发布时间:2018年10月23日 - 07:10

最后更新:2018年10月24日 - 13:10

原始链接:https://wingsico.github.io/2018/10/23/summary-of-hexo/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。