写在前面，搬迁记录

记录我的博客这次搬家过程。我的博客之前经历过：

wordpress
github page
Bitcron - 机制很不错（写完的博客自动保存到dropbox并发布，可惜搜索引擎的收录不是很好。）
这次搬迁 2020年4月10日初步完成

博客的架构

现在写博客一直采用 markdown 语法，所以也是本次可以顺利迁移的一大前提。最近两年一直用的是 Bitcron ，非常顺滑。每次写完 md 文件，直接保存即可（博客立即更新可见）。不过一直搜索引擎的收录不是很好，如我直接搜索 "Bob Jiang" 我的博客始终排不到第一个。很奇怪......

索性现在申请了一年免费的 google cloud，就做个搬迁。

搬迁之后的博客存储在 google cloud storage 上，DNS也顺便切换到 Cloudfare 上了。博客系统使用的是 hugo ，主题用的是 Ezhil。博客整体存放于 github上，每次提交到github会自动出发一次 github action，推送到谷歌存储。

博客的工作流

博客的工作机制如下：

本次编写博客(md文件) 并本次检查 (hugo server)
github push 到 github 仓库
每次 push 或者 pull request 会出发 github action
github action 进行 hugo 编译
github action 推送博客静态文件到谷歌存储

博客的配置 (手把手教你配置)

第一步，配置hugo

安装 hugo 可以参考我朋友的博客，免费搭建一个静态博客。搭建完成后，关于主题，这里我采用的 hugo 主题是 Ezhil，可以直接用 github fork一份 hugo 主题。具体操作参考 Ezhil。

hugo和主题都准备好后，目录结构如下：

content/ 博客的源文件，markdown格式
public/ 博客的静态网页，hugo自动生成（根据你选择的模板生成漂亮的静态网页）
static/ 博客的全局静态资源，如全局使用的图片
theme/ 博客的主题
config.toml 博客的配置文件

第二步，新建github仓库

github上需要创建一个新的仓库（假设你已经有了github账号）。然后把本地的博客目录中，除了 public/ 目录的内容推送到代码仓库中。

访问 github，登录（注册）账号
新建一个仓库，如下图，点击 New Repository

填写仓库的名字，选择仓库的可见性（默认公开的、可以选择私有的），勾选初始化时创建 README 文件，如下图：

下一步需要创建并配置谷歌存储 - Google Cloud Storage，然后再回来配置 github secrets

第三步，google cloud storage

这里我用的谷歌存储，也可以选择国内的阿里云，腾讯云的OSS服务。

谷歌存储 - Google Cloud Storage，需要创建一个存储。访问 Console 如下图

3.1 创建存储（bucket）

创建存储，注意：名字必-须是 www.yourdomain.com 不能设置为根域名（即这里需要是 CNAME 的名字设置bucket名字）。根域名可以通过 DNS 的设置来实现。

注意存储分区（bucket）名字必须是 CNAME 域名的名字（必须是完全一致），如我的分区名字是 www.bobjiang.com。存储分区不支持直接改名，可以先创建新名字的存储分区，然后把数据转移过去来实现。

访问权限，可以修改为"统一"方式，这样可以简单操作。

3.2 增加访问权限

下面是为新建的存储分区（bucket）增加访问权限，点击"修改存储分区权限"点击"添加成员"输入新成员：allUsers，角色：Storage Object Viewer （要严格检查这里的角色权限）

最后可以检查一下权限的设置，这里应该提示如下："在互联网上公开"

3.3 权限设置

这里主要设置服务账号（service account），为了给其他的第三方进行服务（如接下来我们用 github action 连接）授权。

进入服务账号页面，选择"IAM和管理"，点击"服务账号"，如图

点击"创建服务账号"

输入"服务账号名称"，"服务账号ID"，和"服务账号说明"

第二步默认值即可，进入第三步如下图，点击"创建密钥"

选择密钥类型 JSON

密钥生成后，保存到本地（一定保存好密钥，不要丢失）。使用这个密钥和服务账号，就可以访问你的谷歌云存储。

记住服务账号的邮箱，如下图：

下一步配置 github secrets

第四步，github secrets

如图创建如下的两个 github secrets：

GCP_SA_EMAIL - 值可以参考服务账号的创建小节
GCP_SA_KEY - 值为下面命令的结果（用本地的 JSON 密钥生成，命令如下）

cat your-json-key.json | base64

第五步，github action

Github action的作用是：

有代码push 或者pull request到仓库时，自动出发下列动作
准备一个 ubuntu 编译环境
准备 hugo 环境
进行 hugo 编译
编译后的 public 目录（静态网页）上传到谷歌存储 - Google Cloud Storage

新建 github action ，并点击 "set up workflow yourself"

我的 github action 代码如下：

# github action的名字，可以随意改
name: build hugo and deploy to google cloud platform (storage)# 什么时候调用 action，这里是当 master 上有代码 push 或者 pull request 会触发 github action
on:push:branches: [ master ]pull_request:branches: [ master ]# 环境变量的设置，下面会用到
env:GCP_SA_EMAIL: ${{ secrets.GCP_SA_EMAIL }}GCP_SA_KEY: ${{ secrets.GCP_SA_KEY }}GCP_BUCKET: www.bobjiang.com# 任务的准备，用 ubuntu最新的环境
jobs:setup-deploy:name: Setup and Deployruns-on: ubuntu-lateststeps:# 检出master分支的代码 checkout- name: Checkoutuses: actions/checkout@v2# 准备hugo环境
# hugo ready & build- name: Setup Hugouses: peaceiris/actions-hugo@v2with:hugo-version: '0.62.2'# extended: true# hugo 编译生成静态网页 public目录内的内容- run: hugo --minify# deploy to google storage
# 准备 连接到 google 云- uses: GoogleCloudPlatform/github-actions/setup-gcloud@masterwith:version: '285.0.0'project_id: ${{ secrets.GCP_PROJECT_ID }}service_account_email: ${{ secrets.GCP_SA_EMAIL }}service_account_key: ${{ secrets.GCP_SA_KEY }}export_default_credentials: true
# 检查 google 云的连接结果- run: gcloud info
# 用 gsutil 推送 public 目录内容到谷歌云存储- run: gsutil -m rsync -d -c -r public gs://$GCP_BUCKET- run: gsutil -m setmeta -h "Cache-Control:public, max-age=3600" gs://$GCP_BUCKET/**/*.html- run: gsutil -m setmeta -h "Cache-Control:public, max-age=31536000" gs://$GCP_BUCKET/js/*.js- run: gsutil -m setmeta -h "Cache-Control:public, max-age=31536000" gs://$GCP_BUCKET/css/*.css

总结

经过本次梳理后，写博客完全是本地操作且可以本地调试。写博客在 hugo 项目的 content 目录内写 markdown 文件调试可以用 hugo server 本地访问 http://localhost:1313/

效果满意后，可以把 content 目录内的改动推送到 github 仓库后面就是自动化准备环境编译、部署（github action）到谷歌云存储。

所以作为一个业余写手，需要更加关注的是内容产出。
自动化啦......

本文由博客群发一文多发等运营工具平台 OpenWrite 发布

博客搬家 - 记第四次搬家(hugo建站推送到谷歌云存储)相关推荐

【Blog】Hexo_Next_博客搭建记 (by onlychristmas)
与我而言,建立个人博客存在的意义有两个. 一方面,当作自己的备忘录,记录零散的知识点,避免重复的搜索工作: 另一方面,可以更好的分享一些自己的心得,方便与大家交流. 选择GitHub_Hexo_Nex ...
沐风晓月个人博客折腾记：从零开始加上漂亮的前端模板，轻松提升博客品味
前言在个人博客折腾记的专栏里,我们已经安装好了wordpress,能用但看上去不够好看: 我们希望让前端模板好看一点,如果你有好的前端模板推荐,可以评论区留言哦. 如果你还没有搭建wordpress ...
Flask从入门到做出一个博客的大型教程(四)
Flask从入门到做出一个博客的大型教程(四) 在开始之前,先来看下项目的整体结构. flask ├── app │ ├── forms.py │ ├── __init__.py │ ├── mode ...
四步WordPress快速建站步骤
1分钟WordPress快速建站具体流程本文介绍如何使用siterubix建设wordpress网站的具体步骤,无论是中文站还是英文站极为简单,4步即可,时间不到1分钟,除上述优势之外: 1. 免费 ...
个人博客代码_这四个博客模板美观大气，做个漂亮的个人博客必须得收藏
由于要做博客系统的开发,在网上收集了四个博客模板,个人感觉都不错,在这里分享给大家,希望有想跟着一起做博客系统开发的,可以下载使用,跟上我们的节奏. 一.白色自适应博客模板这套模板主题色为白色,自适 ...
使用github page + Hexo搭建个人博客折腾记
网上各种找资料,折腾了好久,终于把自己的个人博客搭建成功.现把自己使用github+hexo搭建的过程再一步步整理出来.我的 hexo 是 3.3.1 版本,hexo 3.0以上版本和3.0以下版本的 ...
基于hexo框架快速从0到1搭建个人博客----文章写作（四）
基于hexo框架快速从0到1搭建个人博客----文章写作一.Github图床(图片存储) 二.PicGo(图片上传) 三.jsDelivr(CDN加速) 四.Typora(写文传图) 五.总结一. ...
庆祝博客积分成功上四位数！
今天,我的博客积分终于成功的到达了4位数,为1002分,小窃喜一下.嘻嘻.同时关注人数也到了50人.算是一个小进步吧. 关注我的人应该可以看到,我的博客很少发一些和技术无关的文章,并且文章也主要分布在 ...
Android 博客园客户端（四）基本功能完成（博客列表和内容、新闻列表和内容、推荐博主）...
项目地址:https://github.com/ZhangTingkuo/AndroidCnblogs APK:http://files.cnblogs.com/zhangtingkuo/Androi ...

博客搬家 - 记第四次搬家(hugo建站推送到谷歌云存储)