Hexo与GitHub Pages搭建独立博客

前言

博客其实在很久之前按照教程已经搭建完成,现在才回头来写教程步骤。有时候会想是否多此一举,毕竟网上现成的优秀的教程比比皆是。所以权且不说这是搭建基于Hexo的博客教程,只是一个简单的记录。

写一点东西,像擦肩而过的风。

起飞

概述

GitHub Pages

GitHub Pages 是一项静态站点托管服务,它直接从GitHub 上的仓库获取HTMLCSSJavaScript文件,(可选)通过构建过程运行文件,然后发布网站。

有三种类型的 GitHub Pages 站点:项目、用户和组织。 项目站点连接到 GitHub 上托管的特定项目,用户和组织站点连接到特定的 GitHub 帐户。只能为每个 GitHub账户创建一个用户或组织站点。项目站点(无论是组织还是用户帐户拥有)没有限制。除非使用自定义域,否则用户和组织站点位于http(s)://<username>.github.iohttp(s)://<organization>.github.io

基于GitHub Pages搭建个人独立博客,即属于用户或组织站点。

GitHub Pages 站点的发布来源是存储站点源文件的分支或文件夹。 所有站点都有默认的发布来源,项目站点还有其他可用的发布来源。用户和组织站点的默认发布来源是master分支。如果用户和组织站点的仓库是master 分支,您的站点将从该分支自动发布。无法为用户或组织站点选择不同的发布来源。

GitHub Pages 站点受到以下使用限制的约束:

  • GitHub Pages 源仓库建议的限制为1GB。
  • 发布的 GitHub Pages 站点不得超过 1 GB。
  • GitHub Pages 站点的软带宽限制为每月 100GB。
  • GitHub Pages 站点的软限制为每小时 10 次构建。

Hexo

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

准备

  • 安装Node.js
  • 安装Git
  • 安装Hexo
    //进入自己的博客文件夹(如/biggfish/blog)
    npm install hexo-cli -g
    npm install hexo-deployer-git --save

步骤

  • 初始化配置

    // 在Hexo安装目录下新建hexo文件夹,如 /biggfish/blog/hexo
    hexo inint
  • 本地生成与部署

    //在hexo文件目录下执行

    //生成静态文件
    hexo generate

    //本地部署
    hexo server

    //本地测试
    http://localhost:4000/
  • 配置Hexo与远程GitHub仓库关联

    //创建`GitHub Pages`的站点发布来源,即username.github.io仓库
    //配置远程连接的SSH密钥与公钥

    //将本地Hexo文件(静态网页)更新到GitHub 的username.github.io仓库

    1. 复制Github仓库的ssh地址
    2. 选择hexo文件夹下_config.yml文件,修改deploy相关信息
    deploy:
    type: git
    repository: 刚复制的仓库ssh地址
    branch: master
  • 本地博客推送到远程仓库,GitHub Pages自动发布

    //g->generate  d->deploy

    //生成静态文件,然后部署
    hexo g
    hexo d

    //或者联合执行
    hexo g -d
  • 访问博客 我的博客

发表文章

注意用markdown语法编写文章。

  • Front-matter配置

    ---
    title: 博客伊始
    date: 2019-09-20 23:29:47
    comments: false
    tags: 随笔
    categories: 随笔
    description: 君不见,黄河之水天上来,奔流到海不复回
    ---

    ## 文章正文

    注: Front-matter配置支持的变量,其值因主题不同而存在差异
    /**
    ---
    layout: 页面布局(配合主题文档使用)
    title: 文章名称
    date: 文章日期
    comments: 文章是否开启评论
    photos: 文章封面图(仅部分主题支持)
    tags:
    - 文章标签一
    - 文章标签二
    categories: 文章分类
    description: 文章描述,即要在首页显示的摘要(仅部分主题支持)
    ---
    */
  • 推送文章

    //.md文章保存在/biggfish/blog/hexo/source/_posts中

    //或者新建文章 默认放置在hexo/source/_posts中
    hexo new "test"

    //Next主题新建页面
    hexo new page "分类"

    //照样在hexo文件夹下执行

    hexo d -g

参考