2020.7.27 增補(bǔ) ： 博客地址已更變?yōu)?https://xd.sh.cn ，并從Hugo遷移回了WordPress，WordPress 真香。

-----" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 使用了靜態(tài)網(wǎng)頁生成器：從WordPress 到 Hugo

使用了靜態(tài)網(wǎng)頁生成器：從WordPress 到 Hugo

時(shí)間：2023-07-03 21:00:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-03 21:00:01 來源：網(wǎng)站運(yùn)營

使用了靜態(tài)網(wǎng)頁生成器：從WordPress 到 Hugo：2020.10.6 增補(bǔ)：又換回了 Hugo，使用 Github 和 Netlify 托管，真香。

2020.7.27 增補(bǔ) ： 博客地址已更變?yōu)?https://xd.sh.cn ，并從Hugo遷移回了WordPress，WordPress 真香。

----- 以下是原文 ------

之前立過一個(gè)flag，說并不會(huì)把博客變?yōu)殪o態(tài)的，依然使用wordpress作為博客的主力。但是基于考試考完閑著蛋疼、無窮無盡折騰的原則，準(zhǔn)備試試靜態(tài)博客，也就是分別嘗試了兩個(gè)靜態(tài)網(wǎng)頁生成器：hexo和hugo。在使用兩者之前就有將兩者進(jìn)行過對(duì)比，前者基于node.js、后者基于golang，在對(duì)比了種種優(yōu)缺點(diǎn)之后決定還是選擇wordpress 。不過還是對(duì)比出來一點(diǎn)東西的，個(gè)人傾向于hugo。

本文的目錄（僅供參考之用，點(diǎn)了會(huì)跳轉(zhuǎn)到原文）：

  1. 嘗試
  2. 靜態(tài)博客最快速上手
  3. 安裝 hugo
  4. 用 hugo 創(chuàng)建第一個(gè)新網(wǎng)站
  5. 給網(wǎng)站增加一點(diǎn)內(nèi)容
    1. 寫第一篇文章
    2. 或者復(fù)制粘貼你的 markdown 文件
  6. 預(yù)覽和上傳站點(diǎn)
    1. 上傳并部署站點(diǎn)
      1. 使用 FTP
      2. 使用 Git
  7. 雜項(xiàng)的配置
    1. 內(nèi)容摘要
    2. 永久鏈接配置
    3. 新建頁面
    4. 更改字體
    5. 增加百度、谷歌統(tǒng)計(jì)
    6. 顯示數(shù)學(xué)公式
    7. 顯示目錄
  8. 增補(bǔ)

嘗試

但是，最明顯的優(yōu)點(diǎn)在于：hugo在構(gòu)建過程中更快、hexo使用人數(shù)更多資源更豐富。作為新手的我，先用中文資源多的hexo搞了一遍，成功了之后換了無數(shù)套hexo主題沒有太滿意的，于是打算自己改一下主題。但是看到那些主題文件稍微有點(diǎn)懵，主題文件的后綴名千奇百怪：有些主題用了.ejs、有些主題用了.pug。

反正也很好查，pug就是jade文件——一種通過縮進(jìn)的方式來編寫代碼的過程、可以和html相互轉(zhuǎn)換。但是不巧的是，我那套主題把pug代碼文本放到那種html轉(zhuǎn)換器，并不能很好地轉(zhuǎn)為html代碼、直接修改這些文件又廢眼睛（像在改一團(tuán)亂碼）。這種糟糕的體驗(yàn)很容易會(huì)使一個(gè)懶人放棄，于是我拿著一堆md文件正式投奔hugo的懷抱。

靜態(tài)博客最快速上手

如果你有一個(gè)虛擬主機(jī)或者服務(wù)器，服務(wù)器搭建好了環(huán)境或者面板（比如：寶塔面板），那么你就可以在自己的本地電腦上生成一堆網(wǎng)頁靜態(tài)文件：比方說html、css、圖片等等，然后一股腦地傳到自己地虛擬主機(jī)上。綁定域名、解析域名、打開網(wǎng)址，網(wǎng)站建成了。

在上段所述過程中，最需要講地就是“生成一堆網(wǎng)頁靜態(tài)文件”，本篇講的就是這個(gè)步驟。有了這堆靜態(tài)文件，網(wǎng)站=完成。

安裝hugo

安裝hugo可以直接點(diǎn)擊hugo的快速入門，在windows中安裝hugo。

我的環(huán)境是windows，選擇的安裝方法是Chocolatey (Windows)，步驟如下：

  1. 用管理員身份打開windows中的Windows PowerShell（命令提示符）。（windows中搜索powershell，右鍵“用管理員身份運(yùn)行”）
  2. 復(fù)制下方代碼，然后執(zhí)行
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
  1. 輸入choco，查看是否安裝成功。
  2. 復(fù)制下方代碼，然后執(zhí)行
choco install hugo -confirm
  1. 安裝完畢

用hugo創(chuàng)建第一個(gè)新網(wǎng)站

  1. 這時(shí)候可以關(guān)閉powershell了，在想新建網(wǎng)站文件夾的路徑下打開cmd，例如： C:/Users/用戶名/ 。（路徑隨意，按照個(gè)人喜好決定）
  2. 在cmd中，復(fù)制下方代碼，然后執(zhí)行（quickstart可以替換為自己的網(wǎng)站名，英文字母）
hugo new site quickstart
  1. 上述操作會(huì)在 C:/Users/用戶名/ 中創(chuàng)建一個(gè)名為"quickstart"的文件夾。打開這個(gè)文件夾會(huì)發(fā)現(xiàn)一些熟悉的目錄，比方說theme目錄里面放的是主題、content里面放的就是markdown文件等等。
  2. 下一步增加一個(gè)主題，這里推薦MemE主題，首先在CMD中打開博客所在文件夾：
cd /d C:/Users/用戶名/quickstart先網(wǎng)上搜索git，安裝一下（都選擇默認(rèn)選項(xiàng)）。然后在老地方CMD中輸入：

git initgit submodule add https://github.com/reuixiy/hugo-theme-meme.git themes/meme
  1. 替換config.toml文件，即將這個(gè)鏈接的所有內(nèi)容復(fù)制粘貼到 C:/Users/用戶名/quickstart 文件夾下的config.toml文件中。（怎么打開奇怪后綴名的文件？推薦使用notepad++或者visual studio code）
  2. 配置config.toml文件。對(duì)于MemE主題，該文件的配置說明極其詳細(xì)，按照文件中說明修改即可。

給網(wǎng)站增加一點(diǎn)內(nèi)容

寫第一篇文章

  1. 還是在老地方CMD中打開博客所在文件夾：
cd /d C:/Users/用戶名/quickstart
  1. 輸入下方代碼，my-first-post可以修改成任意想要的內(nèi)容，甚至中文：
hugo new posts/my-first-post.md
  1. 在 content/posts 里找到剛才新建的markdown文件，盡情寫作吧。（什么是markdown？語法是什么？）在文章的開頭（被稱為Front Matter，用于文章生成的一些控制）會(huì)自動(dòng)生成下列部分字段，這里可以根據(jù)自己需要修改為：
---title: "My First Post" #文章標(biāo)題description: 文章的描述信息keywords: - post - blogdate: 2019-03-26T08:47:11+01:00 #文章建立時(shí)間lastmod: 2019-03-26T08:47:11+01:00 #文章最近修改draft: true #是否為草稿，false則不是草稿、會(huì)發(fā)布slug: my-first-post #文章別名，用來做永久鏈接，下方會(huì)詳細(xì)說明tag: #文章的標(biāo)簽 - 第一個(gè)tag - 第二個(gè)tag - 第n個(gè)tagcategories: #文章的目錄 - 第一個(gè)category - 第二個(gè)category - 第n個(gè)category---

或者復(fù)制粘貼你的markdown文件

  1. 將自己所有的markdown文件放入posts文件夾中即可。
  2. 將原來wordpress中uploads的圖片放入content文件夾下。
  3. 用python批量將原有的圖片鏈接替換為相對(duì)路徑：完整代碼下載，請(qǐng)點(diǎn)擊這里，搜索文件名為20200126-hugo_changes_urls_of_images.py的文件。
點(diǎn)擊下載上方py文件，修改下方部分。比方說原圖片路徑為 https://hxd.red/wp-contents/uploads/2019/10/10.jpg ，更改后變?yōu)?/uploads/2019/10/10.jpg。

data = re.sub('https://hxd.red/wp-contents', '', data) # 修改此處代碼，即將'https://hxd.red/wp-contents'替換為空。if __name__ == '__main__': top = r'C:/Users/用戶名/quickstart/content/posts' # 修改此處，更變?yōu)槟愕腷log文件夾 modify_md_content(top)

預(yù)覽和上傳站點(diǎn)

上傳并部署站點(diǎn)

安裝寶塔面板（更方便管理）、環(huán)境；解析域名；綁定域名等操作可以查看這篇文章：網(wǎng)站又搬遷啦：順便說一說使用騰訊云服務(wù)器搭建博客和wordpress備份遷移。下方的兩條方法均以已安裝寶塔面板、已在面板中添加完網(wǎng)站為前提。

2020.10.6 更新：推薦使用 Netlify !

使用FTP

上傳站點(diǎn)先用個(gè)傻一點(diǎn)的辦法：將public文件夾中的所有文件打包，這里推薦使用tar.gz格式進(jìn)行打包。之后可以通過寶塔面板或者ftp傳至服務(wù)器，然后解壓即可。（缺點(diǎn)：傳輸速度慢、速度慢、速度慢；但是每次可以不將uploads文件夾打包，圖片單獨(dú)傳。）

使用Git

yum install gitcd /www/wwwroot/<你設(shè)置的網(wǎng)站名稱或文件夾>git clone https://github.com/0sheldonhuang0/hxdred_blog.git #克隆，首次使用git pull https://github.com/0sheldonhuang0/hxdred_blog.git #更新由此，使用hugo建站完成！

雜項(xiàng)的配置

內(nèi)容摘要

Hugo 會(huì)自動(dòng)提取文章的前n個(gè)字符作為摘要，或者在config.toml中設(shè)置（使用MemE主題的話）。此外，還可以在文章內(nèi)使用下方代碼進(jìn)行強(qiáng)行分割。

<!--more-->

永久鏈接配置

為了使遷移過后的網(wǎng)站仍舊保持原有鏈接的樣式，這一步是必做不可的：

  1. 首先還是在config.toml文件中增加（部分內(nèi)容已經(jīng)有了，使用MemE主題的情況下）：
# URL 結(jié)構(gòu)[permalinks] posts = "/:year/:month/:day/:slug/" # 增加此處 年/月/日/文章別名，保持和wordpress默認(rèn)的一致 categories = "/categories/:slug/" tags = "/tags/:slug/"
  1. 在所有文章的Front Matter中加入：
title: 微信小程序「法語記憶：學(xué)背單詞動(dòng)詞變位」2019總結(jié)slug: conj-helper-2019 #文章別名，用來做永久鏈接舉個(gè)例子：鏈接就會(huì)從https://hxd.red/posts/微信小程序「法語記憶：學(xué)背單詞動(dòng)詞變位」2019總結(jié)變?yōu)?code>https://hxd.red/2020/01/16/conj-helper-2019/，使得其與搜索引擎中之前收錄的鏈接一致，不會(huì)跳成404。

新建頁面

新建的文章在文件夾content/posts下方，而要新建頁面則直接在content文件夾下創(chuàng)建對(duì)應(yīng)的文件夾，比如新建文件夾about。在新的文件夾下創(chuàng)建文件index.md，頁面的Front Matter類似于文章。創(chuàng)建完成之后可以直接通過https://hxd.red/about進(jìn)行訪問。

更改字體

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC&display=swap" rel="stylesheet">// Fonts$fonts: "Trebuchet MS", Verdana; //原來$fonts: "Noto Serif SC", "Trebuchet MS", Verdana; //新加入字體，放在最前面

增加百度、谷歌統(tǒng)計(jì)

<script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "https://#/hm.js?你的專屬后綴"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script>

顯示數(shù)學(xué)公式

示例文章可以點(diǎn)擊這里

顯示效果示例：$$ f(x) = /sin(x) $$

行間顯示：$$ f(x) = /sin(x) $$換行顯示：$$f(x) = /sin(x) $$<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG"></script>參考資料在這里

顯示目錄

在每篇文章的開頭顯示文章的目錄，即TOC。這里可以參考官方的教程，也可以參考下方：

[params] toc = true<!-- toc.html --><!-- ignore empty links with + -->{{ $headers := findRE "<h[1-4].*?>(.|/n])+?</h[1-4]>" .Content }}<!-- at least one header to link to -->{{ if ge (len $headers) 1 }}{{ $h1_n := len (findRE "(.|/n])+?" .Content) }}{{ $re := (cond (eq $h1_n 0) "<h[2-4]" "<h[1-4]") }}{{ $renum := (cond (eq $h1_n 0) "[2-4]" "[1-4]") }}<!--Scrollspy--><div class="toc"> <div class="page-header"><strong>- CATALOG -</strong></div> <div id="page-scrollspy" class="toc-nav"> {{ range $headers }} {{ $header := . }} {{ range first 1 (findRE $re $header 1) }} {{ range findRE $renum . 1 }} {{ $next_heading := (cond (eq $h1_n 0) (sub (int .) 1 ) (int . ) ) }} {{ range seq $next_heading }} <ul class="nav"> {{end}} {{ $anchorId := (replaceRE ".* id=/"(.*?)/".*" "$1" $header ) }} <li class="nav-item"> <a class="nav-link text-left" href="#{{ $anchorId }}"> {{ $header | plainify | htmlUnescape }} </a> </li> <!-- close list --> {{ range seq $next_heading }} </ul> {{ end }} {{ end }} {{ end }} {{ end }} </div></div><!--Scrollspy-->{{ end }}{{ if .Site.Params.toc | default false }}{{ partial "toc" . }}{{ end }}參考資料在這里

增補(bǔ)

歡迎關(guān)注公眾號(hào)：不淡定的實(shí)驗(yàn)室。原文地址：



關(guān)鍵詞：成器,靜態(tài),使用

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉