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. python爬取中国大学排名

    教程来自:[Python网络爬虫与信息提取].MOOC. 北京理工大学 目标:爬取最好大学网前50名大学 代码如下: import requests from bs4 import Beautiful ...

  2. 痞子衡嵌入式:记录i.MXRT1060驱动LCD屏显示横向渐变色有亮点问题解决全过程(提问篇)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT1060上LCD横向渐变色显示出亮点问题的分析解决经验. 痞子衡前段时间在支持一个i.MXRT1060客户项目时遇到了LCD ...

  3. GitHub标星2.6万!Python算法新手入门大全

    今天推荐一个Python学习的干货. 几个印度小哥,在GitHub上建了一个各种Python算法的新手入门大全,现在标星已经超过2.6万.这个项目主要包括两部分内容:一是各种算法的基本原理讲解,二是各 ...

  4. TCP连接与HTTP请求

    一道经典面试题: 从 URL 在浏览器被被输入到页面展现的过程中发生了什么? 相信大多数准备过的同学都能回答出来,但是如果继续问:收到的 HTML 如果包含几十个图片标签,这些图片是以什么方式.什么顺 ...

  5. 模块 jieba结巴分词库 中文分词

    jieba结巴分词库 jieba(结巴)是一个强大的分词库,完美支持中文分词,本文对其基本用法做一个简要总结. 安装jieba pip install jieba 简单用法 结巴分词分为三种模式:精确 ...

  6. Vertica的这些事(四)——-vertica加密数据

    通过创建 Secure Access Policies可以对vertica中的某一列数据进行加密: CREATE ACCESS POLICY ON [schema][tablename] FOR CO ...

  7. 判断移动端还是PC端JS

    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {         // alert("手机&qu ...

  8. PTA | 1029 旧键盘 (20分)

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及实际被输入的文字,请你列出肯定坏掉的那些键. 输入格式: 输入在 2 行中分别给出应该输入的文字.以及 ...

  9. MTK Android Driver :Memory

    型号配置: 1.CUSTOM_MEMORY_HDR(需要确认是否是MTK认证的flash ic) mediatek\custom\$(PROJECT)\preloader\inc\custom_Mem ...

  10. 初始WebApi(1)

    如果你要问我WebApi是干嘛,我只能说它是的给数据.哈哈哈哈哈,这几天也才刚刚了解了解关于WebApi的知识,今天就来谈谈吧. 1.创建WebApi项目 第一步:选择ASP.NET Web应用程序 ...