本地hexo源码推送到GitHub仓库并使用Netfily、Vercel自动部署

最后更新于:2020 九月 21日 , 星期一 , 18:02 晚上

构建状态监控(可能加载不出)

Netlify Status

liuyifei.vercel.app

liuyifei.netlify.app

流程图
随时可能变化
liuyifei.club-hexo


前处理:本地hexo已经搭建成功,插件及主题配置修改也大致妥帖,hexo clean 后本地压缩备份。


推送至 GitHub

  1. GitHub 新建一个私人(Private)仓库,仓库名方便辨别即可,比如自己的域名 liuyifei.club,其它项目不要勾选

  2. 电脑进入要上传的项目的绝对路径(项目文件存储的路径)下

  3. 右键Git Bash Here

  4. 新建一个本地仓库

    git init
  5. 设置 GitHub 的用户名和邮箱

    git config --global user.name xxx(用户名)
    git config --global user.email xxx@gmail.com (邮箱)
  6. 添加远程地址

    git remote add origin git@github.com:用户名/仓库名.git
  7. 查看工作去与暂存区的差异(项目的改变)

    git status

    显示👇

    $ git status
    On branch master
    
    No commits yet
    
    Untracked files:
         .deploy_git/
         .gitignore
         _admin-config.yml
         _config.yml
         hexo.sh
         package-lock.json
         package.json
         scaffolds/
         source/
         themes/
    
    nothing added to commit but untracked files present (use "git add" to track)
    
  8. 检查根目录的.gitignore文件,至少有以下内容是不需要推送至云端的。

    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
  9. 将想要上传的目录从工作区添加到暂存区
    这里直接使用

    git add .

    添加全部文件
    等待时长视文件数目而定
    正确显示

  10. 将暂存区的文件提交至本地库

    git commit -m " 第一次推送网站源码 "

    -m 表示信息(message),方便区分监控文件状态变动

  11. 将本地库的项目上传至远程库

    git push origin master

    上传等待时间视网络而定

    可能出现报错

     ! [rejected]        master -> master (fetch first)
    error: failed to push some refs to 'github.com:用户名/仓库名.git'

    这是由于前面新建仓库时不小心建立了 README.md文件,而本地代码目录中不存在该文件
    解决方案:

    git pull --rebase origin master
    git push origin master
  12. 浏览器刷新 GitHub 仓库,查看方才上传的文件
    提交说明全部显示为 “第一次推送网站源码”
    至此,便可进行后续的 Netlify 自动部署操作。

  13. 前面的 .gitignore 文件如果配置不正确很可能导致某些不需要的目录上传到 git 远程仓库上,GitHub 不支持网页操作直接删除整个目录。

    • git rm -r -n --cached 文件/文件夹名称
      加上 -n 这个参数,执行命令时,不会删除任何文件,而是展示此命令要删除的文件列表预览。
    • 确认无误后删除
      git rm -r --cached 文件/文件夹名称
    • 提交到本地并推送到远程服务器
      git commit -m "提交说明"
      git push origin master
    • 修改本地 .gitignore 文件 并提交
      git commit -m "提交说明"
      git push origin master

Netlify 自动部署

  1. 登录 app.netlify.com
  2. 进入工作台,找到最醒目的 New site from Git 按钮
  3. Connect to Git provider。选择 GitHub 进行权限许可
  4. Pick a repository。选择之前创建好的包含hexo源码的仓库,可选列表中可能不显示你的仓库,还需点击右下角的 Configure the Netlify app on GitHub 获得进一步许可。
  5. Build options, and deploy!
    这里不要选择默认的部署命令
    第一次构建时使用
    npm install hexo&&npm install hexo-deployer-git -save&&hexo generate
  6. 构建成功后它会提供一个 xxx乱码.netlify.app 网址,在设置的 Domains 找到 Custom domains,可以自定义为自己喜欢的二级域名,打开后应该和本地预览的效果一样。(部分第三方服务例如 Valine 评论系统可能需要设置域名白名单才可正常显示)
  7. 进设置将 Deploy 的命令改回默认的 hexo generate.
  8. 暂时停笔

Vercel

比 Netlify 更简单,在国内的速度也更快。
登录后找到 Import Project 按钮,直接输入前面第一步创建的仓库链接即可,它会自动识别出这是一个hexo项目。
同样使用 npm install hexo&&npm install hexo-deployer-git -save&&hexo generate 覆盖默认的命令进行第一次构建。完事儿再改回去。

日常更新

本地预览确认完全无误之后

git add .&&git commit -m "博客更新"&&git push origin master

一键推送至远程仓库,Netlify 和 Vercel 自动进行部署。

骚操作

站点根目录下的配置文件,修改为

deploy:
- type: git
  repo:
	  github: https://用户名:密码@静态博客仓库url
	# coding: https://用户名:密码@静态博客仓库url
  branch: master

即可避免验证不通过的问题
Vercel 那边的自动部署命令改为👇

npm install hexo-deployer-git -save&&hexo generate&&hexo deploy

coding那边总是不成功,弃疗。


多域名节点生成首选网页地址,防止搜索引擎重复抓取。

hexo-auto-canonical

存在的 bug

  • 全部文章的最后更新时间一起变化
    如果文章的 front-mater 没有指定 updated: 日期,那么通过 Netlify 和 Vercel 生成的文章最后更新日期永远是服务器默认的当前时间。

    1. 挨个文章添加 updated: 日期
    2. 更新 Hexo 至最新版,打开根目录下的 _config.yml 找到 use_date_for_updated: false ,替换修改成 updated_option: 'date',防止文件的最后修改日期总是发生改变。
    3. 为了后续文章的方便,打开站点目录下的 scaffolds,编辑 post.md ,加入 updated: {{ date }} ,以后 hexo new post 的时候自动将当前时间作为更新时间添加至 front-matter ,确实有必要修改的时候再手动修改实际时间。
  • 部分本地加载成功的页面上线后显示不完全
    这是由于使用了相对引用,比如我这个不被主题渲染的游戏页面 2048,vercel 生成的网页,除 index.html 文件,其它全部404,不知它怎么自动跳漏了一层目录,而netlify那边没问题。
    https://lyf.vercel.app/game/style/main.css 404
    https://lyf.vercel.app/game/2048/style/main.css 200
    把相关链接全部改成绝对引用的固定地址就好了(反正平时也不改它)。
    https://liuyifei.club/game/2048/style/main.css


本站所有文章除特别声明外,均采用 CC BY-SA-NC 4.0 协议 。转载请注明原作者及出处!

 目录

既见君子 云胡不喜