摘要:本文简要介绍了如何快速使用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证书。