一、什么是Github page？

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. ------摘自Github官网

简单来说，Github page 就是一个可以让用户部署自己的 HTML、CSS、JavaScript 代码的地方。因为我们如果没有公网服务器的话，写出来好看的前端界面就只能自己在本地浏览，而不能发布到公网上；而 Github page 则提供了我们将自己写好的界面发布到公网上的服务

当然，不只是 Github 有这个服务，gitee 和 gitlab 也有相应的 page 服务，其他的代码托管平台也有，而它们的操作大同小异，这里我们只介绍 Github 的操作

二、提前准备

一个 Github 账号
hexo 环境（需要nodejs支持）
git 客户端

温馨提示

GitHub Pages主要设计用于托管公开仓库的静态网站和文档。因此当私有仓库要使用GitHub Pages，会提示：

text 复制代码

Upgrade or make this repository public to enable Pages GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.

小结：对于GitHub Pages，public仓库免费使用，private仓库要么升级GitHub账号，要么公开仓库

三、开始搭建

1、创建仓库

创建仓库的时候有一个限制，就是仓库名必须为自己的 Github 账号名.github.io ，其实不这样做也没有问题，但是访问静态资源的时候可能会有些麻烦，所以还是建议使用账号名.github.io的形式

如下所示（这里我使用的是组织的名）

创建好的仓库如下所示

2、将仓库克隆到本地

使用 git 客户端将仓库克隆到本地，使用指令git clone 仓库地址.git

3、修改README.md文件

注意是 Markdown 语法，如果不熟悉 Markdown 语法可以参考我之前的文章 markdown从入门到入坑（第一阶段），下面是我做的一些测试改动

4、将修改上传到 Github，并且开启 Github page

上传修改的操作就不说了，这里只说如何开启 Github page 服务

开启 Github page 服务

点击项目中的 settings 按钮进入项目设置界面
进入设置界面后，找到如下图所示的界面

红框左边是选择分支，我们默认为主分支（建议新建一个 gh-pages 分支并使用该分支），右边 save 按钮既开启 Github page 服务，如下：

5、测试访问

点击上面的网址，进行测试访问，看看我们的 page 服务是否配置完成。下面是我的访问结果

至此，我们的 page 服务算是打开了，我们可以通过上传不同的 HTML 文件或者 md 文件，然后通过修改 url 来进行访问，这里就不展示了，感兴趣的同学可以自己尝试一下

四、开始我们的定制化过程

前面我们让大家准备了 hexo 环境，hexo 是什么？

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

话不多说，直接开整

1、初始化

首先，我们先新建一个空文件夹，因为hexo的初始化必须在一个空的文件夹进行 。然后在新的文件夹下打开终端，执行指令hexo init进行初始化

当出现INFO Start blogging with Hexo!以后，即初始化成功

2、本地预览 hexo

我们可以在 hexo 文件夹下执行hexo server（简写为hexo s）来预览一下 hexo，下面是我我预览的界面：

是不是比以前好看多了~

3、将 hexo 上传到自己的 github

首先在 hexo 文件夹下执行hexo build指令，然后我们会发现项目下多了一个public文件夹，我们将里面的所有文件和文件夹都复制到刚刚的 git 仓库文件夹里面，然后上传仓库

上传到仓库结果如下：

然后我们再尝试访问一下刚才的网站，这时网站应该变为刚才我们预览的样子了。（如果没有就稍等一下然后再刷新，Github page 更新略慢）

然后下面的演示我将使用hexo server进行演示，因为上传太麻烦了

4、hexo 文件结构

5、修改 hexo 的配置文件

hexo 的配置文件内容参考官网：hexo.io/zh-cn/docs/...

然后下面放上我的配置文件：（仅做参考，可折叠跳过阅读）

yml 复制代码

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Blog
subtitle: 一个有梦想的年轻人
description: 一个有梦想的年轻人
keywords: "java，spring boot，spring MVC，mysql，开发者,程序猿,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek"
author: 
language: zh-CN
timezone: ''


# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://GitHub用户名.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing index.html from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Butterfly

# Deployment
## Docs: https://hexo.io/docs/deployment.html

deploy:
  type: heroku
  repo: github 仓库 URL
  # branch: master

live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-hijiki  #模板目录，在node_modules里
  display:
    position: right
    width: 250
    height: 500
  mobile:
    show: false  #是否在手机进行显示

6、新建文章

我们可以直接在_post文件夹下新建 md 文件，我这里推荐使用 hexo 指令：hexo new '标题'

执行完该指令后，我们的_post文件夹下多了一个新的文件，我们点开这个文件，发现文件里面已经有一些内容了。

这些内容就是来自/scaffolds/post.md，上面文件目录结构介绍了，这个就是模板。然后我们随意对这个文件做一些修改，然后再运行hexo server

Markdown 复制代码

---
title: 测试
date: 2019-12-02 13:23:40
tags:
---

# hello

下面是执行结果：

至此，我们的网站已经算是一个 Markdown 语法的博客了

7、使用主题

使用了主题后，会使你的博客变得更加炫酷哦~~

然后大家想找主题的话，可以到官网来看看：hexo.io/themes/

如果官网上面你没有看到心仪的主题，也可以在你收藏的心仪的博客（使用 hexo 搭建的），找到页脚，页脚处一般会把主题标记出来，如我的博客：

然后点击那个主题就可以跳转到这个主题的仓库啦（并不是所有主题都有，这个看建站的人）

一般主题仓库下都有对该主题的详细介绍和使用教程，这里就不展开了

一文带你使用 Github page 搭建自己的博客