利用Github Pages创建Hexo博客

柔光的暖阳◎ 2022-09-10 04:15 248阅读 0赞

## 前言 ##

很多时候身为程序员我们都有搭建自己博客的想法，可是真的着手搭建时候，总觉得事情很繁琐（VPS、LNMP环境、php或者node.js框架、域名、cdn等）而懒得去搞，因此很容易就搁置了自己搭建博客的想法；但是既然有需求，肯定有人会做想去解决这个需求，接下来就是我们今天的主角`Github Pages`和`Hexo`出场的时候了。

## 简介 ##

### Github Pages ###

[GitHub Pages][]是GitHub提供的一个网页寄存服务，于2008年推出。可以用于存放静态网页，包括博客、项目文档甚至整本书。Jekyll软件可以用于将文档转换成静态网页，该软件提供了将网页上传到GitHub Pages的功能。一般GitHub Pages的网站使用github.io的子域名，但是用户也可以使用第三方域名。

### Hexo ###

Hexo是一款基于Node.js的快速、简洁且高效的博客框架；其支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件，并且只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台，还有很高的扩展性，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成。

## Git ##

[git][] 是一个分布式版本控制软件，最初由林纳斯·托瓦兹创作，于2005年以GPL发布。最初目的是为更好地管理Linux内核开发而设计。

## 创建流程 ##

### Github Pages 配置 ###

1.  [创建Github账户][Github];
2.  创建Github Pages仓库，参见[创建 GitHub Pages 站点][GitHub Pages 1];

### Hexo配置 ###

1.  安装Node.js, 在Nodejs官网下载你说使用的系统的安装包；
    
    > 安装成功可使用`node -v`查看版本确认是否安装成功；
2.  安装hexo应用
    
        npm install hexo-cli -g
    
    > Mac系统需要加上sudo进行安装；
3.  创建hexo本地博客
    
        hexo init blog
        cd blog
        npm install
        hexo server
    
    此时本地博客创建成功，命令行应该会提示访问`http://localhost:4000`查看本地博客；
4.  发布测试文章
    
        hexo new test_essay
        vim source/_posts/test_essay.md #随便输入点东西，然后退出保存
        hexo clean
        hexo g #generate
        hexo s #server
    
    访问`http://localhost:4000`， 查看新发布的文章；也可以直接在 `source/_posts/` 目录下创建文章文件，差别是这样创建的文件没有默认文章样式，需要自己输入；
5.  配置网站信息  
    网站的大部分配置都在 `_config.yml` 文件中， 配置详情可参考Hexo配置;  
    例如：
    
        # Site
        title: 学思
        subtitle: '学而不思则罔，思而不学则殆'
        description: '思与学相辅相成'
        keywords: 学习,程序,思考
        author: Filon Hon
        language: zh-CN
        timezone: 'Asia/Shanghai'
    
    到目前位置，我们已经在本地搭建了一个博客系统，但是该博客并不能通过外网访问，这很明显不符合我们的需求，也没用上github pages功能；

### Git配置 ###

1.  下载Git工具, 按照提示安装即可；
    
    > 安装完成可通过`git -v`查看是否安装成功
2.  关于Github的认证，有密钥认证、token认证方式，选择自己觉得方便的就行；（普通的Git认证，网上教程很多）

### 发布网站到Github Pages ###

1.  打开博客根目录下的`_config.yml`文件，修改末尾的 `deploy`域
    
        deploy:
          type: git
          repo: <repository url>
          branch: [branch]
    
    > repo为之前创建的Github Pages 的仓库地址；branch为分支，默认为master；
2.  生成静态网站，发布网站；
    
        hexo g
        hexo d #deploy

如果之前的Git认证配置没有出错这时候就可以访问你创建的GithubPages来查看你发布的页面了；例如博主发布的网站`filon7.github.io`；

## 扩展 ##

### 更换主题 ###

觉得默认主题不好看，想要更换个性主题可以在Hexo官网主题页面 寻找自己喜欢的主题；对应的主题下都有安装步骤，这里不在赘述；  
以我使用的Next主题为例：

cd blog
    git clone https://github.com/theme-next/hexo-theme-next themes/next

然后修改blog下的 `_config.yml` 文件中的 `theme` 值为 `next`，保存执行:

hexo g
    hexo s

即可查看到修改后的网站页面，next主题中有很多插件可开，都在 `themes/next/_config.yml`文件中，根据配置文件提示进行相应设置即可，打造出专属于自己的网站；

> 如果你需要同步网站源文件到Git仓库，推荐将 `themes/next`文件夹下的 `.git` 和 `.github` 删除掉，再将其代码添加到仓库；这样相较于添加 next 主题的 git 作为 blog git 项目的 submod 优点是能保证各处同步的主题代码为同一套，不然next主题更新不同仓库适用主题不一致可能导致异常；

### 添加留言板 ###

添加留言板页面参考：[hexo博客添加评论功能][hexo]，或者hexo - Next 主题添加评论功能；

### 增加标签（tags） ###

1.  确认站点配置存在以下配置；
    
        tag_dir: tags #一般在Directory配置下
2.  确认主题配置下存在以下配置；
    
        tags: /tags
3.  新建tags页面;
    
        hexo new page tags
    
    此时会生成`source/tags/index.md`文件；
4.  修改`source/tags/index.md`内容
    
        title: tags
        date: 2015-10-20 06:49:50
        type: "tags"
        comments: false
    
    > date 可保持系统生成的时间
5.  文章中添加tags  
    在文章中添加tags，需要加入以下内容：
    
        tags: 
        - Tag1
        - Tag2
        - Tag3

### 增加分类（categorys） ###

1.  确认站点配置存在以下配置；
    
        category_dir: categories #一般在Directory配置下
2.  确认主题配置下存在以下配置；
    
        categories: /categories
3.  新建tags页面;
    
        hexo new page categories
    
    此时会生成`source/categories/index.md`文件；
4.  修改`source/categories/index.md`内容
    
        title: categories
        date: 2015-10-20 06:49:50
        type: "categories"
        comments: false
    
    > date 可保持系统生成的时间
5.  文章中添加categories  
    在文章中添加tags，需要加入以下内容：
    
        categories: 
        - cate1
        - cate2

很明显添加tags和categorys步骤相同, 但是文章中categories和tags 列表含义有区别；上面的tags列表是同级列表，而categories是层级关系列表，文章被分到了cate1->cate2子类中，如果想要文章存在于多个统计分类中则需要使用数组, 详情参见Front-matter;

categories:
    - [Diary, PlayStation]
    - [Diary, Games]
    - [Life]

> Diary->Playstation, Diary->Games, Life 以上表示属于这三个子类；

### 进一步定制化博客 ###

*  Hexo 搭建个人博客系列：进阶设置篇
 *  [Hexo+NexT主题个人博客魔改教程集合][Hexo_NexT]
 *  【Hexo】记录NexT主题美化及域名配置， 域名配置这项，如果你是国内的域名服务商的域名服务，不推荐设置，因为网站需要备案，不然域名解析会受阻，当然如果你觉得备案不麻烦那倒无所谓；

## 参考文章 ##

1.  [创建 GitHub Pages 站点][GitHub Pages 1];
2.  Hexo配置;
3.  [超详细Hexo+Github博客搭建小白教程][Hexo_Github]
4.  [Hexo 博客搭建指南][Hexo]

[GitHub Pages]: https://docs.github.com/cn/pages
[git]: https://git-scm.com/
[Github]: https://github.com/signup?user_email=&source=form-home-signup
[GitHub Pages 1]: https://docs.github.com/cn/pages/getting-started-with-github-pages/creating-a-github-pages-site
[hexo]: https://www.jianshu.com/p/02bb9eaa0f51
[Hexo_NexT]: https://wintersky.xyz/tricks/Hexo+next%E9%AD%94%E6%94%B9%E6%95%99%E7%A8%8B%E9%9B%86%E5%90%88/
[Hexo_Github]: https://zhuanlan.zhihu.com/p/35668237
[Hexo]: https://github.com/limedroid/HexoLearning