Hugo: stack theme setup and markdown style

FrontMatter Example

title: "How to use hugo to create personal blog"
description: ""
date: 2021-12-02T13:42:48+08:00
image: https://images.unsplash.com/photo-1593339595642-235dbd27e7f0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3868&q=80
license: 
hidden: false
comments: false
draft: true 
categories: [""]
tags: ["tech","life"]

Set up the username and email for commits

Check your username first

git config user.name

Change to your desired name for the commits (global)

git config --global user.name your_name

Check your email first

git config user.email

Change to your desired email address for the commits (global)

git config --global user.email your_email@example.com

如何在本地生成预览网页

在根目录运行下面代码

hugo server -t hugo-theme-stack --buildDrafts

How to post new blogs

在根目录下运行以下代码：

新建post

hugo new post/FileName.md

push到repo以生成网页

hugo --theme=hugo-theme-stack -b "https://solitary-roamer.github.io/" --buildDrafts

cd public

git add .
git commit -m "commit" 

git add -u ##if it shows 'no changes added to commit 
## (use "git add" and/or "git commit -a")
# git add/rm <conflicted_files>'

git push -u origin main

-u报错时，可用-f替换，强行push

git push -f origin main

To use this feature, add links section to frontmatter.

This page’s frontmatter:

links:
  - title: GitHub
    description: GitHub is the world's largest software development platform.
    website: https://github.com
    image: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
  - title: TypeScript
    description: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
    website: https://www.typescriptlang.org
    image: https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg

image field accepts both local and external images.

How to transfer to other devices (MacOS)

  1. 复制根目录文件夹 /Users/lockscreen username/github username 到新设备的相同根目录下 /Users/lockscreen username/github username (锁屏用户名若不相同，设置会相对麻烦一点，不过基本一致)
  2. 在本地生成 hugo server -t hugo-theme-stack --buildDrafts
  3. 初次推送到GitHub仓库，运行如下代码：
hugo --theme=hugo-theme-stack -b "https://solitary-roamer.github.io/" --buildDrafts

git init
git add .
git commit -m "commit"
git remote add origin https://github.com/solitary-roamer/solitary-roamer.github.io.git
git push -u origin main

git push -f origin main

上面最后一行git push -f origin main为强制执行，可在出现 failed to push some refs to Error: failed to push some refs to 时操作

  1. 若出现fatal: Authentication failed for 'https://github.com/solitary-roamer/solitary-roamer.github.io.git/'，可用获取Personal token的方式解决（看这里）

Other possible solutions (Remember to try this!)

如果你已经能够在本地用 hugo server -t hugo-theme-stack --buildDrafts 生成你想要的预览效果（生成的所有文件都在public文件夹中），接下来就只需要用 git 相关操作来将public文件夹push到repo中。

To delete all files in a GitHub repository, you can follow these steps (similar to push all local files to the repo):

Clone the repository to your local machine if you haven’t already done so:

git clone https://github.com/solitary-roamer/solitary-roamer.github.io

Navigate into the cloned repository directory:

cd solitary-roamer.github.io

Use Git to remove all files from the repository. Be cautious with this command, as it will remove all files and directories:

git rm -r .

Commit the changes:

git commit -m "Remove all files"

Push the changes to GitHub:

git push origin main

 

Work to be continued

  1. 添加评论区   ❌ （舍弃，不实用）

  2. 把文章全部导上去

  3. 备份Hugo所有文件

  4. GitHub Actions 自动部署   ❌ （待操作）

  5. 加入盘古之白   ❌ （舍弃，不实用） (update: 事实证明，可以增加美观度)

  6. …

 

Markdown tips

HTML 前后缀

注意：下面实际上是双括号

{<codehtml>} code {</codehtml>}

插入图片 - Github + PicGo

Why

Github可以用作图床，PicGo可以用来自动上传图片以及自动生成链接到剪切板。

GitHub配置

  1. 先在GitHub创建一个public repo，例如 blog-image;
  2. 创建一个personal token，专门用来上传图片

PicGo配置

  1. PicGo下载：安装好Homebrew后，直接用命令行brew install picgo --cask即可安装
  2. 软件设置：点击这里
  3. macOS中，PicGo会出现在顶边栏，直接拖拽图片到图标中即可上传，之后即可粘贴到markdown文件中（也可以直接上传剪切板中的文件）。注意：若要连续上传，需要在两张图片之间有空格。

代码

    <center>
        <img style="border-radius: 0.5em;" 
        src="https://raw.githubusercontent.com/solitary-roamer/blog-image/main/IMG_7564.jpg" width="40%">
        <div style="color: #999; padding: 0px;">Flower bloom</div>
        <br>
        <img style="border-radius: 0.5em;" 
        src="https://raw.githubusercontent.com/solitary-roamer/blog-image/main/IMG_7726.jpg" width="40%">
        <div style="color: #999; padding: 0px;">Flower decay</div>
    </center>

 

Woman in snow

Boston

Markdown常用命令

插入超链接

[超链接文字](url)

加粗

**文字**

倾斜

*文字*

下划线

下划线

删除线

删除线

前景色

前景色

背景色

背景色

综合

我是一段被用来展示的文字

© 2020 - 2024 沉郁