HUGO + Github + Github Action持续集成部署个人博客

HUGO本地环境

首先在HUGO的官网下载Hugo的Windows安装包,然后将路径添加到环境变量即可。

step1:下载hugo

step2:配置环境变量

HUGO站点配置及主题配置

创建站点

在目录下直接输入下面的代码即可创建一个名为blog的hugo站点(注意:新建的站点是没有自带主题的)

hugo new site blog

或者进入blog文件夹内直接输入以下语句:

hugo new site .

下载主题

可以在hugo theme下载主题,然后根据主题的文档进行配置

放到站点文件夹themes内,配置config.toml

本地测试运行

输入hugo server测试

Github配置

创建站点仓库并且设置GithubPage

可以在Setting中看见如下:

创建一个存储项目的仓库

配置Github Action

首先在项目仓库点击action,选择Simple workflow,输入一下的配置代码:

name: CI #自动化的名称
on:
push: # push的时候触发
branches: # 那些分支需要触发
- master
jobs:
build:
runs-on: ubuntu-latest # 镜像市场
steps:
- name: checkout # 步骤的名称
uses: actions/checkout@v1 #软件市场的名称
with: # 参数
submodules: true
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2.2.2
with:
hugo-version: '0.64.1'
extended: true
- name: Build
run: hugo -D
- name: Deploy
uses: peaceiris/actions-gh-pages@v2.5.1
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
EXTERNAL_REPOSITORY: redisread/redisread.github.io
PUBLISH_BRANCH: master
PUBLISH_DIR: ./public

准备部署,我们开发的项目及github pages实际是分开的,一个用于保存项目,相当于源代码,另外一个用于保存最终的网页文件。

  1. 使用git生成ssh key(相当于生成对密钥)

    ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
    # You will get 2 files:
    # gh-pages.pub (public key)
    # gh-pages (private key)

    假设 开发项目为 HUGO_blog 部署的项目为 redisread.github.io

  2. 打开HUGO_blog仓库的settings,再点击Secrets,然后添加刚刚生成的私钥,name为ACTIONS_DEPLOY_KEY

  3. 同理,打开redisread.github.io,点击Deploy keys,添加公钥,Allow write access一定要勾上,否则会无法提交

然后,你就可以提交代码了,push成功后,打开仓库actions,至此部署成功,大功告成!

Hugo博客搭建的更多相关文章

  1. [原创]HEXO博客搭建日记

    博客系统折腾了好久,使用过Wordpress,Ghost,Typecho,其中Typecho是我使用起来最舒心的一种,Markdown编辑+轻量化设计,功能不多不少刚好,着实让我这种强迫症患者舒服了好 ...

  2. Node.js博客搭建

    Node.js 博客搭建 一. 学习需求 Node 的安装运行 会安装node,搭建node环境 会运行node. 基础模块的使用 Buffer:二进制数据处理模块 Event:事件模块 fs:文件系 ...

  3. nodejs环境 + 入门 + 博客搭建

    NodeJS:NodeJS是一个使用了Google高性能V8 引擎 的服务器端JavaScript实现.它提供了一个(几乎)完全非阻塞I/O栈,与JavaScript提供的闭包和匿名函数相结合,使之成 ...

  4. WordPress博客搭建与问题总结

      一.WordPress博客搭建 1.安装Apache web服务器 yum install -y httpd systemctl restart httpd systemctl enable ht ...

  5. 基于Github&Hexo的个人博客搭建过程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 个人博客搭建( wordpress )

    最近同学买了一台虚机( centos7 系统 ).一个域名,让帮忙搭一个个人博客.本着简单快捷,个人博客采用 wordpress 来搭建.为了以后博客系统的迁移方便,使用 docker 来安装 wor ...

  7. Hexo博客搭建以及Next主题美化的经验之谈

    这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...

  8. Hexo博客搭建全解

    [原创,转载请附网址:http://dongshuyan.top] 欢迎来到莫与的博客,第一篇记录了一下怎么写一篇博客,以方便之后写博客~ #从配置说起下载安装Git与Node.js略过 1.安装he ...

  9. GITHUB个人博客搭建-Pelican 在Windows环境下的安装及配置

    GITHUB个人博客搭建-Pelican 在Windows环境下的安装及配置 前言 此篇博客主要为Pelican在Windows平台下的配置安装所写,在此过程中主要参考资料烟雨林博客.poem_of_ ...

随机推荐

  1. SpannableStringBuilder实现TextView华丽变身

    前言 想要在TextView 的文本添加一些突出文字,然后点击可以进行跳转,首先想到的就是TextView拼接,但是考虑到换行后的显示又不是很合适,一番查询后发现了SpannableStringBui ...

  2. Python-类的特性

    ------------恢复内容开始------------ 类及类的定义 Cat类 类的特殊方法-构造函数.析构函数 class Cat: # 构造函数 def __init__(self, nam ...

  3. 从DeepNet到HRNet,这有一份深度学习“人体姿势估计”全指南

    从DeepNet到HRNet,这有一份深度学习"人体姿势估计"全指南 几十年来,人体姿态估计(Human Pose estimation)在计算机视觉界备受关注.它是理解图像和视频 ...

  4. webpack配置打包vue文件

    1.首先全局安装node,和npm.检查是否安装成功 2.新建一个文件下,进入该文件夹. 前先执行 npm init -y 然后就会在文件夹下出现一个package.json文件 然后执行 npm i ...

  5. SpringBoot 集成ehcache

    1, 项目实在springboot 集成mybatis 的基础上的: https://www.cnblogs.com/pickKnow/p/11189729.html 2,pom 如下,有的不需要加, ...

  6. django中 对Mysql数据库的建表

    Django操作Mysql数据库: 1.1 在settings中,配置数据库相关参数,所以无需修改,这里我们看一下: DATABASES = { 'default': { # 这里可以指定使用的数据库 ...

  7. [noip模拟]心<并查集>

    背景描述: 不是一切深渊都是灭亡 不是一切灭亡都覆盖在弱者的头上 ——<这也是一切> 舒婷 有N个透明的盒子, 每个盒子里面有两个不同颜色的球, 总共有M种颜色. Alice和Bob又在玩 ...

  8. 【webpack 系列】进阶篇

    本文将继续引入更多的 webpack 配置,建议先阅读[webpack 系列]基础篇的内容.如果发现文中有任何错误,请在评论区指正.本文所有代码都可在 github 找到. 打包多页应用 之前我们配置 ...

  9. 关于js在一个固定的盒子里面拖拽的问题(包含临界值)

    回武汉打卡第三天,武汉加油,逆战必胜!今天我们一起分享一下js拖拽的问题. 当然实现拖拽方法是有很多的,下面简单讲一种方法,大致思路如下: 首先需要用到的事件主要有  onmousedown,onmo ...

  10. 自动由@3x图片生成@2x和@1x的图片 - Xcode插件

    原文:http://www.cocoachina.com/bbs/read.php?tid=277187 生成@3x图片对应的@2x和@1x版本--RTImageAssets 关键字:Xcode插件, ...