GitPages+Hexo搭建个人博客

前言

偶然间发现Hexo这款很不错的博客框架，能直接生成静态文件，可以很方便的进行部署，搭配GitPages简直不要太棒，省去了服务器的维护。支持Markdown，刚好符合我的习惯，因此决定使用Hexo+GitPages的方式搭建一个个人博客，欢迎访问Sunshine。此处记录搭建的过程。

初始化GitPages

GitPages的使用依赖于GitHub账号，若没有需要自行创建。

基本使用

• 新建Repository，命名为<GitHub账户名>.github.io
• Clone仓库到本地，并创建测试页面，命名为index.html，Push到远程GitHub，即可通过<GitHub账户名>.github.io访问到页面

自定义域名

• 进入Repository的设置界面，在Custom domain填入域名地址
• 配置域名解析，添加CNAME类型的记录，填入<GitHub账户名>.github.io

安装Hexo

Hexo依赖Node.js和Git，详细步骤可参考官方文档。

使用npm安装Hexo

npm install -g hexo-cli

初始化博客目录

为自定义文件夹，Hexo会在该文件夹下创建博客文件。

hexo init <folder>
cd <folder>
npm install

启动博客服务器

在博客目录下，执行如下命令即可启动博客服务器，可以看到一篇示例博文。默认端口4000，访问地址为：http://localhost:4000

hexo server

新建文章

使用Hexo的命令创建一篇文章，会在source/_posts路径下生成对应的Markdown文件。关于创建文章的详细说明，参照官方文档。

hexo new FirstPage

使用文本编辑器，编辑文章的内容，最好使用可视化的Markdown编辑器。启动博客服务，可看见新建的文章。

发布博客到GitPages

方式一：手动提交静态网页

使用将Hexo生成的静态网页文件手动提交到代码仓库的方式来发布博客。

• 执行hexo generate命令，会在博客目录生成public文件夹，里面是打包的静态网页文件
• 将public文件夹下的内容push到GitPages的仓库
• 访问GitPages即可看到博客的内容

方式二：使用Hexo的deploy命令发布

通过配置Hexo的部署选项，部署博客到GitPages。

• 安装hexo-deployer-git

npm install hexo-deployer-git --save

• 编辑_config.yml配置文件，加入部署的相关配置

deploy:
  type: git
  repo: https://github.com/<username>/<username>.github.io
  branch: [branch] #默认为master,GitPages的个人主页只能部署master分支,项目主页可选
  message: [message]

• 生成博客站点文件并部署至远程仓库

hexo clean && hexo deploy

• 查看GitPages所在仓库文件是否更新，进入GitPages页面即可看到博客内容

总结

本篇文章只粗略的记录了主要步骤，更多详细使用说明请参照官方文档。

• 中文官方文档
• 英文官方文档