オオカミのメモ帳
Trusty Wolf's Notebook.
Hello, World!
0202年了,终于克服懒懒的毛病,重新开始写博客了。这篇文章主要记录博客搭建的过程,并针对本博客使用的静态网页生成器Hugo进行一些功能测试。

0202年了,终于克服懒懒的毛病,重新开始写博客了。这篇文章主要记录博客搭建的过程,并针对本博客使用的静态网页生成器Hugo进行一些功能测试。

运行环境: WSL2(Fedora Remix for WSL) on Windows 10

$ cat /etc/redhat-release 
Generic release 32 (Generic)
$ uname -r
4.19.128-microsoft-standard

Hugo的安装

先确认一下Fedora官方软件源里的Hugo的版本:

$ sudo yum info hugo
Last metadata expiration check: 0:00:13 ago on Sat Oct 10 00:31:29 2020.
Available Packages
Name         : hugo
Version      : 0.69.0
Release      : 2.fc32~bootstrap
Architecture : x86_64
Size         : 39 M
Source       : hugo-0.69.0-2.fc32~bootstrap.src.rpm
Repository   : updates
Summary      : The world’s fastest framework for building websites
URL          : https://github.com/gohugoio/hugo
License      : ASL 2.0 and MIT
Description  : 
             : Hugo is a static HTML and CSS website generator written in Go. It is optimized
             : for speed, easy use and configurability. Hugo takes a directory with content
             : and templates and renders them into a full HTML website.

2020年10月10日时点,Hugo官方最新的版本为0.76.3,看来Fedora官方软件源里的Hugo版本有些老了,于是考虑直接安装Hugo官方提供的二进制包。

$ echo $PATH
/home/<username>/.local/bin:/home/<username>/bin:/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin
$ mkdir -p ~/.local/bin
$ ls ~/.local/
bin

然后从官方GitHub仓库的Release页面下载所需的二进制包放入~/.local/bin/目录下即可。需要注意的是,目前Hugo官方提供两种二进制包,hugohugo_extended,其中后者提供了对SASS/SCSS的支持,可以看做是hugo的增强版。本博客使用的hugo-theme-diary主题用到了前述的增强功能,故需要使用hugo_extended二进制包。

$ hugo version
Hugo Static Site Generator v0.76.3-E9623459/extended linux/amd64 BuildDate: 2020-10-08T17:17:16Z

到这里,Hugo的安装就已经完成了。

Hugo的使用

先看看帮助:

$ hugo -h  
hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  config      Print the site configuration
  convert     Convert your content to different formats
  deploy      Deploy your site to a Cloud provider.
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  mod         Various Hugo Modules helpers.
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

<中略>

Use "hugo [command] --help" for more information about a command.

1. 新建站点

在这里,我们使用hugo new site命令新建一个blog站点,Hugo会帮我们在当前目录下新建blog文件夹并完成相关初始化操作。

$ hugo new site blog
Congratulations! Your new Hugo site is created in /tmp/blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.
$ cd blog
$ tree
.
|-- archetypes
|   `-- default.md
|-- config.toml
|-- content
|-- data
|-- layouts
|-- static
`-- themes

6 directories, 2 files

2. 添加主题

可以发现,Hugo不同于其他的静态网页生成器,默认并没有自带主题(themes文件夹为空),需要自行添加。

$ pwd
/tmp/blog
$ git clone https://github.com/AmazingRise/hugo-theme-diary.git themes/diary
Cloning into 'themes/diary'...
remote: Enumerating objects: 26, done.
remote: Counting objects: 100% (26/26), done.
remote: Compressing objects: 100% (17/17), done.
remote: Total 1076 (delta 5), reused 17 (delta 4), pack-reused 1050
Receiving objects: 100% (1076/1076), 4.53 MiB | 3.11 MiB/s, done.
Resolving deltas: 100% (546/546), done.
$ ls -l themes/diary
total 48
-rw-rw-r-- 1 <username> <username> 1060 Oct 10 01:52 LICENSE
-rw-rw-r-- 1 <username> <username> 4220 Oct 10 01:52 README.md
drwxrwxr-x 2 <username> <username> 4096 Oct 10 01:52 archetypes
drwxrwxr-x 3 <username> <username> 4096 Oct 10 01:52 assets
drwxrwxr-x 4 <username> <username> 4096 Oct 10 01:52 exampleSite
drwxrwxr-x 2 <username> <username> 4096 Oct 10 01:52 i18n
drwxrwxr-x 2 <username> <username> 4096 Oct 10 01:52 images
drwxrwxr-x 5 <username> <username> 4096 Oct 10 01:52 layouts
drwxrwxr-x 3 <username> <username> 4096 Oct 10 01:52 resources
drwxrwxr-x 5 <username> <username> 4096 Oct 10 01:52 static
-rw-rw-r-- 1 <username> <username>  521 Oct 10 01:52 theme.toml

3. 搭建完成

可以看到,主题的作者已经为我们准备了一个示例站点exampleSite:

$ tree themes/diary/exampleSite 
themes/diary/exampleSite
|-- config.toml
|-- content
|   `-- posts
|       |-- chapter-1.md
|       |-- chapter-6.md
|       |-- chinese.md
|       |-- post-1.md
|       `-- post-5.md
`-- resources
    `-- _gen
        `-- assets
            `-- scss
                `-- scss
                    |-- dark-mode.scss_48b060fe05b0a273d182ef83c0605941.content
                    |-- dark-mode.scss_48b060fe05b0a273d182ef83c0605941.json
                    |-- journal.scss_48b060fe05b0a273d182ef83c0605941.content
                    `-- journal.scss_48b060fe05b0a273d182ef83c0605941.json

7 directories, 10 files

将其拷贝至当前目录下,并使用hugo server命令预览站点。

$ cp -r themes/diary/exampleSite/* .
$ hugo server
Start building sites … 

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

Built in 66 ms
Watching for changes in /tmp/blog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /tmp/blog/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

用浏览器访问http://localhost:1313/,可以看到:

exampleSite

按住Ctrl+C取消预览,并使用hugo命令生成站点,生成的静态文件在public目录下:

$ hugo --minify
Start building sites … 

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

Total in 1318 ms
$ ls -l public 
total 88
drwxrwxr-x 6 trustywolf trustywolf  4096 Oct 10 02:52 categories
drwxr-xr-x 2 trustywolf trustywolf  4096 Oct 10 01:52 images
-rw-rw-r-- 1 trustywolf trustywolf 19544 Oct 10 02:52 index.html
-rw-rw-r-- 1 trustywolf trustywolf 28875 Oct 10 02:52 index.xml
drwxr-xr-x 2 trustywolf trustywolf  4096 Oct 10 01:52 js
drwxrwxr-x 3 trustywolf trustywolf  4096 Oct 10 02:52 page
drwxrwxr-x 8 trustywolf trustywolf  4096 Oct 10 02:52 posts
drwxrwxr-x 2 trustywolf trustywolf  4096 Oct 10 02:52 scss
-rw-rw-r-- 1 trustywolf trustywolf  2265 Oct 10 02:52 sitemap.xml
drwxrwxr-x 9 trustywolf trustywolf  4096 Oct 10 02:52 tags
drwxr-xr-x 4 trustywolf trustywolf  4096 Oct 10 01:52 vendor

至此,基础的安装搭建工作全部完成。

功能测试

二级标题

三级标题

四级标题

This text will be italic This will also be italic

This text will be bold This will also be bold

You can combine them

First HeaderSecond Header
Content from cell 1Content from cell 2
Content in the first columnContent in the second column

Last modified on 2020.10.01

Comments powered by Disqus