摘要：本文简要介绍了如何快速使用Github Pages和Hexo搭建个人博客的教程，包括如何使用配置Hexo框架，部署Hexo到Github pages中，域名绑定以及一些注意事项。

我的博客：Jou’s Blog

准备工作

  • 安装git

    brew install git

  • 安装nodejs

    brew install nodejs

  • 安装Hexo

    npm install -g hexo-cli

搭建博客

mkdir blog	//新建一个空目录
cd blog.    //进入blog目录
hexo init   //初始化hexo
npm install //创建hexo
hexo s	    //开启hexo本地服务

image-20200420233813890

image-20200420233847635

Hexo部署到Github Pages

  • 首先，创建github仓库，仓库名必须为<用户名>.github.io

  • 安装hexo-deployer-git插件(用来部署代码到github)

    npm install hexo-deployer-git --save

  • 修改blog目录下的_config.yml文件,冒号后面必须加一个空格

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
     type: git
     repository: git@github.com:Jouiry/jouiry.github.io.git
     branch: master

  • 推送到Github Pages

    hexo g	//本地生成静态文件，public文件夹
    hexo d 	//把public文件夹下的代码上传github

  • 访问Githubpages上的博客 jouiry.github.io

    image-20200420235145083

绑定域名

  • 域名解析(到购买域名的网站的DNS页面进行设置)，这里推荐到namesilo购买域名，国际域名无需备案

    类型选择CNAME
    域名前缀可以随便写，建议www
    记录值为你的github自定义域名
    解析线路，TTL

    image-20200420235650024

  • Github pages设置

    image-20200420235802970

  • 此时，即可通过自己购买的域名访问博客

注意事项

  1. 每次hexo d的时候，github上的CNAME文件会消失，域名无法访问

    因为hexo的本地没有CNAME文件，可以在本地public添加CNAME文件，但是执行hexo clean时，public文件夹会清除，需要重新创建，因此推荐安装插件来自动生成

    npm install hexo-generator-cname --save

    然后修改_config.yml文件

    url: http://www.yourcite.com //这里修改为你的域名
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:

    //添加这一段代码
    Plugins:
    - hexo-generator-cname

  2. 如果通过Github pages绑定的域名访问不安全，不支持https，可以通过netlify代理部署，很简单，自动申请STL证书。