hugo-stack for github

Talmai_dev2023-10-23 14:42

静态博客框架jekyll、hexo和hugo三者之间的区别与差异

博客生成器?

  • 全名为静态网站生成器， 可在任意拥有主机功能的环境下寄存(托管)可直接配合域名进行全球访问
    劣势: 每次更新网页必须重新生成整个网站
  • 编译速度（单位：秒）
    • Jekyll: 15.90
    • Hugo: 4.90
    • Hexo的数据应当介于二者之间。

environment

  • Jekyll 有github支持，可以将markdown文件直接放到git仓库，github会自动生成网页文件。（Github一直是一个亲ruby的社区）
  • Hexo提供了方便的部署命令，可以做到一条命令部署到github上。
  • Hugo的官方文档写的非常好，部署简洁。前两者部署时需要安装很多依赖，而hugo可以直接提供二进制文件运行，甚至不需要root权限。
txt 复制代码 
To install Hugo on Kali Linux 2023.1, there are a few options available, depending on your preference. Here are two methods:
  • Method 1: Install using the APT package manager. Open a terminal and run the following command:
  • download hugo
shell 复制代码 
# kali/debian
sudo apt install hugo
hugo version # 查看版本

# yum
sudo yum install hugo -y

# arch
sudo pacman -S hugo
# 选择主题进行下载  也可手动下载
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
  • download git
shell 复制代码 
# kali自带 预装
# yum/redhat系
sudo yum install git
# arch
sudo pacman -Syu git
# debian
sudo pacman -Syu git
  • 安装Hugo

https://gohugo.io/getting-started/installing/#less-technical-users

  • 安装Git
shell 复制代码 
winget install Git.Git

安装Hugo相关的VSCode插件：

json 复制代码 
//在VSCode中，你可以设置任务来运行Hugo命令。首先，创建一个.vscode/tasks.json文件，并添加如下内容：
   {
     "version": "2.0.0",
     "tasks": [
       {
         "label": "Start Dev",
         "type": "shell",
         "command": "hugo server -D",
         "problemMatcher": []
       }
     ]
   }
toml 复制代码 
   # Set content editor
   newContentEditor = "code"

hugo from github

  • 1 log in or sign in
    github
  • 2 在github账户中创建一个项目 名为 你的Github用户名.github.io
    • 这是存放生成出来的网站文件的地方
  • 3在本地环境编写网站(原因开头:每次更新发布都需要修改整个网站 延迟2min左右)
  • 选择hugo主题模板网站的地方
    https://themes.gohugo.io/
  • 打开系统终端 (使用stack为例子)
    stack
shell 复制代码 
hugo new site  test  # 你的网站的根目录名
cd test/theme
git clone # 你的主题的GitHub网址.git  # wait a long time!
  • 到了这一步 甚至可以直接依照官方文档进行配置[Stack的文档](https://stack.jimmycai.com/) - 不建议本地+域名的方式进行搭建网站 这将会带来可怕的后果 逃( - 建议使用静态网站托管 - 网站目录结构查看
shell 复制代码 
├── archetypes  
│   └── default.md
├── config.yaml                 # 网站配置文件
├── content                     # 站点内的内容都在这里
│   ├── categories              # "分类"页面的首页
│   │   └── Test                # "分类"页面下的一个分类页面
│   ├── page                    # 显示在网站主页左侧边栏菜单的选项
│   │   ├── about               # 左侧边栏菜单中的"关于"页面
│   │   ├── archives            # 左侧边栏菜单中的"归档"页面
│   │   ├── links               # 左侧边栏菜单中的"链接"页面
│   │   └── search              # 左侧边栏菜单中的"搜索"页面
│   └── post                    # 用户写的帖子都放在这里，每个子文件夹对应一个帖子
│       ├── chinese-test
│       ├── emoji-support
│       ├── markdown-syntax
│       ├── math-typesetting
│       ├── placeholder-text
│       └── rich-content
├── data
├── layouts
├── LICENSE
├── README.md
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static                     # 放用户自定义字体、用户头像、网站小图标等
└── themes                     # 放各种主题
    └── hugo-theme-stack       # stack主题
        ├── archetypes
        ├── assets
        ├── config.yaml
        ├── data
        ├── debug.sh
        ├── exampleSite
        ├── go.mod
        ├── i18n
        ├── images
        ├── layouts
        ├── LICENSE
        ├── netlify.toml
        ├── README.md
        └── theme.toml
  • create(开始基本用法介绍)
shell 复制代码 
hugo new posts/随便一个名字/index.md

---
title: "文章标题"
description: "简介"
date: 2022-01-29T02:02:45-05:00
image: "你同目录下的封面图片名字(带后缀并且是相对路径)"
categories:
    - 分类1
    - 分类2
tags:
    - 标签1
    - 标签2
---

hugo new categories/分类名字/_index.md

---
title: "分类名"
date: 2022-02-08T01:03:14-05:00
image: 你的图片名(带后缀)
style:
    background: "#2a9d8f"
    color: "#fff"
---
  • 发布网站在网站根目录
shell 复制代码 
hugo --theme=主题文件夹名
#进入public准备发布
cd public
#发布上GitHub
git init
git add -A
git commit -m "对这次发布的说明"
git remote add origin https://github.com/你的Github用户名/你的Github用户名.github.io.git
git push -u origin master

makdown语法快速入门

  • markdown语法

    • Markdown 是一种轻量级标记语言，创始人是约翰・格鲁伯（John Gruber）。它允许人们 "使用易读易写的纯文本格式编写文档，然后转换成有效的 HTML 文档"。------ 维基百科。
    • markdow 支持html css可以用来写电子书 比如gitbook 如今被广泛应用到写博客 ，比如 GitHub、简书、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge csdn

  • environment

    • 系统默认编辑器 markdown github 网页版
    • 1.众所周知网页开发基本必备各种网页版编译环境
    • 2.Typora
    • 3.vscode
    • Markdown 源文件只规定了显示的内容，并没有定义显示的样式，所以在不同的预览环境下会看到不同的效果。为了使其保持统一，需要将 Markdown 文件转换成 HTML 文件；
    • 常见的 Markdown 编辑器都带有导出成 HTML 的功能，导出后通常含有编辑器自带样式；
    • 利用 Pandoc，我们可以在命令行中直接将 Markdown 文件导出成 HTML 文件。

  • csdn导航栏自带了很多功能（跳过）下面 直接讲markdown标准写法

markdown 复制代码 
## 一 标题
#### 1 下划线标题
#   h1
##  h2	
### h3
####  h4
#####  h5
###### h6
html 复制代码 
**加粗样式**
*斜体样式*
~~删除线格式~~ 
> 这里是引用
  • 三 段落
markdown 复制代码 
比如这样
随便换行
但是csdn这个吸金gouB特有的disbuff就是吞噬空格 和换行 下面会教你使用html代码解决这个问题
 ：一个字符的半角的不断行的空格，如果需要在网页中插入多个空格，可以将" "代码写多遍（常用方式）；
  ：一个字符的半角的空格，也可以将" "写多遍来插入多个空格；
  ：两个字符的全角的空格，也可以将" "写多遍来插入更多的空格；
 ：小于一个字符的空格；说明：单词后面的分号记得带上，是不能省略的，它也是html代码中的一部分
html 复制代码 
> 这里是引用
html 复制代码 
<p>行内的 html 代码： <code><head><title>网页标题</title></head></code></p>
<p>行内的 json 代码：<code>var json = {key: value};</code></p>
  • 高级语法
    • 超链接
html 复制代码 
[Markdown语法](https://markdown.com.cn "最好的markdown教程")```
# 中括号为显示部分  
# 括号里面放链接
# 引号里面放渲染部分  当年客户端展示时鼠标放到上面会显示链接的悬停标题
效果如下

Markdown语法

  • 表格
html 复制代码 
| 项目 | Value |
| ---- | ----- |
| 电脑 | $1600 |
| 手机 | $12   |
| 导管 | $1    |

|     Column 1      |               Column 2 |
| :---------------: | ---------------------: |
| centered 文本居中 | right-aligned 文本居右 |

  • 列表

  • 无序

    • List item

  • 有序

    1. List item

  • 代办

    • List item

  • 隐藏玩法可使用的html标签

html 复制代码 
<span>、<cite>、<del>
 <a>  <img>
  • 区域块不受限
html 复制代码 
<div>、<table>、<pre>、<p>
# 为了避免bug 这里不需要遵守html规则可直接使用这些标签
如下
This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

This is a regular paragraph.

|-----|
| Foo |

This is another regular paragraph

  • 当你使用markdown语法无法完成某一操作的时候 就需要去使用html/css
html 复制代码 
<p>html空格&nbsp;&nbsp;&nbsp;空格&nbsp;&nbsp;&nbsp;基础教程(cainiaojc.com)</p>
<p>html空格&ensp;&ensp;&ensp;空格&ensp;&ensp;&ensp;基础教程(cainiaojc.com)</p>
<p>html空格&emsp;&emsp;&emsp;空格&emsp;&emsp;&emsp;基础教程(cainiaojc.com)</p>
<p>html空格&thinsp;&thinsp;&thinsp;空格&thinsp;&thinsp;&thinsp;基础教程(cainiaojc.com)</p>
  • 2 不常用的html字符
html 复制代码 
符号										表示

&#32;									普通的英文半角空格
&#160; &nbsp; &#xA0;		普通的英文半角空格但不换行
&#12288;								中文全角空格（一个中文宽度）
&#8194; &ensp;					半角(en)空格 （半个中文宽度，不受字体影响）
&#8195; &emsp;					全角(em)空格 （一个中文宽度，不受字体影响）
&#8197;								四分之一全角(em)空格 （四分之一中文宽度）
&#32;									普通空格
&nbsp;									相比普通空格，不间断,按下space键产生的空格,不累加

在GitHub上搭建个人博客时，你可以选择购买国内或国外的域名。这两种选择各有其优缺点：

中国用户在Github上搭建个人博客环境下，可以考虑购买以下几家公司的国外域名：

  • GoDaddy：GoDaddy是全球最大的域名注册商，提供多种顶级域名注册服务，比如.com、.net、.org等。它有中文界面，支持支付宝和银联支付，购买流程简单易懂。GoDaddy还提供DNS管理服务，方便你将域名解析到Github上zhuanlan.zhihu.com。
  • Namecheap：Namecheap是另一个国外知名的域名注册商，提供多种顶级域名注册服务。Namecheap的价格相对较低，而且提供免费的Whois隐私保护服务，可以保护你的个人信息不被公开。Namecheap也支持支付宝支付，但需要注意的是它的界面是英文的zhuanlan.zhihu.com。
  • NameSilo：NameSilo是一家提供低廉价格的域名注册服务的公司。它提供免费的Whois隐私保护服务，并且没有任何隐藏费用。NameSilo的界面是英文的，支持支付宝支付zhuanlan.zhihu.com。

选择域名服务商时, 考虑以下几点：

  • 价格：不同的域名服务商价格可能会有所不同，比如初次购买价格、续费价格等。你需要根据自己的预算来选择适合的服务商。
  • 支付方式：不同的域名服务商可能支持不同的支付方式，如信用卡、Paypal、支付宝等。你需要选择支持你方便的支付方式的服务商。
  • 服务：你需要考虑域名服务商的客户服务，比如是否有中文客户服务，解决问题的速度如何等。
  • 隐私保护：如果你不希望你的个人信息被公开，你需要选择提供Whois隐私保护服务的域名服务商。

以下是一些提供免费域名的平台：

  • Freenom：Freenom 提供免费的顶级域名，包括 .tk、.ml、.ga、.cf 和 .gq 这些后缀。你可以免费使用这些域名，但需要注意的是，Freenom 不会发送续期通知，所以你需要自己记得及时续期iyideng.vip。
  • Dot.tk：Dot.tk 是一个属于 Freenom 的网站，专门提供免费的 .tk 域名。你可以在这个网站上免费注册 .tk 域名，但同样需要注意的是，你需要自行记得续期，否则域名会被回收iyideng.vip。
  • InfinityFree：InfinityFree 是一家提供免费虚拟主机的公司，同时也提供免费的顶级域名 .ml、.ga、.cf、.gq 和 .tk。你需要注册他们的免费虚拟主机服务，然后才能获得免费的顶级域名iyideng.vip。
  • Hostinger：Hostinger 是一家提供虚拟主机服务的公司，如果你购买他们的年度高级版或商业版共享虚拟主机套餐，可以在第一年免费获得高级顶级域名hostinger.com.hk。
  • Bluehost：Bluehost 是一家提供虚拟主机服务的公司，如果你从他们那里购买虚拟主机，则可以在第一年免费获得域名zhuanlan.zhihu.com。
  • DreamHost：DreamHost 是一家美国的主机商，如果你在它家购买主机会免费赠送1个域名给你。当然你也可以单独在DreamHost官网上单独注册域名zhuanlan.zhihu.com。
    (请注意，以上提供免费域名的公司可能会有一些附加的条款和条件，例如必须购买其他服务，或者只提供一定期限的免费域名。在注册免费域名之前，你应该仔细阅读这些条款和条件。)

域名&&CDN

  • 网站虽然发布了， 但是资源还在 github.io 上，在国内访问还是很慢， 需要 CDN 加速访问。
  • 什么是二级域名
bash 复制代码 
.com               //顶级域名
baidu.com          //一级域名
www.baidu.com      //二级域名
bbs.baidu.com      //二级域名
tieba.baidu.com    //二级域名    
#从 腾讯云 阿里云 等平台购买的域名如 .com .io .top 这些前面都有一段字符
比如 test.com 这些购买的域名都是一级域名 而二级域名 常常被人们广为使用  节约了成本 也方便管理

  • 打开腾讯云



  • github项目设置 完成之后就可以

    ![在这里插入图片描述![](https://img-blog.csdnimg.cn/38b01a69d1ad42c28a39f857db89607b.png)

  • 腾讯云CDN

    • 2023年1月 开始， https 请求按次数收费，300 万次/月 的免费额度
    • 缓存
      • 源站 -> CDN节点 -> 浏览器
      • 分静态资源， 可以把缓存时间配置长一点， 避免频繁回源,图片字体，css/js
        • 全站， 缓存 30 天。
        • 当年的内容， 使用默认的缓存策略， Last-Modified 时间越长， 缓存越久 。
        • 首页， 使用默认缓存策略。 混存 10 分钟甚至更短。
      • 访问控制 防止被盗链。
      • https 现在网站都要有。
      • 时间太短， 用户 频繁 从 CDN 上获取数据， 浪费流量。
      • 时间太长， 用户无法取得最新数据

  • CloudFlare免费CDN配置进入Cloudflare官网

    • 注册Cloudflare
      • 选择可靠的邮箱(排除qq邮箱)
      • 密码下面的选项是选择是否接受Cloudflared的一些产品相关信息，自由选择就好了。
      • 进入你的邮箱邮件里点击url进行二次验证，点击链接后，你会看到提示，表示你的邮箱已经完成验证。
    • 进入到账号后台界面，你点击 add site即添加自己需要配置的域名，确认方案后，Cloudflare会扫描该域名当前的DNS记录，你可以保留，也可以添加，也可以删除.
    • 直接输入主域名(二级域名)就可以了->选择套餐，三个付费套餐之下，选择免费->点击 continue 进入下一步。
      • Cloudflare会自动扫描你域名的dns记录
      • 黄色图标亮起,则代表可以使用Cloudflared的cdn，灰色图标，则不可以。
      • 你选择自己要加速的域名，不需要加速的也可以点击proxy status选项栏的按钮关闭。-> 选择好域名，点击 continue 进入下一步，修改DNS服务器。
    • 域名注册商处修改NS记录
      • NS记录是指处理域名解析的服务器，修改域名的NS记录，让它由不同的解析服务商来解析，例如可以指向Cloudflare。
      • NS记录修改生效。一般半个小时左右就可以修改成功。之后就可以用Cloudflare管理你的域名解析了。待NS记录修改生效后，在Cloudflare的DNS下面，添加你的域名解析A记录即可。

  • 上述流程操作全部需要手动操作web页面选项 ，故而可以写py脚本

python 复制代码 
import requests
import json

def get_record_id(dns_name, zone_id, token):
    resp = requests.get(
        'https://api.cloudflare.com/client/v4/zones/{}/dns_records'.format(zone_id),
        headers={
            'Authorization': 'Bearer ' + token,
            'Content-Type': 'application/json'
        })
    if not json.loads(resp.text)['success']:
        return None
    domains = json.loads(resp.text)['result']
    for domain in domains:
        if dns_name == domain['name']:
            return domain['id']
    return None

def update_dns_record(dns_name, zone_id, token, dns_id, ip, proxied=False):
    resp = requests.put(
        'https://api.cloudflare.com/client/v4/zones/{}/dns_records/{}'.format(
            zone_id, dns_id),
        json={
            'type': 'A',
            'name': dns_name,
            'content': ip,
            'proxied': proxied
        },
        headers={
            'Authorization': 'Bearer ' + token,
            'Content-Type': 'application/json'
        })
    if not json.loads(resp.text)['success']:
        return False
    return True

dns_id = get_record_id(dns_name, zone_id, token)
result = update_dns_record(dns_name, zone_id, token, dns_id, ip, proxied)
  • py只实现了部分功能，但是我用更熟练的cpp可以更加完善 (需要按照库:sudo apt-get install libcurl4-openssl-dev)
cpp 复制代码 
#include <curl/curl.h>
#include <string>

size_t WriteCallback(void* contents, size_t size, size_t nmemb, void* userp)
{
    ((std::string*)userp)->append((char*)contents, size * nmemb);
    return size * nmemb;
}

std::string get(const std::string& url)
{
    CURL* curl;
    CURLcode res;
    std::string readBuffer;

    curl_global_init(CURL_GLOBAL_DEFAULT);
    curl = curl_easy_init();
    if(curl) {
        curl_easy_setopt(curl, CURLOPT_URL, url.c_str());
        curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, WriteCallback);
        curl_easy_setopt(curl, CURLOPT_WRITEDATA, &readBuffer);
        res = curl_easy_perform(curl);
        if(res != CURLE_OK)
            fprintf(stderr, "curl_easy_perform() failed: %s\n", curl_easy_strerror(res));
        curl_easy_cleanup(curl);
    }
    curl_global_cleanup();

    return readBuffer;
}

std::string put(const std::string& url, const std::string& data)
{
    CURL* curl;
    CURLcode res;
    std::string readBuffer;

    curl_global_init(CURL_GLOBAL_DEFAULT);
    curl = curl_easy_init();
    if(curl) {
        curl_easy_setopt(curl, CURLOPT_URL, url.c_str());
        curl_easy_setopt(curl, CURLOPT_POSTFIELDS, data.c_str());
        curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, WriteCallback);
        curl_easy_setopt(curl, CURLOPT_WRITEDATA, &readBuffer);
        res = curl_easy_perform(curl);
        if(res != CURLE_OK)
            fprintf(stderr, "curl_easy_perform() failed: %s\n", curl_easy_strerror(res));
        curl_easy_cleanup(curl);
    }
    curl_global_cleanup();
    return readBuffer;
}
  • 添加错误处理代码，设置HTTP头部,使用libcurl库来发送HTTP请求，并添加错误处理代码和设置HTTP头部,当curl_easy_perform函数返回非零值时，我们打印错误信息并清理curl句柄。我们还添加了设置HTTP头部的代码，你可以使用curl_slist_append函数来添加HTTP头部。
cpp 复制代码 
#include <curl/curl.h>
#include <string>
#include <iostream>

size_t WriteCallback(void* contents, size_t size, size_t nmemb, void* userp)
{
    ((std::string*)userp)->append((char*)contents, size * nmemb);
    return size * nmemb;
}

std::string get(const std::string& url)
{
    CURL* curl;
    CURLcode res;
    std::string readBuffer;

    curl_global_init(CURL_GLOBAL_DEFAULT);
    curl = curl_easy_init();
    if(curl) {
        curl_easy_setopt(curl, CURLOPT_URL, url.c_str());
        curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, WriteCallback);
        curl_easy_setopt(curl, CURLOPT_WRITEDATA, &readBuffer);
        res = curl_easy_perform(curl);
        if(res != CURLE_OK)
        {
            std::cerr << "curl_easy_perform() failed: " << curl_easy_strerror(res) << std::endl;
            curl_easy_cleanup(curl);
            return "";
        }
        curl_easy_cleanup(curl);
    }
    curl_global_cleanup();

    return readBuffer;
}

std::string put(const std::string& url, const std::string& data)
{
    CURL* curl;
    CURLcode res;
    std::string readBuffer;

    curl_global_init(CURL_GLOBAL_DEFAULT);
    curl = curl_easy_init();
    if(curl) {
        curl_easy_setopt(curl, CURLOPT_URL, url.c_str());
        curl_easy_setopt(curl, CURLOPT_POSTFIELDS, data.c_str());
        curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, WriteCallback);
        curl_easy_setopt(curl, CURLOPT_WRITEDATA, &readBuffer);
        res = curl_easy_perform(curl);
        if(res != CURLE_OK)
        {
            std::cerr << "curl_easy_perform() failed: " << curl_easy_strerror(res) << std::endl;
            curl_easy_cleanup(curl);
            return "";
        }
        curl_easy_cleanup(curl);
    }
    curl_global_cleanup();
    return readBuffer;
}
相关推荐
旧故新长3 小时前
GitHub 和 Gitee 的区别和选择指南
gitee·github
SaxoZhao5 小时前
github.com port 22
github
小牛itbull11 小时前
ReactPress系列—NestJS 服务端开发流程简介
开发语言·前端·javascript·react.js·github
MicrosoftReactor16 小时前
技术速递｜GitHub Copilot upgrade assistant for Java 技术预览发布！
java·github·copilot
豆包MarsCode17 小时前
前端三件套配合豆包MarsCode 实现钉钉官网动画
java·前端·c++·github·钉钉
愚坤18 小时前
独立开发者 5 个月，月收入赶超北京工资，我的一点心得
前端·javascript·github
夏安安202519 小时前
github使用基础
git·ssh·github
杜杜的man21 小时前
【go从零单排】实现枚举类型(Enum)
git·golang·github
梓羽玩Python1 天前
34.6K Star！Go语言开发的 AI 驱动照片管理神器！
人工智能·开源·github
cmdyu_1 天前
Visual Studio Code 端口转发功能详解
ide·vscode·github
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05RAG 实践- Ollama+RagFlow 部署本地知识库06Windows10安装PCL1.14.0及点云配准07全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09Coze扣子平台完整体验和实践（附国内和国际版对比）10Unity中PICO实现 隔空取物 和 接触抓取物体