GithubPages+Hexo搭建个人主页 - HelloWorld开发者社区

一些朋友基于GithubPages+Hexo搭建了个人博客，自己看了之后也进行了尝试，本文是对尝试过程的整理。

阅读指引

本文面向有一定基础的开发者，编辑于2018年5月，阅读请注意时效性。(重要信息会加粗，以节约阅读者时间）

成果展示：https://lichuangnk.github.io/可先查看成果以决定是否继续阅读

本文能给你带来什么

对GithubPages+Hexo搭建个人主页的过程原理有较为清晰的认识
成功搭建你的个人主页
了解修改个人主页主题、内容的方法

GithubPages+Hexo基本原理

GithubPages: github作为项目托管网站，有一个pages功能，可以自定义页面内容，用来介绍相应的项目

Hexo: 博客框架，使用 Markdown（或其他渲染引擎）解析文章，生成静态网页

GithubPages+Hexo搭建个人主页原理：将Hexo生成的静态网页部署到Github作为Pages内容

GithubPages

官网：https://pages.github.com/

概念

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.

类型

User/Organization Pages（个人或公司站点）

访问域名：https://username..github.io

发布分支：master

功能：一般用于个人博客/主页

Project Pages 项目站点

访问域名：https://username..github.io/项目名称

发布分支：master、gh-pages

功能：一般用于项目介绍

User Pages设置

创建一个和你的账号同名的仓库，仓库名：username.github.io
进入仓库Settings，找到GitHub Pages，设置Source为master
保存后可以在GitHub Pages下可以看到：Your site is published at https://username.github.io/
当页面内容发布到仓库username.github.io后即可通过https://username.github.io/访问

Hexo

中文官网：https://hexo.io/zh-cn/

概念

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

安装

安装前提：已安装Node.js、Git（此处不作介绍）

如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。--官网

#安装Hexo命令行工具
$ npm install -g hexo-cli

项目创建

进入你想创建项目的文件夹，执行以下命令

#初始化项目
$ hexo init yourProjectName
#进入项目目录
$ cd yourProjectName 
#根据项目package-lock.json文件安装项目依赖包
$ npm install
#生成静态网页
$ hexo g # 或者hexo generate 
#开启本地服务，可以在http://localhost:4000/ 查看 
$ hexo s # 或者hexo server

Hexo布署到Github

一、更改项目布署配置

修改项目根目录中_config.yml文件的deploy项如下

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: Github仓库地址    #http or ssh
  branch: master    #个人主页的Pages必须为master分支

二、布署

执行以下命令进行布署

$ hexo clean #清除public
$ hexo g #生成静态网页
$ hexo s #开启本地服务，进行预览（不预览无需执行）
$ hexo d #发布到Github

三、访问

打开 https://username.github.io 即可进行访问

四、命令解释

hexo clean：清除public，当 source文件夹中的部分资源更改过之后，特别是对文件进行了删除或者路径的改变之后，需要执行这个命令，然后重新编译
hexo generate (hexo g)： 编译，一般部署上去的时候都需要编译一下，编译后，会出现一个 public 文件夹，将所有的md文件编译成html文件
**hexo server (hexo s) : ** 启动本地web服务，用于博客的预览
**hexo deploy (hexo d) : ** 部署播客到远端（比如github, heroku等平台）：部署博客到github上，如果一切顺利，你就通过访问usename.github.io访问你的博客了！

项目编辑

内容创建

进入source/目录下进行网页内容编辑
新建及修改页面：参考https://hexo.io/zh-cn/docs/writing.html

（本来想写，但是看了此官网页面觉得写了无实际意义）

主题更换

1. 将主题clone到themes/文件夹（也可以是复制等其他方式）

2. 修改根目录_config.yml的theme配置，例如

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-material  #你clone的主题名字（这个是我使用的）

3. 重新布署查看即可

域名绑定（非必要）

Github Pages提供域名绑定功能，想尝试域名绑定的，可以进行尝试

可参考：https://www.zhihu.com/question/31377141

参考资料

https://hexo.io/zh-cn/

https://blog.csdn.net/sunshine940326/article/details/57413678

https://my.oschina.net/ryaneLee/blog/638440

https://segmentfault.com/a/1190000007071938

https://help.github.com/articles/what-is-github-pages/

https://www.zhihu.com/question/31377141

http://blog.xieyc.com/differences-between-a-record-and-cname-record/