这篇文章对搭建这个Github Pages博客的过程、引用资料做一个记录。
Step 1: 创建Repo
按着Github Pages官网的指引一步步做下来即可。
Step 2: 配置所需环境
依赖的环境包括:
直接按着官网的说明下载安装即可,网上也有很多教程了。
Step 3: 安装hexo
hexo的官网是https://hexo.io/zh-cn/,使用npm安装hexo,运行:
1 | npm install -g hexo-cli |
Step 4: 创建博客
安装完hexo之后,在工作环境目录下,运行:
1 | hexo init blog |
hexo会在当前目录下新建一个文件夹blog
,这个文件夹就是本地维护的博客的根目录。运行:
1 | cd blog |
进入到此目录之中,会发现hexo已经为你创建好了几个文件和文件夹。其中source/_post/
就是存放发布的博文的文件夹,_config.yml
是站点的
配置文件,例如可以配置站点的title等等。
hexo的命令很简单,日常使用经常用到的就4个命令:
hexo new [name]
: 发布一篇新的博文,可简写为hexo n [name]
hexo generate
: 生成静态站点,可简写为hexo g
hexo server
: 在本地运行服务端,可简写为hexo s
hexo deploy
: 部署静态站点,可简写为hexo d
当运行hexo n [name]
的时候,会在source/_post
文件夹下新建叫作[name].md
的一个文件,表示你新需要发表的博文。随后你只需要对这个文件做修改即可。
当运行hexo g
时,会在blog
目录下生成public
的一个文件夹,就是根据当前的项目情况生成的静态站点,已生成的静态站点可以通过hexo clean
清除。
运行hexo s
会在本地启动一个服务(默认4000
端口),你可以通过浏览器访问http://localhost:4000/
,看到生成的博客的样子。
运行hexo d
会基于你在_config.yml
中的deploy配置,将生成的静态站点通过你所指定的方式部署。
我的需求就是需要将生成的静态站点部署到之前创建的yym6472.github.io
的Repo之中,因此需要修改根目录下的_config.yml
文件,找到deploy对应的地方,修改为:
1 | deploy: |
这样一旦运行hexo d
就会把生成的静态站点push到我的Repo上,从而实现部署。
使用git部署hexo需要额外安装一个工具,通过如下命令
1 | npm install hexo-deployer-git --save |
另外这里配置多个部署方式也是可以的,详见hexo的官方文档。
Step 5: 使用主题
在blog
目录下,会发现有一个themes
的文件夹,这里就是存放主题的文件夹了,每个主题将作为一个文件夹存放在其中,初始的情况应该是只有一种主题,叫作landscape。在运行hexo g
的时候,会根据你配置的主题生成不同风格的站点。配置主题在站点的配置文件_config.yml
中,能发现一行配置:
1 | theme: landscape |
这里就指定了当前博客的主题使用目录theme/landscape/
中的主题。你也可以去官方的主题网站选取自己心仪的主题。
更换主题的方法为:
- 点击对应主题的标题(是那个蓝字的标题而不是预览的图),进入到github的项目页面
- 将对应的项目clone到
blog/themes/
文件夹下,并且将_config.yml
中的theme: xxx
修改为对应的文件夹名字。 - 以上两条为一般的切换主题的方式,具体可能还需要做额外的一些操作(安装新的依赖、主题的配置项等等),具体需要查看主题作者的说明
我目前使用的主题为melody。另外还试过nexT,感觉也挺好看的。
其他的一些配置项(TODOs)
参考自melody主题的文档。
social图标 (rss, search)[未使用] 幻灯片slides主题页面[未使用] 相册主题页面导航菜单的关于、留言板follow me[未使用] 广告标签(自定义区域)文章置顶功能评论系统top image自定义主题颜色友链站点的图标更新about页面更新(版权等)[未使用,感觉Github Pages默认的就够用了] 404page[是可以的,但暂时没有需求] 能否自定义主题页面?- hexo提供的一些特性,可能以后会用到