logo  

TRDWBST-pages-blog

    
导航
X

导航



头像

5h9igzqanx




本篇目录




通过Hugo建造博客网站

⏰:2024年7月20日12:09  📝:5h9igzqanx

如何通过Hugo和Github Pages来在互联网上建造一个简单的博客网站

本文仅代表作者观点，如有负面影响其将被删除！



通过Hugo建造博客网站

概述

大家好，因为这个网站的建成，我终于可以在属于我自己的地方写东西了。

但是，在看文章的大家又该怎么办呢？

不用担心！这不，我就把教程放出来了，大家可以通过这个自己动手建造一个博客网站。

不啰嗦了，开始吧。

教程-制作本地网站

材料准备

  1. 一台搭载任意系统的电脑
  2. the Internet
  3. Hugo软件（如果没有请看下面）
  4. Visual Studio Code软件（或其他任意代码编辑器）
  5. MarkText软件（或其他能编写Markdown文档的编辑器）
  6. 能加速Github的任意加速器（如果不需要加速可以跳过）

配置Hugo环境

如果是MacOS或Linux系统且安装了Homebrew包管理器的话，直接在命令行输入

brew install hugo

如果像我一样是Windows系统的话，可以先去Hugo的Github仓库下载Hugo主程序，然后把这个程序放在一个容易记住的目录里（放在你经常安装软件的那个目录就行，建议路径不要有中文名），复制这个目录的绝对路径，

接着右键任务栏上的Windows徽标，点击“系统”，在弹出的设置界面选择“高级系统设置”（没有的往下拉），点击“环境变量”，

在“系统变量”中选中“Path”并点击“编辑”，在弹出窗口中点击“新建”，把刚刚复制的路径粘贴进去，点击“确定”、“确定”和“确定”，

最后，如果你想验证你安装好了没有的话，可以在命令行输入

hugo version

如果你在命令行看到了他的版本号，说明你已经跨过了创建博客网站的第一道坎儿，恭喜你！

创建本地站点

在你想创建站点的上一个目录下打开命令行，或使用cd命令跳转到那里。但是要确保这个目录下没有和你想创建的站点名字一样的目录。即使有也要保证里面什么也没有，否则会出现错误。

然后在命令行里输入

hugo new site your-sites-name

但是

其中的“your-sites-name”要换成你的站点的名字。

然后你就会发现目录下面出现了很多文件，具体如下

.
│  .hintrc
│  .hugo_build.lock
│  hugo.toml
│
├─archetypes
│      default.md
│
├─assets
├─content
├─data
├─i18n
├─layouts
├─public
├─static
└─themes

现在你已经创建好了本地站点，来看看下一步吧。

选择并加载主题

首先，你需要前往Hugo主题页面相中一个主题，点击那个主题，点“Download”，

在跳转到的Github仓库点击Code按钮，点击"Download ZIP"，

下载解压后，把解压后得到的目录复制到刚刚你创建的站点目录下的themes目录里，

返回上一个目录，找到hugo.toml并打开，在里面按照以下例子来设置

baseURL = "your site's URL" #你网站的网址
languageCode = "en-us" #你网站的语言代码（这里显示了默认值“英语-美国”）
title = "your site's name" #你网站的名字
theme = "the name of the downloaded theme" #你网站使用的主题，直接把刚刚复制到“themes”的目录名字写上去就行
把第一、三、四行等号后的内容按照实际情况来设置。

附：语言代码表

创建文章

将命令行跳转到你的站点目录下，输入

hugo new post/theNameOfYourArticle.md

把“theNameOfYourArticle”改成你的文章的名字，

然后打开content，再打开post，使用你的Markdown语言编辑器打开刚刚创建的那个文件，

打开之后显示像这样（只是参考）

---
title : 'theNameOfYourArticle'
date : 2000-01-01T10:00:00+08:00
draft : true
---

此时你就可以在第五行三个减号下面开始编写你的文章了。

附：《MarkDown 语法大总结【全网汇总，从0到深大全版】》来自CSDN博客

如果编写完成，需要把第四行的true改为false就代表你这篇文章发出去了。

启动网站

站点有了，文章也有了，是不是迫不及待想看了？

好，现在再把命令行跳转到你的站点目录下，输入

hugo server

如果看到命令行输出以下信息，你就可以通过localhost:1313/your-sites-name/（命令行倒数第二行显示的那个网址）来访问了。

Watching for changes in ######\{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in ######\hugo.toml, ######\themes\######\hugo.toml
Start building sites …
hugo v0.129.0-e85be29867d71e09ce48d293ad9d1f715bc09bb9+extended windows/amd64 BuildDate=2000-01-01T10:00:00Z VendorInfo=gohugoio


                   | EN
-------------------+-----
  Pages            |  1
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  1
  Processed images |  0
  Aliases          |  0
  Cleaned          |  0

Built in 146 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/your-sites-name/ (bind address 127.0.0.1)
Press Ctrl+C to stop

教程-上传到Github Pages

材料准备

  1. 一台搭载任意系统的电脑
  2. the Internet
  3. Hugo软件
  4. 你创建好的Hugo站点
  5. Github Desktop软件（如果熟练使用Git软件了那么请便）
  6. 能加速Github的任意加速器（如果不用加速可以跳过）

创建Github仓库

打开Github官网，创建一个新的存储库。

什么？你说你不会创建存储库？来看下面。

打开官网主页之后，登录你的账号，点击右上角的“+”，点击“New repository”（新存储库），然后跳转到创建存储库的页面。

按要求输入你的存储库名称（需要和上面创建的站点名称一致），和描述（可选），然后再看看有什么要求。

但是你需要确保在“Choose visibility”（选择可见性）这个栏目下，你选择了“Public”（公开）。

点击“Create repository”，完成。

创建2个不同的分支（一个存放源代码，另一个存放部署网页）。

笔者的做法是首先在网页端随意创建什么东西，创建一个提交，然后可以看到在存储库名称下面的一个写有“main”的按钮的右边有一个写着“Branches”的按钮，点击它。

在新的页面中点击“New branch”，输入你的分支名称（例如“gh-pages”）。

如果你想，可以点击“main”右边的三个点，点击“Rename branch”，给主分支改一个名字（例如"source"），建议将其作为存放源代码的分支。

然后回到存储库主页，点击你刚刚随便创建的那个文件，跳转后点击右上角三个点，选“Delete file”，然后点“Commit changes”。记得两个分支都要进行一遍，在存储库主页点击“2 Branches”左边写有你刚刚创建的分支名称的按钮可以切换分支。

把你的站点推送到存放源代码的分支上。

可以通过某些渠道（例如百度或者Github）下载Github Desktop软件，安装后登录你的Github账号。

在主界面上边标题点击“File”，选择“Clone repository…”，然后选择你刚刚创建的存储库，在“Local path”选定你想要的位置（不要直接选择你刚刚部署的站点的文件夹，最好选到它旁边），点击“Clone”，等待。

然后把你部署的站点里面的文件复制到存储库的文件夹里。

打开Github Desktop软件，在上面“Current repository”栏目选定你刚刚的存储库，在“Current branch”栏目选定你存放源代码的分支，在左下角写有“Summary (required)”的栏目写下你这次提交的标题，然后点击下面写有“Commit xxx files to xxxx”（“xxxx”即你存放源代码的分支的名称）的蓝色按钮，提交。

配置Github Actions工作流

在源代码分支创建.github/workflows/deploy.yml文件，用来配置Github Actions工作流，

在这个文件中按照实际输入

name: Deploy to GitHub Pages
on:
  push:
    branches:
      - source # 这里写你存放源代码的分支名字
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout Source Branch
      uses: actions/checkout@v2
      with:
        ref: 'source' # 这里写你存放源代码的分支名字
        submodules: true
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: 'latest'
    - name: Build Hugo Site
      run: hugo --minify --baseURL "https://yourUserName.github.io/yourRepositoryName" # 这里写你想要的网站网址（一般是“https://你的用户名.github.io/这个仓库名”）
    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        publish_branch: gh-pages # 这里写你想部署到的分支名字
        publish_dir: ./public
        github_token: ${{ secrets.GITHUB_TOKEN }}

保存，Push。

配置Github Pages

打开存储库，选择“Settings”标签，在左栏中选中“Pages”选项，

在“Branch”栏目将分支选择你定的用于部署的分支（示例中是gh-pages，按实际情况而定），然后点击“Save”，

当点击后页面上显示成功时，你的网页就成功部署到Github Pages上了。

上传文章

在本地，按照上一个教程的步骤4创建文章，编写后提交到源码分支上，

提交好之后，Github Actions会自动部署网站，至此，大功告成！

教程-高阶操作与美化

以下的是可选部分，如果你待见你下载的主题，感觉不需要改了，那么请忽略。

添加评论系统

当你的博客网站做好之后，你肯定想让其他朋友来看，但是如果你想让他们留言的话，你需要一个外包的评论系统来实现评论。

这里使用我使用的Intensedebate平台来做示范。

首先打开Intensedebate官网，注册一个账号。

然后登录，在页面点击“Install Intensedebate”字样，跳转。

按照提示，输入你的博客网站的网址，点“Next Step”。

按照提示，点击“Generic Install”（因为我们是用Hugo制作的，不是上面列出的任何一个），点“Next Step”。

按照提示，将左边第一个文本框里的代码复制粘贴到你的单篇文章模板（一般是themes/yourThemeDirection/layouts/\_default/single.html）的底部（一般是放在{{ .content }}后面），保存，Push。

然后回到Intensedebate仪表板，设置一些评论规则，根据文档通过CSS美化，至此，大功告成！

添加目录

当你的博客网站做好之后，你肯定想看文章，但是如果你写了一篇很长的文章，而且页面上没有目录，碰巧你想看看中间部分写了什么，你就需要一点一点往下扒，这很容易把你和访问你这篇文章的人气亖，

那么怎么办呢？当然是在你的页面上添加目录啦。

好，话不多说，先上教程：

只需要在你的单篇文章模板（一般是themes/yourThemeDirection/layouts/_default/single.html）的顶部（或者其他你想放的地方也行）添加神秘小代码：

{{ .TableOfContents }}

然后就成了。

什么？你问为什么？

那还不简单？Hugo的Markdown转换器本来就支持目录啊！

但是——在实际情况下，你的H1标题是不会出现在目录里的。

最后你可以在网站主题目录下的hugo.toml中更改一下目录的显示数量就行了（就是从H2到H6显示多少的意思）

[markup]
  [markup.tableOfContents]
    startLevel = 2
    endLevel = 4
    ordered = false

所以至此，大功告成！

上面的文件，笔者是这样设置的，反正这里的Markdown转换器使用的是MarkUp。只要在模板文件中包含{{ .TableOfContents }}就行了。

链接外部层叠样式表

众所周知，如果html是一个网站的骨架，那么css就是它的外表，js就是它的灵魂。

那么我们在这里要如何链接css呢？且听我说。

在用Hugo搭建的站点上，我们是不可使用常规方式链接css，因为它实际上需要构建之后才是我们看到的，所以这样链接的css就会移位，到时候出个404你就哭笑不得了。

其实只需要使用Hugo的短代码就行了。

例如：我有一css文件style.css就放在/themes/the name of the downloaded theme/assets/css中，那么你就可以使用以下短代码：

{{ $style := resources.Get "css/style.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous">

like this，但是——

如果你有2个及以上的css文件，也可如法炮制，但是需要把$style改为不同名字再把路径换一下就行了，例如我分别引用了s1.css，s2.css和s3.css。

就按这样写：

{{ $s1 := resources.Get "css/s1.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $s1.Permalink }}" integrity="{{ $s1.Data.Integrity }}" crossorigin="anonymous">
{{ $s2 := resources.Get "css/s2.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $s3.Permalink }}" integrity="{{ $s3.Data.Integrity }}" crossorigin="anonymous">
{{ $s3 := resources.Get "css/s3.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $s3.Permalink }}" integrity="{{ $s3.Data.Integrity }}" crossorigin="anonymous">
你如果要写css样式，建议可以先在浏览器中打开开发者工具先在网页中试着添加css样式，感觉可以了再通过代码编辑器写进文件里push。

至此，大功告成！

卷末语

本期教程到此结束，希望你能通过这里的教程，自己构建一个精美的博客页面，再见。

参考文献

《Hugo - 10分钟搭建 & 部署个人网站/博客，简历中的博客网站怎么建》来自Bilibili

《Hexo yilia 添加 intensedebate 评论系统》来自CSDN博客



您可以在此页面/对此文章：


   

 

关闭全屏显示图片X