0、下载hugo

下载包之后,直接解压,添加到环境变量中即可。

1、安装hugo

可以使用荒野无灯的vscode中的插件: hugofy,插件使用

详见:https://nanodm.net/post/misc/build-a-hugo-blog-in-one-second-with-vscode/

2、hugo使用

新建站点命令:hugo new site blog

新建站点后进入 blog 目录,查看生成的文件及主要目录

archetypes 目录下会有个模板文件,新生成的文章会以此为模板

config.toml 网站配置文件

content 用来存放 Markdown 文件

layouts 存放 html 模板文件,如果使用了第三方模板,可以将 themes 里 layouts 目录下的 html 复制过来,然后在这里修改,hugo 会优先使用这个目录下的该文件,以后再更新 themes 下的模板文件时也不用担心文件冲突问题

data 存储数据文件供模板使用

public 生成的静态网站文件会放在这里

static 可以把图片等静态资源放这里

themes 存放网站主题文件

来自 https://lijingcheng.github.io/posts/hugo/

安装主题

Hugo 整理了很多开发者制作的主题,安装时直接将主题下载到刚创建的 themes 目录中就可以了,具体方式可参考各主题的介绍说明

cd blog git init git submodule add https://github.com/vaga/hugo-theme-m10c.git themes/m10c

来自 https://lijingcheng.github.io/posts/hugo/

修改 config.toml

baseURL = “https://ZechariahZheng.github.io/"

languageCode = “zh-Hans”

title = “ZechariahZheng’s Blog”

theme = “m10c”

paginate = 10

[params]

author = “ZechariahZheng”

avatar = “images/avatar.png”

description = “如果失去了这颗折腾的心,还拿什么来面对我平淡无奇的人生呢?”

[[params.social]]

name = “github”

url = “https://github.com/ZechariahZheng"

注:上传到github仓库中的话,baseURL必须是https,否则加载不出css样式

新建文章

Hugo new posts/first.md

本地预览

hugo server -D

通过 http://localhost:1313 查看,发布文章之前需要将文章内的 draft 改为 false

生成本地文件

hugo

Github actions同步博客

注:在上面blog的根目录下,将主题以非submodule加入,否则github actions编译不能生出css等文件。即去掉主题中的.git文件即可

思路:一个私有仓库存放hugo源码,另一个仓库命名为:xxxx.github.io

在私有仓库中加入actions,和screts(personal_token)即可。

Actions如下:

name: Deploy Hugo Site to Github Pages on Master Branch

on:
    push:
        branches:
            - master

jobs:
    build-deploy:
        runs-on: ubuntu-18.04
        steps:
            - uses: actions/checkout@v1  # v2 does not have submodules option now
              # with:
              #   submodules: true

            - name: Setup Hugo
                uses: peaceiris/actions-hugo@v2
                with:
                    hugo-version: latest
                    # extended: true

            - name: Build
                run: hugo

            - name: Deploy
                uses: peaceiris/actions-gh-pages@v3
                with:
                    personal_token: ${{ secrets.personal_token }} # personal_token 这里新建一个 https://github.com/settings/tokens
                    external_repository: ZechariahZheng/ZechariahZheng.github.io # Pages 远程仓库 
                    publish_dir: ./public
                    keep_files: false # remove existing files
                    publish_branch: master  # deploying branch
                    commit_message: ${{ github.event.head_commit.message }}

添加域名

1、在上面存放静态网站的Repository设置里面Custom domain填上自己的域名点击save;

来自 https://www.jianshu.com/p/4669fb3bf35a

2、执行以下语句获得自己的GitHub Pages的IP:

ping shanetian.github.io

3、在域名提供商的网站配置DNS即可,以Godaddy为例配置两条记录如下:

4、可以在GitHub Pages设置强制https协议,这样你的网站就有安全锁啦。