Hexo博客踩坑指北

记录总结用HEXO和Github Page搭建博客时踩过的坑,主要包括以下

  • Github Page 配置过程
  • 本地软件配置
  • HEXO 配置过程
  • 主题美化
  • 部署网站

Github Page 配置过程

搭建博客的时候纠结了很久,现成的博客也有很多也比较方便,但总感觉东西在别人手里不放心,万一哪一天被删了就哭了。所以在浏览了很多大佬的教程之后决定用Github Page 搞一个,关于Github Page 的介绍可以看Github Page官方介绍。

配置步骤

  1. 注册Github账号 这个不多说了
  2. 创建一个以你的用户名命名的Respository, 命名方式:用户名.github.io

    踩坑:
    这个地方一定要用自己的用户名,否则不会生成网页

  3. README.md随便写
  4. 点击Create Respository
  5. 进入Settings,找到Github Pages,点击Choose a theme
  6. 主题随便选一个,后面会更换
  7. 现在打开 用户名.github.io 就可以看到你的网页了

本地软件配置

本地需要安装的软件有:

  • git
  • node.js
  • Mrarkdown编辑器(个人使用Haroopad)

以上直接百度官网下载
安装完成后前两个软件分别在终端输入

  • git --version
  • node -v

检测是否安装成功,安装成功会返回以下值,版本可能有差别,不影响使用

  • git version 2.21.0.windows.1
  • v10.15.3

最后一个软件一般不会出问题,正常安装exe即可

HEXO配置过程

HEXO是一款博客框架,步骤如下

  1. 建一个文件夹用来存放网页信息
  2. 在文件夹中右键单击打开Git bash
  3. 输入npm install hexo -g 安装hexo
  4. 输入hexo -v 检测是否安装成功,安装成功会返回一串版本信息
  5. 输入hexo init 初始化hexo

    踩坑:
    由于某种神秘力量的影响,这个过程会非常漫长,可以百度设置淘宝源加速,等待过程中不要看到没反应以为卡了关掉进程,不然就得清空博客目录文件夹重新下载了,因为结束进程再重新下会一直报错

  6. 输入npm install 安装其他文件
  7. 输入npm install hexo-deployer-git --save 安装部署插件
  8. 输入hexo g 生成网页
  9. 输入hexo s 启动本地服务,此时会返回网址,一般是 http://localhost:4000
  10. 复制网址并在浏览器中打开就可以看到网页预览
  11. 输入hexo d 即可部署到Github Page
  12. 在浏览器中输入 用户名.github.io 即可访问网站,部署不成功Github会发邮件提醒

主题美化

HEXO有很多可选的模板主题,在Github内搜索Hexo主题或前往HEXO官网浏览,这里以我选择的闪烁之狐为例,在此感谢大佬blinkfox

具体操作步骤

  1. 进入先前的博客文件夹,邮件打开Git Bash
  2. 输入 git clone https://github.com/blinkfox/hexo-theme-matery.git

    踩坑:
    同样由于某种神秘力量的影响,Github在国内的下载速度感人,峰值20kb/s,4kb/s是日常,下载个主题真的会等到天荒地老的,所以这里需要修改host文件,步骤如下

    • 需要前往 https://www.ipaddress.com/ 使用IP Lookup 工具获得下面两个github域名的ip地址,该网站可能需要另一种神秘力量才能上

    • github.com

    • github.global.ssl.fastly.net

    • ip格式在国内一般为192.30.xx.xx和151.101.xx.xx。

    • 准备工作做完之后,打开的hosts文件中添加如下格式,IP修改为自己查询到的IP:

    • 192.30.xx.xx github.com

    • 151.101.xx.xx github.global.ssl.fastly.net

    • 执行ipconfig /flushdns命令,刷新 DNS 缓存。

    完成后速度能达到几百kb

  3. 切换主题文件,修改博客根目录下的_config.ymltheme的值为theme: hexo-theme-matery

    踩坑:
    theme后面有一个空格!一定不要漏掉!否则修改无效,这个文件中的所有配置冒号后都有空格,语法很严格,在这找错误找了好久

  4. 关于闪烁之狐主题的其他详细配置请移步闪烁之狐

部署网站

网站主题选好后就可以部署到网站上了

主要步骤

  • 设置ssh配对
  • 购买设置域名
  • 部署网站

设置ssh配对

为了保证网站的安全,我们需要设置ssh,毕竟设立个人博客的初衷之一就是安全嘛,步骤如下

  1. 打开Git bash
  2. 输入ssh-keygen -t rsa -C "邮件地址" 然后回车三连
  3. 此时在c盘用户目录下会生成两个文件id_rsaid_rsa.pub,,我们需要的是后者
  4. 用记事本打开后复制里面的所有内容
  5. 打开Github,在右上角个人头像下拉菜单中找到Settings
  6. 打开SSH and GPG keys,点击右上角New SSH key
  7. Title随便填,然后在Key中粘贴
  8. 点击Add SSH key
  9. 回到Git bash,输入ssh -T git@github.com回车
  10. 首次输入可能会有提醒,输入yes回车即可
  11. 成功返回Hi 用户名! You've successfully authenticated, but GitHub does not provide shell access.就代表成功了
  12. 输入git config --global user.name "用户名"
  13. 输入git config --global user.email "邮箱地址"

购买设置域名

github提供的域名太长了,逼格也不够高,所以要自己设置一个好记的域名
国内提供域名服务的网站不少,我选择的是阿里云,步骤如下

  1. 去阿里云注册一个账号

    踩坑:
    这里注意阿里云推荐中文用户名,我一开始用英文怎么都通不过,最后改成中文的才注册成功

  2. 购买一个自己喜欢的域名,流程和淘宝差不多
  3. 完成域名的实名认证,虽然阿里云说审核要几个工作日,但是我的只用了十分钟就通过了
  4. 在管理控制台上找到自己购买的域名,点击解析
  5. 点击添加记录这里我添加了两条记录
    • 记录类型选择A记录,主机记录填写@,记录值需要用win控制台ping 用户名.github.io得到ip并填写,其他保持默认
    • 记录类型选择CNAME,主机记录填写www,记录值填写用户名.github.io其他保持默认
  6. 完成后回到Githuib,在存放网页的Repository中选择Settings,在Github Pages一栏中找到Custom domain,填入购买的域名就可以访问了
  7. 为了方便,我们需要在HEXO的根目录新建一个CNAME文件,在里面填入购买的域名,因为每次部署Settings中的域名都会被覆盖掉,每次重新输入会很麻烦,设置CNAME文件后就不用重复输入了

    踩坑:
    CNAME文件不要带任何后缀,否则会无效,我一开始用的是CNAME.md,结果每次部署域名都会被覆盖掉

部署网站

终于到最后一步了,在成功部署网站前还需要做一些微小的工作

  1. 修改—config.yml文件中的deploy
    1
    2
    3
    4
    deploy:
    type: git
    repository: https://github.com/用户名/用户名.github.io.git
    branch: master

    踩坑:
    这里同样需要注意冒号后面的空格,此处自闭++

  2. 打开Git bash
  3. 输入hexo clean命令清除本地浏览器缓存
  4. 输入hexo g命令重新生成网站
  5. 输入hexo s命令生成本地预览
  6. 本地预览无误后输入hexo d命令将网站部署到Github Page
  7. 如果返回值是git,那么恭喜,大功告成,此时可以输入先前绑定的域名访问网站了~

完工

坑填的差不多了,后续会更新HEXO的基本用法和Markdown语法,如果记起来其他的坑也会补充的,由于这是搭完博客几天后才写完的,一些细节记不太清了,有问题欢迎骚扰~