搭建github pages

搭建github pages

一月 24, 2021

因为之前的腾讯云新用户优惠的服务器到期了，续费的话还需要原价购买，如果使用学生优惠的话又需要重新部署一遍。最后想了一想还是决定去gitee或者github白嫖。开始的时候准备使用gitee的，但是部署完以后发现自己的域名解析不了，折腾了许久才发现这是gitee pages pro的功能，而且现在不知道为什么已经消失不见了。最后还是无奈选择github pages。

github访问速度

我不想用github pages最主要的原因还是因为这网速实在是太堪忧了，经常就直接原地去世。为了改善一下github的速度，可以上ipaddress.com查询一下github.com和github.global.ssl.fastly.net的IP地址，接着添加到本地的host文件C:\Windows\System32\drivers\etc\hosts中便可，亲测有些许效果。

1
2
140.82.114.3	github.com
199.232.69.194	github.global.ssl.fastly.net

github pages搭建前的工作

开始搭建

  • 安装Hexo

npm install -g hexo或者cnpm install -g hexo

  • 创建Hexo项目
1
2
cd Hexo //跳转到目标文件夹
Hexo init //在目标文件夹创建Hexo项目
  • 安装主题样式解析

npm install hexo-renderer-scss --save

  • 安装主题

我的主题是github上的diaspora,教程上面也有，代码核心代码就也就下面这句:

git clone https://github.com/Fechin/hexo-theme-diaspora.git themes/diaspora

  • 启用主题

在hexo项目的根目录 -> _config.yml配置文件中，修改theme为theme: diaspora

1
2
3
...
theme: diaspora
...

本地预览

  1. 编译Hexo项目：hexo g

  2. 本地运行Hexo项目：hexo s

  3. 预览：浏览器输入http://localhost:4000/即可

部署到github

  1. 注册->登录->右上角“+”->New repository

  2. 仓库名为username.github.io,这个以后就是未来你博客的域名了

  3. 在hexo项目的根目录 -> _config.yml配置文件中配置

    1
    2
    3
    4
    deploy:
      type: git
      repo: 复制你的仓库的https链接即可
      branch: master

  4. 安装自动部署发布工具

    npm install hexo-deployer-git --save

  5. 发布到github上

    部署项目：hexo d

    1
    hexo clean && hexo g && hexo d

绑定域名

  • 在购买域名的控制台->域名->域名列表->解析时

    ​ 域名记录选择CNAME

    ​ 解析路线填写username.github.io.

  • 在hexo项目的根目录 -> source文件夹中，新建一个名字叫CANME的文件(不带后缀名),在里面写上你的域名

  • 重新部署一下项目，然后等个10分钟就完事鸟

github图床

都白都白嫖了github一个博客了，也不差着再薅一个图床了，对吧!

  1. 首先，在hexo项目的根目录 -> _config.yml配置文件中
1
2
3
...
post_asset_folder: true //设为true以后，每创建一篇文章都会同时创建一个同名文件夹，用来装相对应的图片
...
  1. ​ 图片路径名https://github用户名.github.io/存储库名/你的图片名.后缀名

  1. 1. github访问速度
  2. 2. github pages搭建前的工作
  3. 3. 开始搭建
  4. 4. 本地预览
  5. 5. 部署到github
  6. 6. 绑定域名
  7. 7. github图床