发布时间: 更新时间:
  • Home
  • blog

准备

1.Ubuntu

sudo apt update    # 更新

2.github账号

3.git配置 默认保存在用户的主目录下的 .gitconfig 文件内

git config --global user.name "John Doe"             # 配置github账号用户名
git config --global user.email [email protected]   # 配置邮箱

4.连接github

ssh-keygen -t ed25519 -C "[email protected]"          # 生成SSH Keys  此为新版
ssh-keygen -t rsa -b 4096 -C "[email protected]"      # 此为旧版   

cat ~/.ssh/id_ed25519.pub                          # 复制

点击github右上角头像-> Settings -> SSH and GPG Keys -> New SSH key添加

ssh -T [email protected]   # 验证连接，输入yes

官方文档

5.git ssh 代理设置

非必要步骤，如果有一天ssh push网速极慢但https push正常，可尝试此操作

创建~/.ssh/config 文件：

Host github.com
    User git
    ProxyCommand nc -v -x 127.0.0.1:10808 %h %p    # 请修改127.0.0.1:10808

安装

snap install hugo --channel=extended  # 安装hugo

hugo version     # 验证

hugo new site myblog   # 创建博客

git init    # 初始化

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack     # 删掉themes文件夹，安装stack主题作为子模块

rm config.toml && cp themes/hugo-theme-stack/exampleSite/config.yaml .     # 使用主题的配置文件

把myblog/themes/hugo-theme-stack/exampleSite/content内容移到myblog/content使用主题示例文章

本地预览： myblog下执行

hugo server

浏览器打开：

http://localhost:1313/

部署

注：我将介绍使用github托管源码自动化部署，如果您仅在本地存放源码，提交public文件夹即可，无需使用下列方法。

1.虽然博客内容全都能看到，但我们可能不太希望公开源码，不开放源码使用github pages需要创建2个仓库: 创建 username.github.io.source 仓库存放源码可设为私人仓库，创建 username.github.io 仓库作为公开仓库

git remote add origin [email protected]:******.github.io.source.git       # 连接远程仓库。注意使用ssh连接，如果使用https连接每次都要输账号密码。

点击github右上角头像-> Settings -> Developer Settings-> Personal access tokens -> Generate new token （Note随意，Select scopes全选,复制token，我们这里使用Personal tokens比Deploy keys更方便）

找到源码仓库Settings-> Secrets and variables -> Actions -> New repository secret （Name写PERSONAL_TOKEN，Value粘贴token）

2.创建github actions的workflows自动部署文件：

mkdir -p .github/workflows && touch ~/myblog/.github/workflows/main.yml

粘贴脚本：

name: github pages

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest        #可 使用指定版本，例：runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: latest     # 可使用指定版本，例：hugo-version: '0.83.1'
          extended: true

      - name: Build
        run: hugo --gc --forceSyncStatic --minify --cleanDestinationDir

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN }} # PERSONAL_TOKEN是源码仓库secrets的name
          external_repository: username/username.github.io # Pages 远程仓库 
          publish_branch: master  # 部署的分支
          publish_dir: ./public
          commit_message: ${{ github.event.head_commit.message }}
          #cname: www.example.com # 使用自定义域名

只需更改external_repository: username/username.github.io 为你的github账户名，脚本详情

3.在myblog文件夹下创建push.sh

touch push.sh

粘贴脚本：

#!/bin/bash  

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m" 

 
# Add changes to git.  
git add . 

# Commit changes.  
msg="rebuilding site `date`" 
if [ $# -eq 1 ] 
  then msg="$1" 
fi 
git commit -m "$msg" 

# Push source and build repos.  
git push origin master

在myblog下运行 sh push.sh命令。

到此已完成部署，之后任何更新如上运行push脚本即可

修改主题

此处仅列举常见需修改内容，更多内容请看stack主题文档

本博客修改样式来自rmdhnreza

更多定制文章可以参考这里

主题配置

1.修改~/myblog/config.yaml

1   baseurl: https://username.github.io     # 改为自己的
2   languageCode: zh-CN                     # 中文编码
4   paginate: 10                            # 文章分页数
5   title: Example Site                     # 博客名字
30  DefaultContentLanguage: zh-cn           # 中文
34  hasCJKLanguage: true                    # 正确计数中、日、韩文语言的字数
48  since: 2021 
52  published: 2006-01-02                   # 日期格式
53  lastUpdated: 2006-01-02                 # 更新日期格式
56  emoji: 🍥                               # 头像角标
57  subtitle:                               # 博客名下的简介
61  src: img/avatar.png                     # 头像，myblog/themes/hugo-theme-stack/assets/img
135 name: '首页'                            # 改中文左侧菜单home
155 startLevel: 1                           # 从文章1级标题使用文章目录
195 unsafe: true                            # 允许Markdown嵌入html

2.左侧菜单栏 ~/myblog/content/page用于左侧菜单，请自定义

2  title: '关于'     #中文左侧菜单about，后同

3.覆盖主题样式

直接在~/myblog下复制rmdhnreza的assets和layouts文件夹。

另外修改：

  • ~/myblog/assets/scss/variables.scss

    • link-background-color: 0, 255, 255 链接背景颜色

注：浏览器可能缓存样式，可使用无痕模式

创建文章

hugo new post/文件夹名/index.md      #创建文章

写文章：

1.front matter:

---
title: hugo使用stack主题搭建博客及部署        #标题
description:       #副标题，此样式不可用
date: 2021-07-04           #日期
lastUpdated: 2021-07-27        #上次修改内容的日期
slug: hugo-blog            #URL的尾部，用于文章地址
categories:                #文章分类
    - blog
---

front matter仅列举本文使用，hugo front matter官方文档

2.常见文章markdown语法：

  • # 一级标题
    ## 二级标题
    ### 三级标题
    #### 四级标题
    ##### 五级标题
    ###### 六级标题

  • `单行代码`
    `` 有`需用双反引号 ``

  • ```html
    多行代码
    ```

  • [链接](https://)

  • \ 写在特殊符号前为转义；写在行尾为换行\

  • *斜体*
    **加粗**
    ~~删除线~~

  • * 无序列表
    双空格* 子无序列表

  • ![图片描述](本地图片.jpg)

  • 表格

| Italics   | Bold     | Code   |
| --------  | -------- | ------ |
| *italics* | **bold** | `code` |

  • shortcodes ./myblog/layouts/shortcodes

    • {{< spoiler text="点击展开和折叠代码" >}}
      ```html
      code
      ```
      {{< /spoiler >}}

    • {{< typography font=default size="30px" style="normal" weight="bold" color="blue">}}

      自定义字体
      {{< /typography >}}
      # font　　　Google 字体
      # size　　　大小
      # style　　　normal正常， italic 斜体
      # weight　　bold 加粗 ， lighter 更细

    • {{< box info >}} Hello there, and have a nice day {{< /box >}}

      Hello there, and have a nice day

    • {{< box warning >}} Hello there, and have a nice day {{< /box >}}

      Hello there, and have a nice day

    • {{< box important >}} Hello there, and have a nice day {{< /box >}}

      Hello there, and have a nice day

    • {{< box tip >}} Hello there, and have a nice day {{< /box >}}

      Hello there, and have a nice day

评论系统

waline官方文档写得非常清楚，您只需 LeanCloud设置 和 部署到Vercel ，拿到URL

然后修改~/myblog/config.yaml

52  provider: waline                        #评论系统，本文示例使用waline
73  serverURL: https://                     #评论系统URL用你自己的

执行sh push.sh即可

自定义域名

在~/myblog/config.yaml修改baseurl: https://username.github.io

在~/myblog/.github/workflows/main.yml最后一行取消注释并修改cname: https://example.com

执行sh push.sh即可

启用https：参考链接

Licensed under CC BY-NC-SA 4.0
最后更新于 2022-02-26