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. [bfs,深度记录] East Central North America Regional Contest 2016 (ECNA 2016) D Lost in Translation

    Problem D Lost in Translation The word is out that you’ve just finished writing a book entitled How ...

  2. bluekeep漏洞(CVE-2019-0708)利用

    前言 上个月爆出exp的一个高危漏洞,跟风复现一下下...( ̄▽ ̄)~* 简介 Windows再次被曝出一个破坏力巨大的高危远程漏洞CVE-2019-0708.攻击者一旦成功利用该漏洞,便可以在目标系 ...

  3. Mock测试,结合Fiddler轻松搞定不同场景

    在平时测试过程中,总会遇到一些比较难构造的场景.比如不同平台间的同步,异常场景的构造.遇到难构造的场景时,就可以引用Mock来进行单元测试.简言之:mock测试就是在测试过程中,对于某些不容易构造或者 ...

  4. msys2 mingw64安装

    (1)安装msys2 (2)更新\etc\pacman.d\下的源文件 mirrorlist.msys Server = http://repo.msys2.org/msys/$arch/ Serve ...

  5. 使用Keras进行深度学习:(一)Keras 入门

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! Keras是Python中以CNTK.Tensorflow或者Th ...

  6. Centos 8 安装 Consul-Template

    1. 下载安装包( consul-template_0.23.0_linux_amd64.zip 文件 ) 下载地址: https://releases.hashicorp.com/consul-te ...

  7. 学习笔记-EL

    仅作为学习过程中笔记作用,若有不正确的地方欢迎指正 目标 理解El的作用,熟练使用EL EL表达式与Jsp表达式对比来记 EL表达式的概念,作用,语法 Jsp作用主要是用来实现动态网页的,而动态网页中 ...

  8. 关于C#三层架构增删改查中的“添加”问题

    关于“添加”功能的实现比较简单: 先来一个简单的界面: 然后是代码: ··采用的是三层架构的思想写的·· 在DAO中的方法为: (使用了动软自动生成代码) 希望对您有所帮助!

  9. 艾编程coding老师课堂笔记:java设计模式与并发编程笔记

    设计模式概念 1.1 什么是设计模式 设计模式(Design Pattern)是前辈们对代码开发经验的总结,是解决特定问题的一系列套路.它不是语法规定,而是一套用来提高代码可复用性.可维护性.可读性. ...

  10. echarts图表x,y轴的设置

    https://www.cnblogs.com/cjh-strive/p/11065005.html xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [ { type : 'c ...