星的天空的博客

种一颗树,最好的时间是十年前,其次是现在。

0%

Github Pages搭建博客及使用

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

环境搭建

安装

  • 确保电脑中是安装有Node.jsGit
  • hexo安装:npm install -g hexo-cli

建站

执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

hexo配置

在 _config.yml 中修改大部份的配置。配置说明见官方文档

主要配置参数:

  • 网站
1
2
3
4
5
title	网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
  • 配置对应的Github Pages
1
2
3
4
deploy:
type: git
repository: https://github.com/StudyData/StudyData.github.io
branch: master
  • 网址
1
url: http://blog.devlxx.com
  • 配置评论
1
2
disqus_shortname: devlxx
disqus: true

日常用法

  • 创建新博文:$ hexo new [layout] <title>,如hexo new "Github Pages搭建博客及使用,执行后,会在source/_posts目录下创建hexo new "Github Pages搭建博客及使用.md文件
    • 创建草稿使用特殊布局:draft, 建立时会保存在source/_drafts文件夹,可以执行$ hexo publish [layout] <title>移动到source/_posts目录
  • 生成静态文件:hexo generate
  • 本地查看:hexo server -p 5000,执行后,打开http://localhost:5000/即可查看博客效果。
  • 部署:hexo deploy
  • 可以通过在文章中插入<!--more-->来设置在文章列表中展示的内容。<!--more-->上面内容均会展示在在列表中,下面的会被收起。(for yilia 主题)

进阶

域名绑定

使用自己的域名逼格更高,域名绑定需要做两部分工作。

Github Pages域名绑定设置

使用一个自定义域名去重定向你的 GitHub Pages,你必须创建和提交一个包含自定义域名的 CNAME 文件到你的 GitHub Pages 存储库中。

  • 进入Github Pages仓库:https://github.com/StudyData/StudyData.github.io
  • 添加一个新文件,命名为 CNAME (全部大写!),放在 Pages 分支的根目录下。
  • 在新文件中,添加一行,指定自定义域名的空子域名。例如,使用 blog.example.com 而不是 https://blog.example.com

请注意,在 CNAME 文件中只允许有一个域名。

域名服务商设置

以万网为例

  • 点击添加解析
  • 记录类型:CHAME
  • 主机记录:blog
  • 记录值:studydata.github.io

添加评论

hexo支持各种评论,常见的有1、多说;2、网易云跟帖;3、畅言;4、Disqus;5、Gitment等,评估那个适合自己,申请相关服务后在根目录的_config.yml中进行配置,如:

1
2
disqus_shortname: devlxx
disqus: true
  • 畅言对国内支持较好,可以微信,QQ登录,配置如下:
1
2
3
4
#畅言app id
changyan_appid: 'xxxx'
#畅言app key
changyan_conf: 'xxxxxxxxxxxxxxxxxx'

资源文件使用

  • 在根目录的_config.yml中进行配置:
1
post_asset_folder: true

每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个markdown文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们

  • 也可以在source目录下创建一个资源目录assets,然后通过类似于![](/assets/image.jpg)的方法访问它们。

如何更换主题

主题都放置在themes/目录下,一般从github上找到自己心仪的主题,clone到此目录下。然后在_config.yml配置相应的主题。 如:

1
theme: hexo-theme-yilia

hexo-theme-yilia为clone下来的项目的文件名。

如何使用主题

每个主题基本都有自己说明文档,一般通过修改主题中的themes/theme_name/_config.yml文件来实现主题修改。

问题处理

  • 有人会把整个hexo目录放入GitHub Pages仓库,这是不对的,指定hexo d会将生成的博文相关静态文件上传到Github Pages,hexo目录一般用另外一个私有仓库放置,里面可以有你的草稿,主题等。

  • 执行hexo d会将仓库先清空,如果有加入CNAME文件也会被清空,可以将CNAME放入source/目录下,上传的时候会一并传上去。

  • 执行hexo g出现警告WARN No layout:xxx,然后执行hexo s运行本地博客无内容。解决方法:

    • 是否配置的主题在theme下存在,检查下themes/themeName/layout/文件夹里是否有index.js文件,以及目录结构是否与实际主题的layout保持一致
  • 执行hexo g报错:Error: The module '/Users/lixinxing/Documents/BlogBackup/node_modules/dtrace-provider/build/Release/DTraceProviderBindings.node' was compiled against a different Node.js version using

    • 一般是node的版本发生了变化,删除目录下的node_modules文件,然后执行npm install重新安装即可。
    • 依然不行,可以执行npm i -g hexo-cli再跑跑试试。
  • 执行hexo g报错:ERROR Plugin load failed: hexo-generator-json-content

    • 可能是node版本过低,升级node版本即可。
  • hexo将整个目录都上传了上去,一般是设置了submodule导致的。

    • .deploy_git文件夹删除
    • 执行hexo clean删除public目录后,再重新执行命令上传即可。

相关资料