最近想用 github.io 建立我的个人博客站点,具体步骤我参考了知乎上的一篇文章,里面写的够清楚了,下面就建站时碰到的坑写的不完全总结,估计以后陆续增加

ys558.github.io改为自己的域名

去阿里云申请一个自己的域名后绑定原理的ys558.github.io域名,步骤:

  1. 登陆阿里云的万网,挑一个喜欢便宜的域名注册,我的域名 zyzy.info 一年只花21元,注册完成后选择个人站点,顺便也就开通了阿里云账号,如其他域名服务商,如申请.me结尾的个人网站,应该去GoDaddy

  2. 依次进入右上角的 控制台 => 运维管理 选项卡下找到 域名 标签 => 点击 解析,如下:

阿里云域名解析

=> 点击添加记录, 在 记录值 处填下ys558.github.io,如下,点击确定。这样就把你github.io上的页面绑定了购买的域名下

阿里云域名解析

  1. ping 也可查询到新绑定的域名网址IP:
    阿里云域名解析

  2. 按以下命令在自己的github仓库中添加CNAME文件,其中填入购买的域名。或者可以在仓库的settings中设置Custom Domain设置好自己的域名,github会自动添加CNAME文件。

    1
    2
    touch CNAME
    echo 'zyzy.info'> CNAME

图片显示错误:

!!!该方法也是在网上搜索得到,虽可行,但解析中文路径时经常会出错,后来还是转用CDN,把图片全部移到另一个repo,推荐用CDN的方法,具体操作办法看我另一篇文章

  1. 需要安装一个图片路径转换的插件,这个插件名字是 hexo-asset-image

    1
    2
    3
    npm i hexo-asset-image --save
    # or
    yarn add hexo-asset-image --save
  1. _config.yml文件,修改下述内容,用 hexo n <博客文章名字> 生成新博客时,会生成一个对应的文件夹,将图片放入该文件夹引用即可:

    1
    post_asset_folder: true
  2. 修改博客目录下node_modules\hexo-asset-image\index.js (hexo文件有bug)
    阿里云域名解析

证书错误,不是私密连接

Github建站好之后,经常会碰到打开页面浏览器显示不是私密链接的情况,搜来搜去,说是GitHub的SSL证书不稳定,不知道是不是墙的原因。

不是私密连接

有两个方法可以解决:一是申请 cloudfare 的免费证书,二是自己买证书,两种方法都介绍以下

方法一: 某宝买证书

去某宝买了证书,(p.s. 不差钱也可以直接买阿里云的证书,两年2000多),证书是有有效期的,我买的那家证书一年80元,两年140元,5年300元。选个自己能接受,不太贵的价格即可。一般销量高的店家都有教你怎么配置,我这里把其配置记录了下来:

1. 在 Github Page 上取消勾选 Enforce HTTPS 服务

位置如下图:
取消Github HTTPS 勾选

2. 将买到的证书在阿里云上设置

如下图顺序设置便可完成:

阿里云设置证书

方法二:蹭 cloudfare 的免费证书

1. 申请个 cloudfare 账号,并添加DNS

cloudfare 我的cloudfare是以前注册的,忘了一步步截图,但有中文界面跟着提示操作即可,不会很难,注册完成后,在以下界面操作:

找到github的ipv4的地址为以下几个,也不知道访问时会分配到哪个ip,索性A类地址全部添加上,像阿里云以下,把 CHAME 类地址也添加上,如下:

DNS添加记录

 SSL/TSL 选择完全

2. 返回阿里云添加 cloudfare 申请的DNS服务器

阿里云的DNS修改操作
从 cloudfare 复制DNS

Github Page 更新自己的域名

  1. 点击仓库 ys558.github.io 里的 Settings
  2. 点击左侧的 Pages
  3. Custom domain 里输入自己配置好DNS的域名
  4. 点击 Save, 则会自动检查域名是否可用
    从 cloudfare 复制DNS