hugo + nginx 搭建部落格記錄

Kingram發表於2021-07-14
GoNginx

作為一個萌新Gopher，經常逛網站能看到那種極簡的部落格，引入眼簾的不是花裡胡哨的圖片和樣式，而是黑白搭配，簡簡單單的文章標題，這種風格很吸引我。正好看到煎魚佬也在用這種風格的部落格，於是解除安裝了我的wordpress開始抄襲，o(*￣︶￣*)o

Hugo簡介

Hugo是由Go語言實現的靜態網站生成器。簡單、易用、高效、易擴充套件、快速部署。

準備和環境

我直接在我的阿里雲伺服器上使用hugo了，環境如下：

  • 作業系統：公共映象CentOS 8.1 64位
  • Nginx版本：Nginx 1.16.1
  • 域名：kingram.top
  • 阿里雲伺服器：8.136.204.132

Hugo使用

安裝Hugo

由於我用的是Linux系統，直接wget下載安裝就好了，其他系統參考Hugo中文文件其他版本參考Hugo Releases

cd ~
wget https://github.com/gohugoio/hugo/releases/download/v0.85.0/hugo_0.85.0_Linux-64bit.tar.gz
tar -zxvf hugo_0.85.0_Linux-64bit.tar.gz
mv hugo /usr/bin/

檢查是否安裝成功

hugo version

輸出

hugo v0.85.0-724D5DB5 linux/amd64 BuildDate=2021-07-05T10:46:28Z VendorInfo=gohugoio

就說明安裝成功啦

建立blog站點

在當前目錄執行命令建立blog站點

hugo new site myblog

這個myblog就是專案的名字了，建立的目錄如下

├── archetypes
│   └── default.md
├── config.toml         # 部落格站點的配置檔案
├── content             # 部落格文章所在目錄
├── data                
├── layouts             # 網站佈局
├── static              # 一些靜態內容
└── themes              # 部落格主題

我們的部落格文章就放在content目錄下的posts中，只需要按照Markdown格式編寫，hugo就會讀取到文章然後展示在部落格中。

安裝主題

不用主題是無法使用hugo的，我這裡用的是hermit主題，開發者是Track3，然後我魔改了下，抄襲了煎魚佬的樣式，改為了黑白結合的。

安裝依次執行以下命令：

cd myblog 
# clone到
git clone https://github.com/Track3/hermit.git ./themes/hermit

使用主題

將hermit主題中exampleSite目錄下的內容拷貝到當前目錄myblog下

cp themes/hermit/exampleSite/* ./ -r

可以通過修改config.toml檔案來更改配置

貼上我的config.toml檔案配置，是抄了煎魚佬(#.#)

baseURL = "http://kingram.top"
languageCode = "zh-hans"
defaultContentLanguage = "en"
title = "Kingram"
theme = "hermit"
# enableGitInfo = true
pygmentsCodefences  = true
pygmentsUseClasses  = true
# hasCJKLanguage = true  # If Chinese/Japanese/Korean is your main content language, enable this to make wordCount works right.
rssLimit = 10  # Maximum number of items in the RSS feed.
copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template.
enableEmoji = true  # Shorthand emojis in content files - https://gohugo.io/functions/emojify/
googleAnalytics = "UA-166045776-1"
# disqusShortname = "yourdiscussshortname"

[author]
  name = "Kingram"

[blackfriday]
  # hrefTargetBlank = true
  # noreferrerLinks = true
  # nofollowLinks = true

[taxonomies]
  tag = "tags"
  # Categories are disabled by default.

[params]
  since = "2018"
  toc = true

 customCSS = ["css/a.css"]
  
  dateform        = "Jan 2, 2006"
  dateformShort   = "Jan 2"
  dateformNum     = "2006-01-02"
  dateformNumTime = "2006-01-02 15:04 -0700"

  # Metadata mostly used in document's head
  # description = ""
  # images = [""]

  # homeSubtitle = "Coding, Thinking, Life"
  footerCopyright = ' &#183; <a href="http://beian.miit.gov.cn/">蘇ICP備2021012652號</a>'
  # bgImg = ""  # Homepage background-image URL

  # Prefix of link to the git commit detail page. GitInfo must be enabled.
  # gitUrl = "https://github.com/username/repository/commit/"

  # Toggling this option needs to rebuild SCSS, requires Hugo extended version
  justifyContent = false  # Set "text-align: justify" to `.content`.

  relatedPosts = false  # Add a related content section to all single posts page

  code_copy_button = true # Turn on/off the code-copy-button for code-fields
  
  # Add custom css
  # customCSS = ["css/foo.css", "css/bar.css"]

  # Social Icons
  # Check https://github.com/Track3/hermit#social-icons for more info.

  [[params.social]]
    name = "github"
    url = "https://github.com/k1ngram4"

[menu]

  [[menu.main]]
    name = "文章"
    url = "posts/"
    weight = 10
	
  [[menu.main]]
    name = "標籤"
    url = "tags/"
    weight = 10

  [[menu.main]]
    name = "關於"
    url = "about/"
    weight = 20

設定好配置檔案後在myblog目錄下執行hugo命令即可生成public資料夾，這個資料夾就是我們站點的根目錄資料夾，後面nginx中部署時指定的根目錄也是這個。如果想使用github pages只要將這個目錄放在github託管，每次改完提交即可。

hugo

使用Nginx部署

安裝Nginx

dnf -y install http://nginx.org/packages/centos/8/x86_64/RPMS/nginx-1.16.1-1.el8.ngx.x86_64.rpm

執行命令檢視nginx版本

nginx -v

配置Nginx

修改nginx配置檔案的使用者，否則後面會出現許可權問題

vi /etc/nginx/nginx.conf

按i進入編輯模式

修改user nginx;為user root;

按下Esc鍵，並輸入:wq儲存退出檔案。

修改配置檔案

cd /etc/nginx/conf.d
vi default.conf

按i進入編輯模式

在location大括號內，修改以下內容。

location / {
    #將該路徑替換為您的網站根目錄。
    root   /root/myblog/public/;
    #新增預設首頁資訊
    index  index.html index.htm;
}

按下Esc鍵，並輸入:wq儲存退出檔案。

啟動Nginx

執行以下命令啟動Nginx服務。

systemctl start nginx

執行以下命令設定Nginx服務開機自啟動。

systemctl enable nginx

這樣服務端Nginx就配置完成了，要想通過kingram.top訪問，還需要關閉防火牆（或者配置埠）、配置dns解析、配置阿里雲埠安全組（80埠）等操作，我是直接關了防火牆

關閉防火牆

永久關閉防火牆：

systemctl disable firewalld

執行systemctl status firewalld命令檢視當前防火牆的狀態

● firewalld.service - firewalld - dynamic firewall daemon
   Loaded: loaded (/usr/lib/systemd/system/firewalld.service; disabled; vendor preset: enabled)
   Active: inactive (dead)
     Docs: man:firewalld(1)

dns解析和配置阿里雲安全組可以通過阿里雲文件配置，這樣就可以使用域名直接訪問我們的部落格了。(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤

後面準備搭個自動部署的指令碼，等搞完了再寫個文章總結下。┏(＾0＾)┛

相關文章