靜態(tài)博客框架jekyll、hexo和hugo三者之間的區(qū)別與差異
博客生成器?
- 全名為靜態(tài)網(wǎng)站生成器， 可在任意擁有主機功能的環(huán)境下寄存(托管)可直接配合域名進行全球訪問
劣勢: 每次更新網(wǎng)頁必須重新生成整個網(wǎng)站 - 編譯速度（單位：秒）
- Jekyll: 15.90
- Hugo: 4.90
- Hexo的數(shù)據(jù)應當介于二者之間。
environment
- Jekyll 有github支持，可以將markdown文件直接放到git倉庫，github會自動生成網(wǎng)頁文件。（Github一直是一個親ruby的社區(qū)）
- 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: 這個插件可以幫助你管理文章的元數(shù)據(jù)例如創(chuàng)建日期，修改日期，標題，SEO檢查等gohugo.io。
Hugo Language and Syntax Support: 這個插件提供Hugo語法的高亮和代碼片段功能gohugo.io。 - Hugo Helper: 這個插件包含一些有用的Hugo命令gohugo.io。
- Hugo Themer: 如果你在開發(fā)主題，這個插件可以幫助你更方便地導航你的主題文件gohugo.io。
- Hugofy: 這個插件可以使得在使用Hugo時更加便捷gohugo.io。
- Syntax Highlighting for Hugo Shortcodes: 這個插件為Shortcodes添加了語法高亮，使得視覺識別各個部分更加容易gohugo.io。
- 設置VSCode任務：
- Front Matter: 這個插件可以幫助你管理文章的元數(shù)據(jù)例如創(chuàng)建日期，修改日期，標題，SEO檢查等gohugo.io。
//在VSCode中，你可以設置任務來運行Hugo命令。首先，創(chuàng)建一個.vscode/tasks.json文件，并添加如下內(nèi)容：
{
"version": "2.0.0",
"tasks": [
{
"label": "Start Dev",
"type": "shell",
"command": "hugo server -D",
"problemMatcher": []
}
]
}
-
通過“運行任務”或“命令面板”來運行這個任務，這將啟動Hugo的開發(fā)服務器laurentsenta.com。
使用VSCode的User Snippets：
VSCode的User Snippets功能可以幫助你快速插入常用的代碼片段。例如，你可以創(chuàng)建一個User Snippet來快速插入Hugo的YAML front matter，這可以大大提高你創(chuàng)建新文章的速度moonbooth.com。 -
配置Hugo：
在你的Hugo項目中，你可以在config.toml文件中設置你的首選編輯器為VSCode，如下所示：
# Set content editor
newContentEditor = "code"
- 這樣，當你從命令行創(chuàng)建新的內(nèi)容時，VSCode將會自動打開新創(chuàng)建的文件vninja.net。
記住，不同的Hugo主題可能有不同的配置選項，確保你查看了你所使用主題的文檔以了解詳細的配置指南gohugo.io。
hugo from github
- 1 log in or sign in
github - 2 在github賬戶中創(chuàng)建一個項目 名為 你的Github用戶名.github.io
- 這是存放生成出來的網(wǎng)站文件的地方
- 3在本地環(huán)境編寫網(wǎng)站(原因開頭:每次更新發(fā)布都需要修改整個網(wǎng)站 延遲2min左右)
- 選擇hugo主題模板網(wǎng)站的地方
https://themes.gohugo.io/ - 打開系統(tǒng)終端 (使用stack為例子)
stack
hugo new site test # 你的網(wǎng)站的根目錄名
cd test/theme
git clone # 你的主題的GitHub網(wǎng)址.git # wait a long time!
├── archetypes
│ └── default.md
├── config.yaml # 網(wǎng)站配置文件
├── content # 站點內(nèi)的內(nèi)容都在這里
│ ├── categories # “分類”頁面的首頁
│ │ └── Test # “分類”頁面下的一個分類頁面
│ ├── page # 顯示在網(wǎng)站主頁左側(cè)邊欄菜單的選項
│ │ ├── about # 左側(cè)邊欄菜單中的“關于”頁面
│ │ ├── archives # 左側(cè)邊欄菜單中的“歸檔”頁面
│ │ ├── links # 左側(cè)邊欄菜單中的“鏈接”頁面
│ │ └── search # 左側(cè)邊欄菜單中的“搜索”頁面
│ └── post # 用戶寫的帖子都放在這里，每個子文件夾對應一個帖子
│ ├── chinese-test
│ ├── emoji-support
│ ├── markdown-syntax
│ ├── math-typesetting
│ ├── placeholder-text
│ └── rich-content
├── data
├── layouts
├── LICENSE
├── README.md
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static # 放用戶自定義字體、用戶頭像、網(wǎng)站小圖標等
└── 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"
---
- 發(fā)布網(wǎng)站在網(wǎng)站根目錄
hugo --theme=主題文件夾名
#進入public準備發(fā)布
cd public
#發(fā)布上GitHub
git init
git add -A
git commit -m "對這次發(fā)布的說明"
git remote add origin https://github.com/你的Github用戶名/你的Github用戶名.github.io.git
git push -u origin master
makdown語法快速入門
-
markdown語法
- Markdown 是一種輕量級標記語言，創(chuàng)始人是約翰?格魯伯（John Gruber）。它允許人們 “使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的 HTML 文檔”?！?維基百科。
- markdow 支持html css可以用來寫電子書 比如gitbook 如今被廣泛應用到寫博客 ，比如 GitHub、簡書、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge csdn
-
environment
- 系統(tǒng)默認編輯器 markdown github 網(wǎng)頁版
- 1.眾所周知網(wǎng)頁開發(fā)基本必備各種網(wǎng)頁版編譯環(huán)境
- 2.Typora
- 3.vscode
- Markdown 源文件只規(guī)定了顯示的內(nèi)容，并沒有定義顯示的樣式，所以在不同的預覽環(huán)境下會看到不同的效果。為了使其保持統(tǒng)一，需要將 Markdown 文件轉(zhuǎn)換成 HTML 文件；
- 常見的 Markdown 編輯器都帶有導出成 HTML 的功能，導出后通常含有編輯器自帶樣式；
- 利用 Pandoc，我們可以在命令行中直接將 Markdown 文件導出成 HTML 文件。
-
csdn導航欄自帶了很多功能（跳過）下面 直接講markdown標準寫法
## 一 標題
#### 1 下劃線標題
# h1
## h2
### h3
#### h4
##### h5
###### h6
**加粗樣式**
*斜體樣式*
~~刪除線格式~~
> 這里是引用
- 三 段落
比如這樣
隨便換行
但是csdn這個吸金gouB特有的disbuff就是吞噬空格 和換行 下面會教你使用html代碼解決這個問題
：一個字符的半角的不斷行的空格，如果需要在網(wǎng)頁中插入多個空格，可以將“ ”代碼寫多遍（常用方式）；
  ：一個字符的半角的空格，也可以將“?”寫多遍來插入多個空格；
  ：兩個字符的全角的空格，也可以將“?”寫多遍來插入更多的空格；
 ：小于一個字符的空格；說明：單詞后面的分號記得帶上，是不能省略的，它也是html代碼中的一部分
> 這里是引用
<p>行內(nèi)的 html 代碼： <code><head><title>網(wǎng)頁標題</title></head></code></p>
<p>行內(nèi)的 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 文本居右 |
- 列表
- 無序
- List item
- 有序
1. List item
- 代辦
- [ ] List item
- 隱藏玩法可使用的html標簽
<span>、<cite>、<del>
<a> <img>
- 區(qū)域塊不受限
<div>、<table>、<pre>、<p>
# 為了避免bug 這里不需要遵守html規(guī)則可直接使用這些標簽
如下
This is a regular paragraph.
<table>
<tr>
<td>Foo</td>
</tr>
</table>
This is another regular paragraph.
This is a regular paragraph.
| Foo |
- 當你使用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鍵產(chǎn)生的空格,不累加
在GitHub上搭建個人博客時，你可以選擇購買國內(nèi)或國外的域名。這兩種選擇各有其優(yōu)缺點：
- 國內(nèi)域名：最大的差異在于，國內(nèi)域名需要備案才能使用，而且必須要有3個租期以上的服務器才能開始備案，一臺服務器只能為一個域名備案zhuanlan.zhihu.com。另外，由于Github部署的是國外服務器，國內(nèi)的域名是不能用在國外服務器的，所以如果你打算在Github上部署博客，那么應該考慮購買國外域名zhuanlan.zhihu.com。
- 國外域名：國外域名買了就能用，不需要備案zhuanlan.zhihu.com。你可以在諸如Godaddy和NameSilo等國外知名的域名服務商上購買zhuanlan.zhihu.com。另外，域名是可以隨時轉(zhuǎn)到不同服務商下的，比如將國外域名轉(zhuǎn)為國內(nèi)，將騰訊云買的域名轉(zhuǎn)到阿里云等。但是，需要注意的是: 選好之后就盡量不要換了，在更換域名服務商之后，3個月內(nèi)域名是用不了的，類似被凍結的狀態(tài)zhuanlan.zhihu.com。
中國用戶在Github上搭建個人博客環(huán)境下，可以考慮購買以下幾家公司的國外域名：
- GoDaddy：GoDaddy是全球最大的域名注冊商，提供多種頂級域名注冊服務，比如.com、.net、.org等。它有中文界面，支持支付寶和銀聯(lián)支付，購買流程簡單易懂。GoDaddy還提供DNS管理服務，方便你將域名解析到Github上zhuanlan.zhihu.com。
- Namecheap：Namecheap是另一個國外知名的域名注冊商，提供多種頂級域名注冊服務。Namecheap的價格相對較低，而且提供免費的Whois隱私保護服務，可以保護你的個人信息不被公開。Namecheap也支持支付寶支付，但需要注意的是它的界面是英文的zhuanlan.zhihu.com。
- NameSilo：NameSilo是一家提供低廉價格的域名注冊服務的公司。它提供免費的Whois隱私保護服務，并且沒有任何隱藏費用。NameSilo的界面是英文的，支持支付寶支付zhuanlan.zhihu.com。
選擇域名服務商時, 考慮以下幾點：
- 價格：不同的域名服務商價格可能會有所不同，比如初次購買價格、續(xù)費價格等。你需要根據(jù)自己的預算來選擇適合的服務商。
- 支付方式：不同的域名服務商可能支持不同的支付方式，如信用卡、Paypal、支付寶等。你需要選擇支持你方便的支付方式的服務商。
- 服務：你需要考慮域名服務商的客戶服務，比如是否有中文客戶服務，解決問題的速度如何等。
- 隱私保護：如果你不希望你的個人信息被公開，你需要選擇提供Whois隱私保護服務的域名服務商。
以下是一些提供免費域名的平臺：
- Freenom：Freenom 提供免費的頂級域名，包括 .tk、.ml、.ga、.cf 和 .gq 這些后綴。你可以免費使用這些域名，但需要注意的是，F(xiàn)reenom 不會發(fā)送續(xù)期通知，所以你需要自己記得及時續(xù)期iyideng.vip。
- Dot.tk：Dot.tk 是一個屬于 Freenom 的網(wǎng)站，專門提供免費的 .tk 域名。你可以在這個網(wǎng)站上免費注冊 .tk 域名，但同樣需要注意的是，你需要自行記得續(xù)期，否則域名會被回收iyideng.vip。
- InfinityFree：InfinityFree 是一家提供免費虛擬主機的公司，同時也提供免費的頂級域名 .ml、.ga、.cf、.gq 和 .tk。你需要注冊他們的免費虛擬主機服務，然后才能獲得免費的頂級域名iyideng.vip。
- Hostinger：Hostinger 是一家提供虛擬主機服務的公司，如果你購買他們的年度高級版或商業(yè)版共享虛擬主機套餐，可以在第一年免費獲得高級頂級域名hostinger.com.hk。
- Bluehost：Bluehost 是一家提供虛擬主機服務的公司，如果你從他們那里購買虛擬主機，則可以在第一年免費獲得域名zhuanlan.zhihu.com。
- DreamHost：DreamHost 是一家美國的主機商，如果你在它家購買主機會免費贈送1個域名給你。當然你也可以單獨在DreamHost官網(wǎng)上單獨注冊域名zhuanlan.zhihu.com。
(請注意，以上提供免費域名的公司可能會有一些附加的條款和條件，例如必須購買其他服務，或者只提供一定期限的免費域名。在注冊免費域名之前，你應該仔細閱讀這些條款和條件。)
域名&&CDN
- 網(wǎng)站雖然發(fā)布了， 但是資源還在 github.io 上，在國內(nèi)訪問還是很慢， 需要 CDN 加速訪問。
- 什么是二級域名
.com //頂級域名
baidu.com //一級域名
www.baidu.com //二級域名
bbs.baidu.com //二級域名
tieba.baidu.com //二級域名
#從 騰訊云 阿里云 等平臺購買的域名如 .com .io .top 這些前面都有一段字符
比如 test.com 這些購買的域名都是一級域名 而二級域名 常常被人們廣為使用 節(jié)約了成本 也方便管理
-
打開騰訊云
-
github項目設置 完成之后就可以
-
騰訊云CDN
- 2023年1月 開始， https 請求按次數(shù)收費，300 萬次/月 的免費額度
- 緩存
- 源站 -> CDN節(jié)點 -> 瀏覽器
- 分靜態(tài)資源， 可以把緩存時間配置長一點， 避免頻繁回源,圖片字體，css/js
- 全站， 緩存 30 天。
- 當年的內(nèi)容， 使用默認的緩存策略， Last-Modified 時間越長， 緩存越久 。
- 首頁， 使用默認緩存策略。 混存 10 分鐘甚至更短。
- 訪問控制 防止被盜鏈。
- https 現(xiàn)在網(wǎng)站都要有。
- 時間太短， 用戶 頻繁 從 CDN 上獲取數(shù)據(jù)， 浪費流量。
- 時間太長， 用戶無法取得最新數(shù)據(jù)
-
CloudFlare免費CDN配置進入Cloudflare官網(wǎng)文章來源：http://www.zghlxwxcb.cn/news/detail-721543.html
- 注冊Cloudflare
- 選擇可靠的郵箱(排除qq郵箱)
- 密碼下面的選項是選擇是否接受Cloudflared的一些產(chǎn)品相關信息，自由選擇就好了。
- 進入你的郵箱郵件里點擊url進行二次驗證，點擊鏈接后，你會看到提示，表示你的郵箱已經(jīng)完成驗證。
- 進入到賬號后臺界面，你點擊 add site即添加自己需要配置的域名，確認方案后，Cloudflare會掃描該域名當前的DNS記錄，你可以保留，也可以添加，也可以刪除.
- 直接輸入主域名(二級域名)就可以了->選擇套餐，三個付費套餐之下，選擇免費->點擊 continue 進入下一步。
- Cloudflare會自動掃描你域名的dns記錄
- 黃色圖標亮起,則代表可以使用Cloudflared的cdn，灰色圖標，則不可以。
- 你選擇自己要加速的域名，不需要加速的也可以點擊proxy status選項欄的按鈕關閉。-> 選擇好域名，點擊 continue 進入下一步，修改DNS服務器。 - 域名注冊商處修改NS記錄
- NS記錄是指處理域名解析的服務器，修改域名的NS記錄，讓它由不同的解析服務商來解析，例如可以指向Cloudflare。
- NS記錄修改生效。一般半個小時左右就可以修改成功。之后就可以用Cloudflare管理你的域名解析了。待NS記錄修改生效后，在Cloudflare的DNS下面，添加你的域名解析A記錄即可。
- 注冊Cloudflare
-
上述流程操作全部需要手動操作web頁面選項 ，故而可以寫py腳本文章來源地址http://www.zghlxwxcb.cn/news/detail-721543.html
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只實現(xiàn)了部分功能，但是我用更熟練的cpp可以更加完善 (需要按照庫:sudo apt-get install libcurl4-openssl-dev)
#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庫來發(fā)送HTTP請求，并添加錯誤處理代碼和設置HTTP頭部,當curl_easy_perform函數(shù)返回非零值時，我們打印錯誤信息并清理curl句柄。我們還添加了設置HTTP頭部的代碼，你可以使用curl_slist_append函數(shù)來添加HTTP頭部。
#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;
}
到了這里，關于hugo-stack for github的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
