Hugo搭建博客(二)— Hugo+Github Pages搭建博客
使用Hugo已经把博客搭建好了,那应该部署到哪里呢?可以使用VPS、云服务器等,我使用的是Github Pages,免费而且也很好用!
我使用过两种方式来部署,第一种部署简单,但是每次发表博客很麻烦,第二种部署虽然步骤较多,但是发表博客非常便捷,管理起来很非常方便。下面介绍一下在部署过程的步骤和解决的问题。
1 最简单的部署
1.1 创建Repository
在 Github 上创建一个 用户名.github.io 的 Repository。
1.2 生成 public 目录
1 |
hugo --baseUrl="http://cool-sen.github.io/ |
---|
当然,也可以在config.toml中设置base URL,这样就不用每次设置base URL了,直接使用hugo
命令即可
1.3 推送到Github远程仓库
这步就是将public目录添加到远程仓库。如下面的命令:
1 2 3 4 5 6 |
$ cd public $ git init $ git remote add origin https://github.com/cool-sen/cool-sen.github.io.git // 添加远程仓库 $ git add -A // 跟踪所有文件 $ git commit -m "first commit" // 提交 $ git push -u origin master // 推送到远程仓库 |
---|
注意:push出错时语句改为
1 |
$ git push -u origin master -f //强制覆盖 |
---|
此时访问 用户名.github.io就可以在线查看你的网站了。
这种方式,每次都需要手动使用hugo
命令去生成public目录,不是很方便。下面介绍一种自动化的方式。
2 使用Github Actions自动构建博客
本地添加文章,提交到Github,之后会自动触发Github Actions帮助我们把刚刚添加的文章通过Hugo发布到Github Pages进行托管。之后即可通过 Github 给 Pages 生成的 URL 访问即可。
2.1 创建两个仓库
这里需要创建两个仓库,一个是 Github Pages仓库,也就是usename.github.io;另一个是Hugo文章仓库,来存放Hugo文章。
- 创建Github Pages仓库 在你的 Github 账号里新建一个 Repository ,仓库名必须为 username-github.io,必须使用 master 分支,这个就是你建立 Github Pages 的 Repository.
- 创建Hugo文章仓库 仓库名为:名称随意都可以,我设置是cool-sen.github.io.myBlog,可以设置为Private,看个人需求。
2.2 为两个仓库绑定 SSH Key
因为当我们在通过Git提交源码之后,Github Actions会编译生成静态文件并通过Git Push到 username.github.io
,因此这一步需要 Git 账户认证。
2.2.1 生成提交代码用的 ssh key
打开cmd或者其他命令行工具
1 |
ssh-keygen -t rsa -b 4096 -C user.email |
---|
这种方式可以输入自定义的路径来保存SSH Key,这样就不会影响到电脑中旧的SSH Key。
将会得到以下这两个文件:
1 2 |
id_rsa_hugo_deploy.pub (public key) id_rsa_hugo_deploy (private key) |
---|
2.2.2 填写密钥
假设 部署的项目为 username.github.io
,Hugo 文章的 Repository 名字是 myBlog
。
- 将 Public Key填写到username.github.io
红色箭头指的Allow write access
一定要勾上,否则会无法部署。
- 将 Private Key 添加到
username.github.io.myBlog仓库
这里 Secrets 变量名要一定是: ACTIONS_DEPLOY_KEY
, 后面会用到。
2.3 本地准备
这一步主要是本地和仓库进行同步,假设Hugo 文章的 Repository 名字是 myBlog
,将myBlog仓库克隆到本地,开始初始化 Hugo 系统,如果本地已经有Hugo 系统,只需要步到myBlog仓库即可。
2.4 编写 Github Actions 脚本
通过 Github 自动为我们仓库生成,注意是为 username.github.io.myBlog
仓库配置 Actions。
new workflow后,会出现一个 yml 文件的编辑器。第一次使用出现的是skip this : Set up a workflow yourself
。
接下来参考peaceiris/actions-hugo 和 peaceiris/actions-gh-pages 项目,编写自己的 workflow。如下面代码,修改完用户名信息,可以直接粘贴过去。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
name: Github Pages #自动化的名称 on: push: # push 的时候触发 branches: # 那些分支需要触发 - master jobs: build: runs-on: ubuntu-latest # 镜像市场 steps: - name: checkout # 步骤的名称 uses: actions/checkout@master #软件市场的名称 # with: # 参数 # submodules: true - name: Setup Hugo # 安装 Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: 'latest' # 使用Hugo最新版 extended: true - name: Build # 编译 run: hugo --minify - name: Deploy # 部署 uses: peaceiris/actions-gh-pages@v2 env: ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }} EXTERNAL_REPOSITORY: 你的用户名/你的用户名.github.io PUBLISH_BRANCH: master PUBLISH_DIR: ./public |
---|
修改好之后,点击右上角 commit 提交即可。以后可以本地重新commit,更加方便。
2.5 推送和访问
搭建就结束后,我们可以访问Github为username/username.github.io
仓库生成的域名: https://username.github.io/
查看效果。
之后每次写完博客,直接在本地仓库push就可以访问了。也可以写个脚本,直接一键push。如:
1 2 3 4 5 6 7 8 9 |
msg="rebuilding site `date`" echo $msg if [ $# -eq 1 ] then msg="$1" fi git add -A git commit -m "$msg" git push origin master |
---|
执行上面的代码后,Github 收到PUSH后Actions 就会自动开始构建了,等待结束大约1分钟不到即可打开网站域名。
快点试试吧…
- python使用装饰器@函数式化django开发
- python 设计模式,“多”例模式
- 怎样把微信聊天记录导出备份到电脑【微信公众平台技巧】
- zookeeper curator选主(Leader)
- zookeeper curator使用caches实现各种监听
- python apschedule安装使用与源码分析
- 数据迁移过程中hive sql调优
- 词序:神经网络能按正确的顺序排列单词吗?
- 使用spark对hive表中的多列数据判重
- 如何从微信公众平台上下载关注用户(备份微信关注用户)
- 使用hive客户端java api读写hive集群上的信息
- 大数据算法设计模式(1) - topN spark实现
- redis性能调优笔记(can not get Resource from jedis pool和jedis connect time out)
- thrift例子:python客户端/java服务端
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Ubuntu系统 安装与配置 常见异常与解决办法
- [OHIF-Viewers]医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解
- Bitmap的加载和Cache
- Python全栈 Linux基础之2.Linux终端命令简介
- Ubuntu系统 使用与开发 常见异常与解决办法
- 淘宝首页Bug!嵌套滑动及NestedScroll
- 曝光埋点方案:recyclerView中的item曝光逻辑实现
- Android中的动画全解!
- Python 爬取留言板留言(二):多线程版+selenium模拟
- 嵌套滑动通用解决方案--NestedScrollingParent2
- Python 爬取留言板留言(一):单进程版+selenium模拟
- Glide-图片加载框架全解(一)- 基本用法
- Python全栈(六)项目前导之1.Redis介绍及数据类型介绍
- 网络请求框架OkHttp3全解系列(一):OkHttp的基本使用
- 网络请求框架OkHttp3全解系列 - (二)OkHttp的工作流程分析