hugo-stack for github

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

博客生成器?

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

environment

  • Jekyll 有github支持,可以将markdown文件直接放到git仓库,github会自动生成网页文件。(Github一直是一个亲ruby的社区)
  • Hexo提供了方便的部署命令,可以做到一条命令部署到github上。
  • Hugo的官方文档写的非常好,部署简洁。前两者部署时需要安装很多依赖,而hugo可以直接提供二进制文件运行,甚至不需要root权限。
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
# 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
# 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
winget install Git.Git

安装Hugo相关的VSCode插件:

  • 你可以在VSCode的插件市场中搜索并安装以下插件,这些插件会提供语法高亮,代码片段,快速导航等功能,以提高你使用Hugo的效率:
    • Front Matter: 这个插件可以帮助你管理文章的元数据例如创建日期,修改日期,标题,SEO检查等gohugo.io。
      Hugo Language and Syntax Support: 这个插件提供Hugo语法的高亮和代码片段功能gohugo.io。
    • Hugo Helper: 这个插件包含一些有用的Hugo命令gohugo.io。
    • Hugo Themer: 如果你在开发主题,这个插件可以帮助你更方便地导航你的主题文件gohugo.io。
    • Hugofy: 这个插件可以使得在使用Hugo时更加便捷gohugo.io。
    • Syntax Highlighting for Hugo Shortcodes: 这个插件为Shortcodes添加了语法高亮,使得视觉识别各个部分更加容易gohugo.io。
    • 设置VSCode任务:
//在VSCode中,你可以设置任务来运行Hugo命令。首先,创建一个.vscode/tasks.json文件,并添加如下内容:
   {
     "version": "2.0.0",
     "tasks": [
       {
         "label": "Start Dev",
         "type": "shell",
         "command": "hugo server -D",
         "problemMatcher": []
       }
     ]
   }
  • 通过“运行任务”或“命令面板”来运行这个任务,这将启动Hugo的开发服务器laurentsenta.com。

    使用VSCode的User Snippets:
    VSCode的User Snippets功能可以帮助你快速插入常用的代码片段。例如,你可以创建一个User Snippet来快速插入Hugo的YAML front matter,这可以大大提高你创建新文章的速度moonbooth.com。

  • 配置Hugo:
    在你的Hugo项目中,你可以在config.toml文件中设置你的首选编辑器为VSCode,如下所示:

   # Set content editor
   newContentEditor = "code"
  • 这样,当你从命令行创建新的内容时,VSCode将会自动打开新创建的文件vninja.net。
    记住,不同的Hugo主题可能有不同的配置选项,确保你查看了你所使用主题的文档以了解详细的配置指南gohugo.io。

hugo from github

  • 1 log in or sign in
    github
  • 2 在github账户中创建一个项目 名为 你的Github用户名.github.io
    • 这是存放生成出来的网站文件的地方
  • 3在本地环境编写网站(原因开头:每次更新发布都需要修改整个网站 延迟2min左右)
  • 选择hugo主题模板网站的地方
    https://themes.gohugo.io/
  • 打开系统终端 (使用stack为例子)
    stack
hugo new site  test  # 你的网站的根目录名
cd test/theme
git clone # 你的主题的GitHub网址.git  # wait a long time!
- 到了这一步 甚至可以直接依照官方文档进行配置[Stack的文档](https://stack.jimmycai.com/) - 不建议本地+域名的方式进行搭建网站 这将会带来可怕的后果 逃( - 建议使用静态网站托管 - 网站目录结构查看
├── 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(开始基本用法介绍)
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"
---
  • 发布网站在网站根目录
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标准写法
    在这里插入图片描述
    hugo-stack for github_第1张图片

## 一 标题
#### 1 下划线标题

hugo-stack for github_第2张图片

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

Markdown语法

  • 表格
| 项目 | Value |
| ---- | ----- |
| 电脑 | $1600 |
| 手机 | $12   |
| 导管 | $1    |

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

hugo-stack for github_第3张图片

  • 列表
  • 无序
 - List item
  • 有序
 1. List item
  • 代办
 - [ ] List item
  • 隐藏玩法可使用的html标签
<span><cite><del>
 <a>  <img>
  • 区域块不受限
<div><table><pre><p>
# 为了避免bug 这里不需要遵守html规则可直接使用这些标签
如下
This is a regular paragraph.

<table>
    <tr>
        <td>Footd>
    tr>
table>

This is another regular paragraph.

This is a regular paragraph.

Foo
This is another regular paragraph
  • 当你使用markdown语法无法完成某一操作的时候 就需要去使用html/css
<p>html空格   空格   基础教程(cainiaojc.com)p>
<p>html空格空格基础教程(cainiaojc.com)p>
<p>html空格空格基础教程(cainiaojc.com)p>
<p>html空格空格基础教程(cainiaojc.com)p>
  • 2 不常用的html字符
符号										表示

 									普通的英文半角空格
     		普通的英文半角空格但不换行
 								中文全角空格(一个中文宽度)
 					半角(en)空格 (半个中文宽度,不受字体影响)
 					全角(em)空格 (一个中文宽度,不受字体影响)
								四分之一全角(em)空格 (四分之一中文宽度)
 									普通空格
 									相比普通空格,不间断,按下space键产生的空格,不累加

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

  • 国内域名:最大的差异在于,国内域名需要备案才能使用,而且必须要有3个租期以上的服务器才能开始备案,一台服务器只能为一个域名备案zhuanlan.zhihu.com。另外,由于Github部署的是国外服务器,国内的域名是不能用在国外服务器的,所以如果你打算在Github上部署博客,那么应该考虑购买国外域名zhuanlan.zhihu.com。
  • 国外域名:国外域名买了就能用,不需要备案zhuanlan.zhihu.com。你可以在诸如Godaddy和NameSilo等国外知名的域名服务商上购买zhuanlan.zhihu.com。另外,域名是可以随时转到不同服务商下的,比如将国外域名转为国内,将腾讯云买的域名转到阿里云等。但是,需要注意的是: 选好之后就尽量不要换了,在更换域名服务商之后,3个月内域名是用不了的,类似被冻结的状态zhuanlan.zhihu.com。

中国用户在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 加速访问。
  • 什么是二级域名
.com               //顶级域名
baidu.com          //一级域名
www.baidu.com      //二级域名
bbs.baidu.com      //二级域名
tieba.baidu.com    //二级域名    
#从 腾讯云 阿里云 等平台购买的域名如 .com .io .top 这些前面都有一段字符
比如 test.com 这些购买的域名都是一级域名 而二级域名 常常被人们广为使用  节约了成本 也方便管理
  • 打开腾讯云
    hugo-stack for github_第4张图片
    hugo-stack for github_第5张图片
    在这里插入图片描述
    在这里插入图片描述

  • github项目设置 完成之后就可以
    ![在这里插入图片描述![](https://img-blog.csdnimg.cn/38b01a69d1ad42c28a39f857db89607b.png)

  • 腾讯云CDN

    • 2023年1月 开始, https 请求按次数收费,300 万次/月 的免费额度
    • 缓存
      • 源站 -> CDN节点 -> 浏览器
      • hugo-stack for github_第6张图片
      • 分静态资源, 可以把缓存时间配置长一点, 避免频繁回源,图片字体,css/js
        • 全站, 缓存 30 天。
        • 当年的内容, 使用默认的缓存策略, Last-Modified 时间越长, 缓存越久 。
        • 首页, 使用默认缓存策略。 混存 10 分钟甚至更短。
      • 访问控制 防止被盗链。
      • https 现在网站都要有。
        hugo-stack for github_第7张图片
      • 时间太短, 用户 频繁 从 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脚本

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)
#include 
#include 

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头部。
#include 
#include 
#include 

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;
}

你可能感兴趣的:(github)